用easeljs复制对象答案

【问题标题】：duplicating objects with easeljs用easeljs复制对象
【发布时间】：2012-10-10 22:49:14
【问题描述】：

我一直在尝试使用easeljs 库重用元素时遇到问题。我是否使用 clone() 方法，我只能获取一个实例，然后像 onPress 这样的事件将停止对新元素起作用。

在多个容器上添加同一个对象会使该对象随处消失。我一直不得不寻找解决方法，弄乱我的代码并浪费资源。

提前感谢任何帮助或提示。

【问题讨论】：

【解决方案1】：

如果您使用 Shape's Graphics，您可能需要考虑将 true 作为参数传递。

var boxClone = box.clone(true);

来自 CreateJs 文档： http://www.createjs.com/Docs/EaselJS/classes/Shape.html#method_clone

clone ( recursive )

返回此 Shape 的克隆。某些特定于该实例的当前上下文的属性将恢复为其默认值（例如 .parent）。

参数：递归

如果为 true，此 Shape 的 Graphics 实例也将被克隆。如果为 false，则 Graphics 实例将与新的 Shape 共享。

【讨论】：

【解决方案2】：

这样的事情怎么样？不确定这是否是您所追求的，但是... 也许它会帮助某人。

var canvas, stage;

    function init() {
        canvas = document.getElementById("testCanvas");

        //check to see if we are running in a browser with touch support
        stage = new createjs.Stage(canvas);
        createjs.Ticker.setFPS(24);
        createjs.Ticker.addListener(window);

        var width = 50;
        var height = 50;
        var padding = 5;
        var box = new createjs.Shape();
        box.graphics.beginFill("#FF0099").drawRect(0, 0, width, width).endFill();

        var l = 25;
        var cols = 7;
        for(var i=0;i<l;i++) {
            var boxClone = box.clone();
            boxClone.x = (width+padding) * (i%cols);
            boxClone.y = (height+padding) * (i/cols|0);
            boxClone.index = i;
            boxClone.onClick = handleClick;
            stage.addChild(boxClone);
        }
    }

    function handleClick(event) {
        console.log(event.target);
    }

    function tick() {
        stage.update();
    }

【讨论】：