Injecting a new stroke color into a shape

问题

I have a drawing canvas (based on the EaselJS CurveTo example) and when on mouseup I'd like to inject a new color into the shape being rendered to the canvas. I'd also like to do it without using a filter.

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

I used to directly injecting a custom fill/stroke into the shape graphics, but in later versions of EaselJS this has stopped working.

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

What is the recommended way of changing the color of a shape with a single stroke color on the fly?

UPDATE:

After looking into this further it turns out I need to be able to maintain the ability clone a shape and also preserve functionality for changing the color independently.

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

回答1:

In version 0.7.0, Graphics were rearchitected to use "commands". The API for drawing is no different (except for the removal of the old appendInstruction API), however you can modify the properties of individual commands any time, and they will be reflected when the stage is updated.

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

You can modify attributes of any command:

strokeCommand.style = "#00f";

You can see a full list of commands in the Graphics docs. http://createjs.com/docs/easeljs/classes/Graphics.html#property_command - each command has individual documentation: http://createjs.com/docs/easeljs/classes/Graphics.Stroke.html

Here is an example using commands to modify both stroke-dash offset and drawRect coordinates: http://jsfiddle.net/lannymcnie/gg8sv4cq/

You can read more here: http://blog.createjs.com/new-command-approach-to-easeljs-graphics/

来源：https://stackoverflow.com/questions/33534887/injecting-a-new-stroke-color-into-a-shape