将新的笔触颜色注入形状 [英] Injecting a new stroke color into a shape

问题描述

我有一个绘图画布（基于EaselJS CurveTo示例），然后在 mouseup 上使用时，我想为渲染到画布上的形状注入新的颜色。我也想在不使用过滤器的情况下进行操作。

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

我以前直接注入自定义填充/描边到形状图形中，但是在更高版本的EaselJS中，此操作已停止。

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?

更新：

进一步研究之后，事实证明我需要保持能力克隆

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，输出

推荐答案

在版本0.7.0中，重新组织了Graphics以使用命令。用于绘制的API没什么不同（除了删除旧的 appendInstruction API之外），但是您可以随时修改单个命令的属性，并且它们会在

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";

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

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

以下是使用命令修改笔划划线偏移量和drawRect坐标的示例： http://jsfiddle.net/lannymcnie/gg8sv4cq/

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

您可以在此处了解更多信息： http：// blog.createjs.com/new-command-approach-to-easeljs-graphics/

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

这篇关于将新的笔触颜色注入形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！