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

160

18 января 2019, 14:50

Рисовать еще одну кривую или квадратичную не получит т.к начальная точка этой кривой будет конечной точкой первой кривой..

function drawArcA(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var startA = 45;
var yAxis = 160;
var yOffset = 100;
context.moveTo(startA, yAxis);
context.bezierCurveTo(startA, yAxis - yOffset, finishA, yAxis - yOffset, finishA, yAxis);
context.lineWidth = 2;
context.strokeStyle = "#c15b8a";
context.stroke();};

html

 <div class="canvas">
    <canvas id="myCanvas" width="1000" height="500"></canvas>
</div>

Answer 1

Почему не получится? Сформировать ещё три кривые (или три отрезка прямых для треугольной стрелки), последняя кончается в той же точке, что исходная кривая. Пример на Delphi:

var
  P: array of TPoint;
  dx, dy, len : Double;
begin
  SetLength(P, 13);
  P[0] := Point(100, 100);
  P[1] := Point(200, 200);
  P[2] := Point(300, 200);
  P[3] := Point(400, 100);
  dx := P[2].X - P[3].X;
  dy := P[2].Y - P[3].Y;
  len := Math.Hypot(dx, dy);
  dx := dx / len;
  dy := dy / len;
  P[4].X := Round(P[3].X + 20 * dx * Cos(Pi/12) - 20 * dy * Sin(Pi/12));
  P[4].Y := Round(P[3].Y + 20 * dx * Sin(Pi/12) + 20 * dy * Cos(Pi/12));
  P[5] := P[4];
  P[6].X := Round(P[3].X + 40 * dx * Cos(Pi/6) - 40 * dy * Sin(Pi/6));
  P[6].Y := Round(P[3].Y + 40 * dx * Sin(Pi/6) + 40 * dy * Cos(Pi/6));
  P[7].X := Round(P[3].X + 30 * dx);
  P[7].Y := Round(P[3].Y + 30 * dy);
  P[8] := P[7];
  P[9].X := Round(P[3].X + 40 * dx * Cos(Pi/6) + 40 * dy * Sin(Pi/6));
  P[9].Y := Round(P[3].Y - 40 * dx * Sin(Pi/6) + 40 * dy * Cos(Pi/6));
  P[10].X := Round(P[3].X + 20 * dx * Cos(Pi/12) + 20 * dy * Sin(Pi/12));
  P[10].Y := Round(P[3].Y - 20 * dx * Sin(Pi/12) + 20 * dy * Cos(Pi/12));
  P[11] := P[10];
  P[12] := P[3];
  Canvas.PolyBezier(P);