Начертайте дъга с bezierCurveTo с относителни координати за точките на дъгата

Не съм сигурен, че питам правилно. Това е нещо за чертане на етажен план и в момента имам линии с подвижни точки на всеки край, така че платното е интерактивно. Искам да използвам крива, за да създам дъга на врата, която да бъде начертана след тази линия. Имам началната и крайната точка от съществуващия код, където да започна и завърша кривата, но контролите на дъгата са към конкретна координата, която не се изчислява, така че дъгата никога не отива там, където трябва.

Това е, което имам в момента, научих, че 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();

javascript canvas html5-canvas
person Stephen Mangopoulos    schedule 14.08.2018    source източник
comment
Опитахте ли с дъгата, както споменах в отговора си?   -  person Helder Sepulveda    schedule 22.08.2018
comment
Хей съжалявам! благодаря за отговора, помогна ми много, но все още се боря малко тук. това ми дава правилната форма, приемайки хоризонтална линия между точките, но тъй като моите начални точки и крайни точки са на променливо място, така че може да бъде под всякакъв ъгъл и начертаната врата ще остане неподвижна и ще изглежда странно. Опитвам се да си играя с функцията за завъртане, но това е трудно.   -  person Stephen Mangopoulos    schedule 23.08.2018
comment
Направих някои промени в отговора си... преместете кода, за да функционира и начертайте диагонален отвор на врата... Просто трябва да играете с началните крайни ъгли   -  person Helder Sepulveda    schedule 23.08.2018
comment
Ако имате по-сложни сценарии, моля, създайте подходящ фрагмент, възпроизвеждащ проблема ви.   -  person Helder Sepulveda    schedule 23.08.2018
comment
Предполагам, че последната версия го направи вместо вас...   -  person Helder Sepulveda    schedule 24.08.2018
comment
Здравейте, благодаря, всъщност още не съм пробвал, но погледнах отговора ви и за мен има логичен смисъл, така че мисля, че това ще проработи, след това ще публикувам отново, за да споделя работещото решение. Благодаря!   -  person Stephen Mangopoulos    schedule 25.08.2018

Отговори (1)


arrow_upward
1
arrow_downward

Опитайте с обикновена дъга, ето примерен код

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>

Моята препоръка отделете известно време за четене и разбиране на математиката зад това, което правя тук, същото може да се приложи на много други места.

person Helder Sepulveda    schedule 14.08.2018