在复杂结构中使用缓存

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 调用提供第 5 个参数（角半径），这将使其失败。这是一个包含修改后的代码版本的快速示例。

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();