HTML画布 - 绘制弯曲的箭头 [英] HTML Canvas - draw curved arrows

问题描述

我想在一个html画布上绘制弯曲的箭头，我没有问题，画一条曲线（1），但我不知道如何把>在行的末端（方向） 。

（1）

  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（）; 
  

我的想法是在最后一行的一小部分，并画一个三角形。
我如何得到一个点的坐标在行？

  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）; 
} 
 
 //返回弧度
函数findAngle（sx，sy，ex，ey）{
 //使sx和sy在零点
 return Math.atan2（（ey-sy），（ex-sx））; 
} 
  

i'm trying to draw curved arrows in a html canvas, i have no problem to draw a curved line (1) but i don't know how to put the ">" at the end of the line (direction).

(1)

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();

my idea is taking a small part of the line at the end and draw a triangle. How can i get the coordinate of a point in the line ?

http://i.stack.imgur.com/1qEQ9.png (picture for better understanding)

Sorry for my english and thanks in advance !

解决方案

Since you're using a quadratic curve, you know two points that make a line that points in the "direction" of your arrow head:

So throw down a smidge of trig and you have yourself a solution. Here's a generalized function that will do it for you:

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));
}

这篇关于HTML画布 - 绘制弯曲的箭头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！