问题描述
我想在一个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:
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画布 - 绘制弯曲的箭头的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!