javascript - 将新的描边颜色注入(inject)到形状中

Question

我有一个绘图 Canvas (基于 EaselJS CurveTo example )，当使用 mouseup 时，我想将新颜色注入(inject)到渲染到 Canvas 的形状中。我也想在不使用过滤器的情况下完成此操作。

BIN:https://jsbin.com/qejesuvovu/1/edit?html,output

我曾经直接将自定义填充/描边注入(inject)到形状图形中，但在 EaselJS 的更高版本中，这已停止工作。

marker.graphics._dirty = true;
marker.graphics._fill = new createjs.Graphics.Fill('blue');
marker.graphics._stroke = new createjs.Graphics.Stroke('blue');

使用单一描边颜色即时更改形状颜色的推荐方法是什么？

更新:

进一步研究后发现，我需要能够保持克隆形状的能力，并保留独立更改颜色的功能。

BIN:https://jsbin.com/gorasizuho/edit?html,output

Answer 1

在版本 0.7.0 中，图形被重新架构为使用“命令”。绘图 API 没有什么不同(除了删除旧的 appendInstruction API)，但是您可以随时修改单个命令的属性，并且它们将在舞台更新时反射(reflect)出来。

var shape = new createjs.Shape();
shape.graphics.setStrokeStyle(3);
var strokeCommand = shape.graphics.beginStroke("#f00").command;
shape.graphics.drawRect(0,0,100,100);

您可以修改任何命令的属性:

strokeCommand.style = "#00f";

您可以在图形文档中查看命令的完整列表。 http://createjs.com/docs/easeljs/classes/Graphics.html#property_command - 每个命令都有单独的文档:http://createjs.com/docs/easeljs/classes/Graphics.Stroke.html

以下是使用命令修改笔画虚线偏移和绘制矩形坐标的示例:http://jsfiddle.net/lannymcnie/gg8sv4cq/

您可以在这里阅读更多信息:http://blog.createjs.com/new-command-approach-to-easeljs-graphics/