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;

直线绘制并旋转它是为线条添加效果的最简单方法。我发布的演示像您的示例一样绘制了一种正弦波。那里还有一些魔法可以使它的长度合适，等等。