更改形状的笔触颜色 - EaselJS答案

【问题标题】：Change stroke color of shape - EaselJS更改形状的笔触颜色 - EaselJS
【发布时间】：2017-04-08 08:08:09
【问题描述】：

我想改变线条的描边颜色（点击时）：

var currentLine = new createjs.Shape();
currentLine.graphics.moveTo(startX, startY).setStrokeStyle(4).beginStroke(tempLineColor).lineTo(target.x, target.y).endStroke();

我尝试了此处提到的图形 (currentLine.graphics.command) 的“命令”属性：http://createjs.com/docs/easeljs/classes/Graphics.html

但它不起作用，因为它返回“未定义”。任何帮助将不胜感激。

小提琴：http://jsfiddle.net/86f7gz6b/19/

【问题讨论】：

它工作正常。你的参数可能有问题。看到这个饲料jsfiddle.net/86f7gz6b/1
@ShoaibKonnur 我的问题与“如何画线”无关 :) 我能够成功画线，但我想在鼠标点击时改变它的颜色。希望你现在能得到我的问题:)
在这种情况下，您必须使用鼠标交互createjs.com/tutorials/Mouse%20Interaction，并且您必须重新绘制同一条线。
我不能只更新线条的笔触颜色而不必重绘它吗？
它是画布，它不记得像 mspaint 这样的形状，所以我们重新绘制它们以改变颜色。摆弄你的工作和帖子。或者，您可以根据需要使用 SVG。

标签： javascript html5-canvas createjs easeljs

【解决方案1】：

您提供的小提琴使用了 2013 年的旧版 CreateJS，它不支持图形命令（命令是在 2014 年 12 月发布的 0.8.0 版中添加的）。我已经用最新的（0.8.2）更新了你的小提琴，但请注意 JSFiddle 也有 0.8.1（CreateJS 2015.05.21 的一部分），它也可以工作。

命令方式很简单，把最后一个graphics.command保存下来，以后再修改它的style值。

shape.graphics.setStrokeStyle(4);
var cmd = shape.graphics.beginStroke("red").command; // <- note the command
shape.graphics.moveTo(0,0).lineTo(100,100);
stage.update();
// Later
cmd.style = "blue";
stage.update();

你也可以链接指令，.command会返回最后一条指令命令：

// Gets the beginStroke command
var cmd = shape.graphics.setStrokeStyle(4).graphics.beginStroke("red").command;

为了使您的示例正常工作，我必须更改一件事：必须将初始 moveTo 命令放在 beginStroke 之后，因为开始描边或填充将重置路径命令，所以你的例子不起作用（EaselJS 必须有一个初始 moveTo 才能使单个 lineTo 工作。

这是一个更新的小提琴：http://jsfiddle.net/lannymcnie/86f7gz6b/21/

干杯，

【讨论】：

非常感谢 Lanny 指出错误。我在我的项目中使用了旧版本的easeljs（版本0.7.1），这导致了麻烦。我将它更新到 0.8.2，现在它工作正常 :)