将新的笔划颜色注入到形状中

Injecting a new stroke color into a shape

本文关键字：注入 颜色      更新时间：2023-09-26

我有一个绘图画布（基于EaselJS CurveTo示例），在mouseup上时，我想为渲染到画布的形状注入一种新的颜色。我也希望不使用过滤器。

垃圾箱：https://jsbin.com/qejesuvovu/1/edit?html，输出

我曾经直接将自定义填充/笔划注入到形状图形中，但在后来的EaselJS版本中，这已经停止了。

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

使用单笔颜色动态更改形状颜色的推荐方法是什么？

更新：

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

垃圾箱：https://jsbin.com/gorasizuho/edit?html，输出

在0.7.0版本中，图形被重新设计为使用"命令"。用于绘图的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-每个命令都有单独的文档：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/

相关文章：