Проведите дугу на холсте от двух точек x, y и центра x, y point

Question

Я пытаюсь нарисовать дугу из двух точек (X, Y шнуры).

Но я не могу понять, как сделать это так, что я могу указать начальный угол и конечный угол

Я получил центральную точку (Р2), радиус = г. Начальная точка (p1) и конечная точка (p3). , как показано ниже

И то, что я хочу сделать, это использовать дугу, чтобы нарисовать круглую линию, как показано ниже

Все, что я нашел на эту тему только пример, когда дуга черпать из 0 на что-то вроде 2 * Math.PI.

ctx.arc(100,75,50,0,2*Math.PI); 

Нравится это. Невозможно определить способ, которым я могу использовать p1 и p3 вместо этих чисел. Любой, кто может объяснить, как это работает, и, возможно, дать понять, как я могу это решить?

Answer 1

Метод arc() работает только с углами, точки должен быть преобразован в зависимости от их расположения и расстояния до центра (расстояние, представляющий радиус, должен быть одинаковым для обоих в данном случае).

signature of arc() является:

пустоты дуги (неограниченная двойной х,
                            неограниченного двойным, у
                            неограниченный двойной радиус,
                            неограниченный двойной StartAngle,
                            неограниченный двойной endAngle,
                            необязательный логический влево = ложь);

Вы можете найти два угла от центра Р2 Р1/Р3 простой тригонометрии:

var startAngle = Math.atan2(p1.y - p2.y, p1.x - p2.x), 
    endAngle = Math.atan2(p3.y - p2.y, p3.x - p2.x); 

Они теперь могут быть поданы в дуговым методом радиус при условии, известно:

ctx.arc(p2.x, p2.y, radius, startAngle, endAngle); 

Если радиус неизвестен, но, как известно, то же самое можно сделать:

var diffX = p1.x - p2.x, 
    diffY = p1.y - p2.y, 
    radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY)); 

Пример

var p2 = {x: 100 , y: 100 }, 
 
    p1 = {x: 111, y: 30.9}, 
 
    p3 = {x: 149.5 , y: 149.5}, 
 
    diffX = p1.x - p2.x, 
 
    diffY = p1.y - p2.y, 
 
    radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY)), 
 
    startAngle = Math.atan2(diffY, diffX), 
 
    endAngle = Math.atan2(p3.y - p2.y, p3.x - p2.x), 
 
    ctx = document.querySelector("canvas").getContext("2d"); 
 

 
// arc 
 
ctx.arc(p2.x, p2.y, radius, startAngle, endAngle, false); 
 
ctx.stroke(); 
 

 
// points/lines helpers: 
 
ctx.fillRect(p1.x - 2, p1.y - 2, 4, 4); 
 
ctx.fillRect(p2.x - 2, p2.y - 2, 4, 4); 
 
ctx.fillRect(p3.x - 2, p3.y - 2, 4, 4); 
 
ctx.beginPath(); 
 
ctx.moveTo(p1.x, p1.y); 
 
ctx.lineTo(p2.x, p2.x); 
 
ctx.lineTo(p3.x, p3.x); 
 
ctx.strokeStyle = "#999"; 
 
ctx.stroke();

<canvas height=180></canvas>

Результат WO/хелперов линии

var p2 = {x: 100 , y: 100 }, 
 
    p1 = {x: 111, y: 30.9}, 
 
    p3 = {x: 149.5 , y: 149.5}, 
 
    diffX = p1.x - p2.x, 
 
    diffY = p1.y - p2.y, 
 
    radius = Math.abs(Math.sqrt(diffX*diffX + diffY*diffY)), 
 
    startAngle = Math.atan2(diffY, diffX), 
 
    endAngle = Math.atan2(p3.y - p2.y, p3.x - p2.x), 
 
    ctx = document.querySelector("canvas").getContext("2d"); 
 

 
// arc 
 
ctx.arc(p2.x, p2.y, radius, startAngle, endAngle, false); 
 
ctx.stroke();

<canvas height=180></canvas>

Answer 2

ctx.arc(100,75,50,0,2*Math.PI); 

Здесь первые два аргумента - это координаты точки p2 x, y, а третий аргумент - радиус окружности r. Четвертый и пятый аргументы представляют собой начальный угол и конечный угол дуги.

пусть M21 будет наклон линии, соединяющей point1 (x1, y1) и 2. (х2, у2)

m21 = (у2-у1)/(х2-х1)

пусть M21 будет наклон линии, соединяющей point3 (x3, y3) и 2. (x2, y2)

M23 = (у2-y3)/(х2-х3)

ctx.arc(100, 75, 50, Math.atan(m21), Math.atan(m23), true) 

будет делать это.

Если точка2 является источником, то решение проще.

ctx.arc(100, 75, 50, Math.atan2(x1,y1), Math.atan2(x3,y3), true)