使用 createjs 绘制虚线曲线答案

【问题标题】：Draw a dashed curved with createjs使用 createjs 绘制虚线曲线
【发布时间】：2015-02-22 18:19:43
【问题描述】：

我的 javascript 项目有问题。类似于绘图工具的东西。我想画一条虚曲线。

我成功地画了一条这样的虚线：

jsfiddle.net/lannymcnie/uQpdA/1/
还成功绘制了二次曲线。

但无法绘制虚线二次曲线。我尝试了很多东西，也尝试了 ctx.setLineDash()，但它把我所有的画布元素都变成了虚线，而不仅仅是曲线。

我使用easeljs作为js库在画布中进行绘制。

感谢您的帮助。

【问题讨论】：

标签： javascript canvas easeljs createjs

【解决方案1】：

LineDash 支持将是 EaselJS 的一个很好的补充。我建议您在 GitHub (http://github.com/CreateJS/EaselJS/issues) 中发布功能请求。我可能会自己要求它，因为它是一个合乎逻辑的添加（我什至不知道它存在，因此您引用了我之前的示例）。

这是一个快速实现。我创建了一个破折号方法，它在上下文中设置破折号样式。请注意，笔画实际上发生在指令列表的末尾（直到应用另一个笔画调用），因此您必须重新应用笔画才能开始绘制而没有破折号。

http://jsfiddle.net/lannymcnie/2L7vaeeh/1/

// Usage
var shape = new createjs.Shape().set({x:0.5,y:0.5});
shape.graphics.s("#f00").dash([10,5]).dr(10,10,100,100)
shape.graphics.s("#f00").dash().dr(20,20,100,100);

圣诞快乐！

【讨论】：

完美，谢谢和一个细节，我认为这仅适用于easeljs 0.8.0（当前版本），可能适用于下一个。
是的，@Hve 是正确的。自 2014 年 7 月起，它还将与 EaselJS NEXT（在 GitHub 中）一起使用。