Easeljs绘制不同种类的箭头

Question

此应用程序由Easeljs制作，可在HTML5画布中使用。

我希望能够在棋盘上绘制不同类型的箭头。我尝试将箭头插入图像然后使它们可拖动并可调整大小，但这使得这些图像非常难看。

举例说明：

要绘制的字段

在字段上绘制的箭头

功能应如下：

• 点击按钮
• 画一条线
• 在mouseup事件中：将行转换为相应的箭头
• 箭头应该可拖动并可调整大小

我如何得到这个结果？

Answer 1

您可以使用Graphics API轻松绘制箭头。我花了大约20分钟制作了这个演示：

• http://jsfiddle.net/lannymcnie/ukjb1g2g/2/
• http://jsfiddle.net/lannymcnie/ukjb1g2g/3/

代码：

var w = startX - endX;
var h = startY - endY;
var lineLength = Math.sqrt(w*w+h*h);

arrow.graphics.clear().setStrokeStyle(3).beginStroke("#000").moveTo(0,0);
// Logic to draw to the end. This is just a straight line
arrow.lineTo(lineLength-arrowHeadSize, 0);

arrow.graphics.beginFill("#000");
arrow.graphics.drawPolyStar(lineLength, 0, arrowHeadSize, 3);

// Rotate
arrow.rotation = Math.atan2(h, w) * 180/Math.PI;

直接绘制并旋转它是向线条添加效果的最简单方法。我发布的演示就像你的一个例子那样绘制了一种正弦波。有更多的魔法使它适合长度等等。