Нарисуйте дугу с помощью bezierCurveTo с относительными координатами для точек дуги

Question

Нарисуйте дугу с помощью bezierCurveTo с относительными координатами для точек дуги

1

Я не уверен, что я даже спрашиваю об этом. Это для рисования на планшетах, и сейчас у меня есть линии с подвижными точками на каждом конце, поэтому холст является интерактивным. Я хочу использовать кривую для создания дуги двери, которая будет нарисована после этой линии. У меня есть начальная и конечная точка из существующего кода, где начинать и заканчивать кривую, но элементы управления дугой относятся к определенной координате, которая не вычисляется, поэтому дуга никогда не идет туда, где она должна.

Это то, что я имею прямо сейчас, я узнал, что moveTo() и lineTo() - это то, что контролирует его начальную и конечную точку. Спасибо за помощь, я никогда не играл с полотнами раньше

activeLineDrawing.beginPath();
activeLineDrawing.moveTo(lineSegments[lineSeg].panels[i].getX2(),lineSegments[lineSeg].panels[i].getY2());
activeLineDrawing.lineTo(lineSegments[lineSeg].panels[i].getX1(),lineSegments[lineSeg].panels[i].getY1());
activeLineDrawing.bezierCurveTo(100, 75, 50, 1, lineSegments[lineSeg].panels[i].getX2(),lineSegments[lineSeg].panels[i].getY2());
activeLineDrawing.fillStyle = 'lightgrey';
activeLineDrawing.strokeStyle = 'lightgrey';
activeLineDrawing.stroke();
activeLineDrawing.closePath();

Stephen Mangopoulos 14 авг. 2018, в 19:49

Источник

0

Вы пробовали с дугой, как я упоминал в своем ответе?
Helder Sepulveda 22 авг. 2018, в 15:01
0

Эй, извини! спасибо за ответ, он мне очень помог, но все еще немного борется здесь. это дает мне правильную форму, предполагая горизонтальную линию между точками, но так как мои начальные и конечные точки находятся в переменном месте, так что это может быть под любым углом, и нарисованные ворота останутся на месте и будут выглядеть странно. Я пытаюсь поиграть с функцией поворота, но это борьба.
Stephen Mangopoulos 23 авг. 2018, в 18:34
0

Я внес некоторые изменения в свой ответ ... переведите код в рабочее состояние и начертите диагональное открытие двери ... Вам просто нужно поиграть с начальными и конечными углами
Helder Sepulveda 23 авг. 2018, в 20:47
0

Если у вас есть более сложные сценарии, создайте правильный фрагмент, воспроизводящий вашу проблему.
Helder Sepulveda 23 авг. 2018, в 20:55
0

Я думаю, что последняя версия сделала это для вас ...
Helder Sepulveda 24 авг. 2018, в 13:56
0

Привет Спасибо, на самом деле я еще не пробовал, но я посмотрел на ваш ответ, и он имел логический смысл для меня, поэтому я думаю, что это сработает, я опубликую его позже, чтобы поделиться рабочим решением. Спасибо!
Stephen Mangopoulos 24 авг. 2018, в 22:04

Показать ещё 4 комментария

Теги:

javascript

canvas

html5-canvas

1 ответ

Ещё вопросы

Вы пробовали с дугой, как я упоминал в своем ответе?
Эй, извини! спасибо за ответ, он мне очень помог, но все еще немного борется здесь. это дает мне правильную форму, предполагая горизонтальную линию между точками, но так как мои начальные и конечные точки находятся в переменном месте, так что это может быть под любым углом, и нарисованные ворота останутся на месте и будут выглядеть странно. Я пытаюсь поиграть с функцией поворота, но это борьба.
Я внес некоторые изменения в свой ответ ... переведите код в рабочее состояние и начертите диагональное открытие двери ... Вам просто нужно поиграть с начальными и конечными углами
Если у вас есть более сложные сценарии, создайте правильный фрагмент, воспроизводящий вашу проблему.
Я думаю, что последняя версия сделала это для вас ...
Привет Спасибо, на самом деле я еще не пробовал, но я посмотрел на ваш ответ, и он имел логический смысл для меня, поэтому я думаю, что это сработает, я опубликую его позже, чтобы поделиться рабочим решением. Спасибо!

Helder Sepulveda · Accepted Answer · 2018-08-14T17-30-00.000Z

Попробуйте с обычной дугой, вот пример кода

function drawDoor(ctx, color, sx, sy, ex, ey, offset) {
  var mx = (sx + (sx + ex) / 2) /2
  var my = (sy + (sy + ey) / 2) /2
  var iniAng = Math.atan2(ey-sy, ex-sx)/Math.PI - offset;
  var endAng = (iniAng + offset);
  
  ctx.beginPath();
  ctx.moveTo(sx, sy);  
  ctx.strokeStyle = color;
  ctx.lineWidth=3;
  ctx.lineTo(mx, my);  
  ctx.arc(mx, my, 45, iniAng * Math.PI, endAng * Math.PI, offset<0);
  ctx.lineTo(ex, ey);
  ctx.stroke();
  ctx.closePath();
}

var canvas = document.getElementById("canvas");
var activeLineDrawing = canvas.getContext("2d");


// Door opening to the left
drawDoor(activeLineDrawing, "black", 180, 60, 270, 60, 0.5);

// Door opening to the right
drawDoor(activeLineDrawing, "red", 200, 100, 290, 100, -0.5);

// Diagonal door opening right
drawDoor(activeLineDrawing, "blue", 20, 20, 75, 80, -0.5);

// Diagonal door opening left
drawDoor(activeLineDrawing, "green", 50, 30, 140, 90, 0.5);

// Closet doors double opening
drawDoor(activeLineDrawing, "cyan", 145, 30, 145, 90, 0.25);
drawDoor(activeLineDrawing, "cyan", 145, 150, 145, 90, -0.25);

<canvas id="canvas" width="300" height="150"></canvas>

Моя рекомендация потратила некоторое время на чтение и понимание математики за тем, что я здесь делаю, то же самое можно применить и во многих других местах.