HTML Canvas - 绘制曲线箭头
我正在尝试在 html 画布中绘制弯曲的箭头.我画一条曲线没有问题,但我不知道如何将 >
放在线的末尾(方向).
I'm trying to draw curved arrows in a html canvas. I have no problem to draw a curved line but I don't know how to put the >
at the end of the line (direction).
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?
下面是图片以便更好地理解.
Below is the image for better understanding.
推荐答案
由于您使用的是二次曲线,因此您知道两个点组成一条指向箭头方向"的直线:
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));
}
相关文章