在canvas中绘制箭头

canvas中没有提供绘制箭头的函数,需要自己手动绘制,幸好箭头并不复杂,简单来说箭头由三条线段组成,如下图所示,线段AB、BC和BD,关键在于在给定端点A和B的坐标情况下,如何计算点C和D的坐标

在canvas中绘制箭头

 这里有两个思路可供参考,如下

思路一,利用线段

在canvas中绘制箭头

 

首先,在线段AB上确定一个点P,接着经过P点画一条直线与AB垂直,最后在直线P点两端确定C和D点。

确定P点坐标,利用三角形相似得,

在canvas中绘制箭头

 

计算得P的横坐标xp = xb - (xb-xa)*|BP|/|BA|,同样纵坐标yp = yb - (yb-ya)*|BP|/|BA|。

 确定直线CD,直线CD垂直于AB,所以:CD斜率*AB斜率=-1,CD斜率k=(xa-xb) / (yb-ya)。

点p经过直线CD,将P点坐标带入斜截式直线方程y=kx+b,得b=yp - k*xp。

确定C点和D点,令线段|CP|的长度为d,根据距离公式计算C和D的坐标即可,但公式很复杂,没推导出来,所以换一个思路:在直线CD上确定一个Q点(Q点横坐标为xa),则C点的坐标与P点坐标计算类似。

此思路需要单独处理直线平行于坐标轴的情况,代码如下:

    var x3 = 0, y3 = 0;
    var x4 = 0, y4 = 0;
    var d1 = 20;  // BP的长度
    var d3 = d1/2; // CP的长度
    var d2 = Distance(x1, y1, x2, y2); // 求距离
    var x5 = (x2 - d1 * (x2 - x1) / d2); // P点(x5,y5)
    var y5 = (y2 - d1 * (y2 - y1) / d2);
    if (x1 == x2) {
        x3 = x5 - d3;
        x4 = x5 + d3;
        y3 = y5;
        y4 = y5;
    } else if (y1 == y2) {
        x3 = x5;
        x4 = x5;
        y3 = y5 - d3;
        y4 = y5 + d3;
    } else {
        var k = (x1 - x2) / (y2 - y1);
        var b = y5 - k * x5;
        var x6 = x1;  // Q点(x6,y6)
        var y6 = k * x6 + b;
        var d4 = Distance(x5, y5, x6, y6);
        x3 = (x5 - d3 * (x5 - x6) / d4);    
        y3 = (y5 - d3 * (y5 - y6) / d4);    
        x4 = (x5 + d3 * (x5 - x6) / d4);
        y4 = (y5 + d3 * (y5 - y6) / d4);    
    }

思路二,利用夹角

在canvas中绘制箭头

线段BC的长度记为L,即|BC|=|BD|=L,记∠ABD为θ,则点D的坐标计算如下:

在canvas中绘制箭头

同理,C的坐标xc = xb - L × cos(α-θ),yc = yd - L × sin(α-θ)。

其中tan(α) = (yb - ya) / (xb - xa),所以α = Math.atan((yb - ya) / (xb - xa)),由于分母有可能是0,所以改用Math.atan2(yb - ya, xb - xa)计算。atan传入一个参数,atan2传入2个参数:分子和分母。

代码如下:

    var l = 20; // 
    var a = Math.atan2((y2 - y1), (x2 - x1));

    var x3 = x2 - l * Math.cos(a + 30 * Math.PI/180); // θ=30
    var y3 = y2 - l * Math.sin(a + 30 * Math.PI/180);
    var x4 = x2 - l * Math.cos(a - 30 * Math.PI/180);
    var y4 = y2 - l * Math.sin(a - 30 * Math.PI/180);

最后绘图

在canvas中绘制箭头

    context_.beginPath();
    context_.moveTo(x1, y1);
    context_.lineTo(x2, y2);
    context_.moveTo(x3, y3);
    context_.lineTo(x2, y2);
    context_.lineTo(x4, y4);
    context_.lineWidth = 5;
    context_.strokeStyle = "#000000";
    context_.stroke();

箭头如下:

 在canvas中绘制箭头

错误绘图方式:

在canvas中绘制箭头

 

在canvas中绘制箭头

 箭头顶端多一个歪斜的尖,不美观。

 

 

上一篇:贪心模型:环形纸牌分配


下一篇:2021.牛客暑假多校 第三场 补题