HTML Canvas - рисовать изогнутые стрелки - PullRequest
Новая
       12

HTML Canvas - рисовать изогнутые стрелки

9 голосов
/ 05 июля 2011

Я пытаюсь нарисовать изогнутые стрелки в HTML-холсте. У меня нет проблем, чтобы нарисовать изогнутую линию, но я не знаю, как поставить > в конце линии (направление). 

ctx.beginPath();
  ctx.fillStyle = "rgba(55, 217, 56,"+ opacity +")";
  ctx.moveTo(this.fromX,this.fromY);
  ctx.quadraticCurveTo(this.controlX, this.controlY, this.toX, this.toY);
ctx.stroke();

Моя идея - взять небольшую часть линии в конце и нарисовать треугольник. Как я могу получить координату точки на линии?

Ниже изображение для лучшего понимания.

Curve with arrow

1 Ответ

17 голосов
/ 05 июля 2011

Поскольку вы используете квадратичную кривую, вы знаете две точки, которые образуют линию, которая указывает в «направлении» вашей стрелки:

enter image description here

Итак, брось капельку триггера, и у тебя есть решение. Вот обобщенная функция, которая сделает это за вас:

http://jsfiddle.net/SguzM/

function drawArrowhead(locx, locy, angle, sizex, sizey) {
    var hx = sizex / 2;
    var hy = sizey / 2;

    ctx.translate((locx ), (locy));
    ctx.rotate(angle);
    ctx.translate(-hx,-hy);

    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(0,1*sizey);    
    ctx.lineTo(1*sizex,1*hy);
    ctx.closePath();
    ctx.fill();

    ctx.translate(hx,hy);
    ctx.rotate(-angle);
    ctx.translate(-locx,-locy);
}        

// returns radians
function findAngle(sx, sy, ex, ey) {
    // make sx and sy at the zero point
    return Math.atan2((ey - sy), (ex - sx));
}
...