Easeljs绘制不同种类的箭头

Question

此应用程序是使用 Easeljs 制作的，适用于 HTML5 canvas。

我希望能够在棋盘上画出不同种类的箭头。我尝试插入箭头作为图像，然后使它们可拖动和调整大小，但这使这些图像非常难看。

举例说明：

要借鉴的领域

在场上绘制箭头

功能应该如下：

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

我怎样才能得到这个结果？

Answer 1

您可以使用图形 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;

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