Меню
Что нового?

Как создать цикл соединение треугольников?

Katerina1993

Новичок
Здравствуйте продолжаю тему реализация drawTriangle flash на html5. Я полностью разобралась, что такое drawTriangle во flash. Теперь пытаюсь перенести это в html5. Первый вопрос вот: Похожая функция drawTriangles(flash) на html5?

В первом вопросе я сделала только соединение трех вершин по x и y, если добавить больше точек ничего не происходит. Мне нужно чтобы пользователь мог сколько угодно точек добавлять для рисования треугольников. Отложила пока цикл и попыталась сделать обычным путем moveTo и lineTo.

1. vertices – это координаты
2. indices – это индексы вершин по которым происходит соединение (они ссылаются на массив vertices).
Как мне все это поместить в цикл? Вот код:
Код:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>drawTriangle</title>
<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");

var vertices = [[100,100],[200,100],[300,100],[400,100],[500,100],[100,200],[200,200]];
var indices = [0,1,5,1,6,5,1,2,6];
var x = 20;
var y = 20;
        
ctx.beginPath();
ctx.moveTo(vertices[indices[0]][0]+x, vertices[indices[0]][1]+y);
ctx.lineTo(vertices[indices[1]][0]+x, vertices[indices[1]][1]+y);
ctx.lineTo(vertices[indices[2]][0]+x, vertices[indices[2]][1]+y);
ctx.closePath();   
ctx.stroke();

ctx.beginPath();
ctx.moveTo(vertices[indices[3]][0]+x, vertices[indices[3]][1]+y);
ctx.lineTo(vertices[indices[4]][0]+x, vertices[indices[4]][1]+y);
ctx.lineTo(vertices[indices[5]][0]+x, vertices[indices[5]][1]+y);
ctx.closePath();   
ctx.stroke();
          
ctx.beginPath();
ctx.moveTo(vertices[indices[6]][0]+x,vertices[indices[6]][1]+y);
ctx.lineTo(vertices[indices[7]][0]+x,vertices[indices[7]][1]+y);
ctx.lineTo(vertices[indices[8]][0]+x,vertices[indices[8]][1]+y);
ctx.closePath();   
ctx.stroke();

}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
</body>
</html>
Результат выполнения скрипта 3 триугольника.
1632
 

ksnk

прохожий
В предыдущем треде было решение - использовать clip и рисовать картинку. Оно уже не подходит ?
 

Katerina1993

Новичок
Трудно сказать как в цикле параметры записать? Мне не нужно WebGL его надо учить. Мне нужно вывести в цикле и все. Короче понятно JS не является сильной стороной этого форума. Буду искать ответ на другом форуме.

Знаете даже по ссылке переходить не буду, мне это технология не нужна.

P.S. Удивительно я разобралась что такое Triangle (прочитала документацию flash), а мне говорят ты все не правильно делаешь тебе нужно выучить другую технологию WebGL, а также С++. Так как в WebGL иногда используется язык С, Прочитай пару томов на 1000 страниц по программированию и после этого сможешь вывести треугольничек.
 
AmdY

AmdY

Пью пиво
Команда форума
Вроде не первый пост. Зачем вы страдаете, если можно сконвертировать flash в html5 тулзой?
Или не помогло?
 

ksnk

прохожий
если вставить фразу `сконвертировать flash в html5 тулзой` в строку хрома, то появятся несколько ссылок.
Вот первая
 
WMix

WMix

герр M:)ller
Партнер клуба
Katerina1993 написал(а):
Здравствуйте продолжаю тему реализация drawTriangle flash на html5. Я полностью разобралась, что такое drawTriangle во flash. Теперь пытаюсь перенести это в html5. Первый вопрос вот: Похожая функция drawTriangles(flash) на html5?

В первом вопросе я сделала только соединение трех вершин по x и y, если добавить больше точек ничего не происходит. Мне нужно чтобы пользователь мог сколько угодно точек добавлять для рисования треугольников. Отложила пока цикл и попыталась сделать обычным путем moveTo и lineTo.

1. vertices – это координаты
2. indices – это индексы вершин по которым происходит соединение (они ссылаются на массив vertices).
Как мне все это поместить в цикл? Вот код:
Код:
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>drawTriangle</title>
<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");

var vertices = [[100,100],[200,100],[300,100],[400,100],[500,100],[100,200],[200,200]];
var indices = [0,1,5,1,6,5,1,2,6];
var x = 20;
var y = 20;
       
ctx.beginPath();
ctx.moveTo(vertices[indices[0]][0]+x, vertices[indices[0]][1]+y);
ctx.lineTo(vertices[indices[1]][0]+x, vertices[indices[1]][1]+y);
ctx.lineTo(vertices[indices[2]][0]+x, vertices[indices[2]][1]+y);
ctx.closePath();  
ctx.stroke();

ctx.beginPath();
ctx.moveTo(vertices[indices[3]][0]+x, vertices[indices[3]][1]+y);
ctx.lineTo(vertices[indices[4]][0]+x, vertices[indices[4]][1]+y);
ctx.lineTo(vertices[indices[5]][0]+x, vertices[indices[5]][1]+y);
ctx.closePath();  
ctx.stroke();
         
ctx.beginPath();
ctx.moveTo(vertices[indices[6]][0]+x,vertices[indices[6]][1]+y);
ctx.lineTo(vertices[indices[7]][0]+x,vertices[indices[7]][1]+y);
ctx.lineTo(vertices[indices[8]][0]+x,vertices[indices[8]][1]+y);
ctx.closePath();  
ctx.stroke();

}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="400px" height="300px"></canvas><br>
</body>
</html>
Результат выполнения скрипта 3 триугольника.
Посмотреть вложение 1632
Нажмите для раскрытия...
на самом деле, в каждом Patch всего 2 линии, почему так понятно, логика рисования ломает человека.
PHP: 
vertices[indices[0]][0]+x
это на столько сложная конструкция, что спустя 2 недели даже ты не сможешь пересчитать

начни с логики, это прямоугольный, равнобедренный треугольник, а это значит ... и упрости до ширина, высота или в чем задача?
 

Katerina1993

Новичок
и упрости до ширина, высота или в чем задача?
Нажмите для раскрытия...
Вот в этом. Они повторяются, только значения немного разные. Нужно как-то упаковать в цикл for.

HTML: 
ctx.beginPath();
ctx.moveTo(vertices[indices[0]][0]+x, vertices[indices[0]][1]+y);
ctx.lineTo(vertices[indices[1]][0]+x, vertices[indices[1]][1]+y);
ctx.lineTo(vertices[indices[2]][0]+x, vertices[indices[2]][1]+y);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(vertices[indices[3]][0]+x, vertices[indices[3]][1]+y);
ctx.lineTo(vertices[indices[4]][0]+x, vertices[indices[4]][1]+y);
ctx.lineTo(vertices[indices[5]][0]+x, vertices[indices[5]][1]+y);
ctx.closePath();
ctx.stroke();
       
ctx.beginPath();
ctx.moveTo(vertices[indices[6]][0]+x,vertices[indices[6]][1]+y);
ctx.lineTo(vertices[indices[7]][0]+x,vertices[indices[7]][1]+y);
ctx.lineTo(vertices[indices[8]][0]+x,vertices[indices[8]][1]+y);
ctx.closePath();
ctx.stroke();
 
WMix

WMix

герр M:)ller
Партнер клуба
я предлагаю написать 1 раз функцию которая принимает 3 точки (х,у) где первая точка это начало, 2 угловая, 3я конечная

JavaScript: 
function triangle(x1, y1, x2, y2, x3, y3){
  ctx.beginPath();
  ctx.moveTo(x1,y1);
  ctx.lineTo(x2,y2);
  ctx.lineTo(x3,y3);
  ctx.closePath();
  ctx.stroke();
}
но от этого проблема не становится решена,
я не понимаю принципа подсчета координат vertices[indices[6]][0]+x
но если к примеру обьявить масив

JavaScript: 
var triangles = [
  [  0,   0,    0, 100,  100, 100],
  [100, 100,    0, 200,    0, 100],
  [100, 100,  100, 200,    0, 200],
  // остальные
];
то все становится просто, просто бегаем циклом и вызываем функцию

JavaScript: 
for (let i = 0; i < triangles.length; i++) {
  triangle(
    triangles[i][0], triangles[i][1],
    triangles[i][2], triangles[i][3],
    triangles[i][4], triangles[i][5]
  );
}
 
Последнее редактирование:
WMix

WMix

герр M:)ller
Партнер клуба
добавляю твою логику
JavaScript: 
function triangle(vertice1, vertices2, vertices3){
  ctx.beginPath();
  ctx.moveTo(vertice1[0],vertice1[1]);
  ctx.lineTo(vertice2[0],vertice2[1]);
  ctx.lineTo(vertice3[0],vertice3[1]);
  ctx.closePath();
  ctx.stroke();
}
// это очень сложно, у точек нет логики последовательности
var vertices = [[100,100],[200,100],[300,100],[400,100],[500,100],[100,200],[200,200]];
// но допустим так надо и в первом примере индексы написаны правильно
var triangles = [
  [0, 1, 5],
  [1, 6, 5],
  [1, 2, 6],
  // остальные
];
//то вероятно будет так
for (let i = 0; i < triangles.length; i++) {
  triangle(
    vertices[triangles[i][0]],
    vertices[triangles[i][1]],
    vertices[triangles[i][2]]
  );
}
 
Последнее редактирование:

Katerina1993

Новичок
Все работает, вот полностью координаты для рисование треуголников.
HTML: 
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>drawTriangle</title>
<script>
var canvas, ctx, img;
window.onload = function()
{
canvas = document.getElementById("drawingCanvas");
ctx = canvas.getContext("2d");

function triangle(vertice1, vertice2, vertice3){
  ctx.beginPath();
  ctx.moveTo(vertice1[0],vertice1[1]);
  ctx.lineTo(vertice2[0],vertice2[1]);
  ctx.lineTo(vertice3[0],vertice3[1]);
  ctx.closePath();
  ctx.stroke();
}

var vertices = [[100,100],[200,100],[300,100],[400,100],[500,100],[100,200],[200,200],[300,200],[400,200],[500,200],[100,300],[200,300],[300,300],[400,300],[500,300],[100,400],[200,400],[300,400],[400,400],[500,400]];

var triangles = [[0,1,5],[1,6,5],[1,2,6],[2,7,6],[2,3,7],[3,8,7],[3,4,8],[4,9,8],[5,6,10],[6,11,10],[6,7,11],[7,12,11],[7,8,12],[8,13,12],[8,9,13],[9,14,13],[10,11,15],[11,16,15],[11,12,16],[12,17,16],[12,13,17],[13,18,17],[13,14,18],[14,19,18]];

for (let i = 0; i < triangles.length; i++) {
  triangle(
    vertices[triangles[i][0]],
    vertices[triangles[i][1]],
    vertices[triangles[i][2]]
  );
}
}
</script>
</head>
<body>
<canvas id="drawingCanvas" style="background:#444444" width="800px" height="500px"></canvas><br>
</body>
</html>
 
Войдите или зарегистрируйтесь для ответа.
Сверху