Easeljs 绘制不同种类的箭头

Posted 2023-03-05

【中文标题】Easeljs 绘制不同种类的箭头

【英文标题】：Easeljs draw different kinds of arrows

【发布时间】：2016-11-25 12:05:16

【问题描述】：

这个应用程序是用 Easeljs 制作的，可以在 html5 画布中工作。

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

举例说明：

要绘制的字段

在场地上绘制的箭头

功能应该如下：

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

我如何得到这个结果？

【问题讨论】：

EaselJS 包是否支持 SVG 图像？如果是这样，那可能是一个尝试的解决方案。 SVG 图像可以缩放和旋转，而不会像我假设您使用位图图像那样难看。

它只支持 SVG 作为图像源。您可以使用图形矢量格式，并从 Adob​​e Animate 中导出一些箭头类型。

【参考方案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;

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

【讨论】：

谢谢！我将尝试使用您的代码创建我需要的箭头。