在复杂结构中使用缓存

Question

我正在使用easeljs来构建某种结构。 在该结构内部，有许多容器和形状。

我遇到了一个问题，当用户将鼠标悬停在某个元素上时，我需要更改该元素的颜色。我设法做到了，但是在绘制颜色并返回到其原始颜色之前有相当长的延迟，因为舞台会自行重绘。

我看到我可以使用缓存来达到此目的，所以我按照文档中的示例进行操作，如下所示： myShape.cache(150, 150, 100, 100, 1);然而什么也没有发生，我也看不到形状。 我不得不说，该形状位于添加到舞台上的容器内。

相关代码如下：

var g = curShape.graphics.clone().clear();
                   
                        g.beginFill("#2aa4eb");
                        g.drawRoundRect(0, 0, curShape.width, curShape.height, 1.5);
                        //g.drawRect(0, 0, curShape.width + 2, curShape.height + 2);
                        g.endFill();
                        g.endStroke();
                        var newShape= new createjs.Shape(g);
                        newShape.cache(150, 150, 100, 100, 2);

如有任何帮助，我们将不胜感激

Answer 1

您在 x:150 和 y:150 处缓存，但在 0,0 处绘制形状。如果您的形状小于 150x150，那么它将不会缓存任何内容。将缓存更改为 0,0，应该没问题。

此外，您没有向drawRoundRect调用提供第五个参数（圆角半径），这将使其失败。这是一个带有代码修改版本的快速示例。

http://jsfiddle.net/LNXVg/

var stage = new createjs.Stage("canvas");

var g = new createjs.Graphics();

g.beginFill("#2aa4eb");
g.drawRoundRect(0, 0, 300, 200, 5);
var newShape = new createjs.Shape(g);
//newShape.cache(150, 150, 100, 100, 2);
newShape.cache(0, 0, 100, 100, 2);

stage.addChild(newShape);
stage.update();