Javascript 画一条虚线箭头线

在KineticJS中，如何绘制带有箭头的虚线

例如：

> > > > > >

我知道你要画一条虚线：

  var line = new Kinetic.Line({
            points: [fromx, fromy, tox, toy]
            stroke: 'red',
            dashArray: [10, 10]
        });

---

如何将破折号更改为从一点指向另一点的箭头形式？使用填充背景不起作用，因为线条可以在任何方向上绘制。

绘制自定义的运动。包含沿线条路径放置的多个箭头的形状：

var dx=p1.x-p0.x;
var dy=p1.y-p0.y;
var angle=Math.atan2(dy,dx);
var length=Math.sqrt(dx*dx+dy*dy);

var cos=Math.cos(angle);
var sin=Math.sin(angle);

// drawImage each arrow along the line at interval spaceLength
for(var n=spaceLength;n<length;n+=spaceLength){   
    var ax=p0.x+n*cos;
    var ay=p0.y+n*sin;
    ctx.save();
    ctx.translate(ax,ay-5);
    ctx.rotate(angle);
    ctx.drawImage(arrow,0,0);
    ctx.restore();
}

• 创建包含箭头图形的临时画布

• 创建一个动能形状，沿直线以所需的间隔和与直线相同的角度绘制临时画布箭头

以下是计算直线角度和长度的数学公式：

var dx=p1.x-p0.x;
var dy=p1.y-p0.y;
var angle=Math.atan2(dy,dx);
var length=Math.sqrt(dx*dx+dy*dy);

var cos=Math.cos(angle);
var sin=Math.sin(angle);

// drawImage each arrow along the line at interval spaceLength
for(var n=spaceLength;n<length;n+=spaceLength){   
    var ax=p0.x+n*cos;
    var ay=p0.y+n*sin;
    ctx.save();
    ctx.translate(ax,ay-5);
    ctx.rotate(angle);
    ctx.drawImage(arrow,0,0);
    ctx.restore();
}

下面是沿直线路径每隔一段时间重复绘制箭头的代码：

var dx=p1.x-p0.x;
var dy=p1.y-p0.y;
var angle=Math.atan2(dy,dx);
var length=Math.sqrt(dx*dx+dy*dy);

var cos=Math.cos(angle);
var sin=Math.sin(angle);

// drawImage each arrow along the line at interval spaceLength
for(var n=spaceLength;n<length;n+=spaceLength){   
    var ax=p0.x+n*cos;
    var ay=p0.y+n*sin;
    ctx.save();
    ctx.translate(ax,ay-5);
    ctx.rotate(angle);
    ctx.drawImage(arrow,0,0);
    ctx.restore();
}

var cos=Math.cos（角度）；
var sin=数学sin（角度）；
//以间隔空格长度沿直线绘制每个箭头的图像
对于（var n=空格长度；n