Question

我使用以下代码绘制带箭头的线条。我的问题是我希望线条虚线而不是箭头顶部：

function canvas_arrow_alternate2(context, fromx, fromy, tox, toy){
    var headlen = 12;   // length of head in pixels
    var angle = Math.atan2(toy-fromy,tox-fromx);

    context.setLineDash([10]);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.setLineDash([0]);
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
}

现在输出是一个没有虚线的箭头。问题是“setLineDash”的改变。我怎么能说那个

context.moveTo(fromx, fromy);
context.lineTo(tox, toy);

使用

context.setLineDash([10]);

以后代码没有？

由于

Answer 1

您无法定义具有该准确度的路径：当您填充或描边时，当前设置（strokeStyle，fillStyle，fillText / strokeText立即函数的字体，lineDash，globalAlpha ...）将用于绘制所有自上次beginPath（）以来构建的子路径。
因此，例如，您无法构建一个黄色 - 红色 - 蓝色......线，使用几个lineTo并在strokeStyle中更改，然后立即执行stroke（）：它将使用您设置的最后一种颜色绘制。 / p>

所以在你的情况下，你必须通过两次传递你的箭头：下面的（未经测试的）代码有望帮助你找到一种方法：

function canvas_arrow_alternate2(context, fromx, fromy, tox, toy, strokeStyle){
    var headlen = 12;   // length of head in pixels
    var angle = Math.atan2(toy-fromy,tox-fromx);
    context.save();    
    context.strokeStyle=strokeStyle || '#000'; // defaults to black
    // dashed part
    context.beginPath();
    context.setLineDash([10]);
    context.moveTo(fromx, fromy);
    context.lineTo(tox, toy);
    context.stroke();
    // second part -non dashed-
    context.beginPath();
    context.setLineDash([0]);
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6));
    context.moveTo(tox, toy);
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6));
    context.stroke();
    // 
    context.restore();          // this will, in fact, restore strokeStyle
}
// notice you can get rid of save/restore if all your drawing methods sets the color before drawing.

确保（也许你这样做）使用beginPath（）开始......好吧...每个新路径，否则所有绘制命令都会堆积起来，并且每个笔画（）或fill（）都会执行，导致减速。

画布用箭头绘制虚线

1 个答案: