将新的描边颜色注入形状
Injecting a new stroke color into a shape
我有一幅画 canvas(基于 EaselJS CurveTo example),在 mouseup
上时,我想在呈现给 canvas。我也想在不使用过滤器的情况下进行。
BIN:https://jsbin.com/qejesuvovu/1/edit?html,output
我曾经直接将自定义 fill/stroke 注入到形状图形中,但在 EaselJS 的更高版本中,这已停止工作。
marker.graphics._dirty = true;
marker.graphics._fill = new createjs.Graphics.Fill('blue');
marker.graphics._stroke = new createjs.Graphics.Stroke('blue');
使用单笔划颜色动态更改形状颜色的推荐方法是什么?
更新:
进一步研究后发现,我需要能够保持克隆形状的能力,同时保留独立更改颜色的功能。
在版本 0.7.0 中,图形被重新架构以使用 "commands"。绘图的 API 没有什么不同(除了删除旧的 appendInstruction
API),但是您可以随时修改各个命令的属性,它们会在舞台已更新。
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 - each command has individual documentation: http://createjs.com/docs/easeljs/classes/Graphics.Stroke.html
下面是一个使用命令修改笔划-划线偏移和 drawRect 坐标的示例:http://jsfiddle.net/lannymcnie/gg8sv4cq/
您可以在此处阅读更多内容:http://blog.createjs.com/new-command-approach-to-easeljs-graphics/
我有一幅画 canvas(基于 EaselJS CurveTo example),在 mouseup
上时,我想在呈现给 canvas。我也想在不使用过滤器的情况下进行。
BIN:https://jsbin.com/qejesuvovu/1/edit?html,output
我曾经直接将自定义 fill/stroke 注入到形状图形中,但在 EaselJS 的更高版本中,这已停止工作。
marker.graphics._dirty = true;
marker.graphics._fill = new createjs.Graphics.Fill('blue');
marker.graphics._stroke = new createjs.Graphics.Stroke('blue');
使用单笔划颜色动态更改形状颜色的推荐方法是什么?
更新:
进一步研究后发现,我需要能够保持克隆形状的能力,同时保留独立更改颜色的功能。
在版本 0.7.0 中,图形被重新架构以使用 "commands"。绘图的 API 没有什么不同(除了删除旧的 appendInstruction
API),但是您可以随时修改各个命令的属性,它们会在舞台已更新。
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 - each command has individual documentation: http://createjs.com/docs/easeljs/classes/Graphics.Stroke.html
下面是一个使用命令修改笔划-划线偏移和 drawRect 坐标的示例:http://jsfiddle.net/lannymcnie/gg8sv4cq/
您可以在此处阅读更多内容:http://blog.createjs.com/new-command-approach-to-easeljs-graphics/