画布（Kinetic.JS）-未出现克隆的组吗？

Question

我在玩Kinetic，似乎无法弄清楚为什么我要克隆的组不会出现。

小提琴： http ： //jsfiddle.net/DgwLd/3/

我可以克隆形状没有问题-只是没有出现组。 该文档确认可以克隆组，所以我不确定此处的内容。 这是小提琴的代码：

//group and original circle - appears fine
layer.add(new Kinetic.Group({id: 'group'}));
stage.get('#group')[0].add(new Kinetic.Circle({
    fill: 'orange',
    x: 200,
    y: 50,
    radius: 30
}));

//clone of group at different Y pos - doesn't appear
layer.add(stage.get('#group')[0].clone({y: 120}));

更新 -似乎克隆一个组不会产生深拷贝。 这可以通过控制台记录该组的console.log(stage.get('#group2')) ，您会看到其children集合为空）。 这是错误吗？ 不知道为什么您要克隆一个没有组成员的组。

有什么想法吗？ 提前致谢。

Answer 1

好像您自己弄清楚了一样-确实，进行组克隆或实际上对任何容器进行克隆都是执行浅表复制。

实际上，查看源代码可能比其他任何事情都提供更多信息：

clone: function(obj) {
    // instantiate new node
    var classType = this.shapeType || this.nodeType;
    var node = new Kinetic[classType](this.attrs);

    /*
     * copy over user listeners
     */
    for(var key in this.eventListeners) {
        var allListeners = this.eventListeners[key];
        for(var n = 0; n < allListeners.length; n++) {
            var listener = allListeners[n];
            /*
             * don't include kinetic namespaced listeners because
             *  these are generated by the constructors
             */
            if(listener.name.indexOf('kinetic') < 0) {
                // if listeners array doesn't exist, then create it
                if(!node.eventListeners[key]) {
                    node.eventListeners[key] = [];
                }
                node.eventListeners[key].push(listener);
            }
        }
    }

    // apply attr overrides
    node.setAttrs(obj);
    return node;
}

如您所见，它所做的就是用当前节点的属性实例化一个新节点，然后在事件侦听器上进行复制。 这可能是设计.clone() -通常，您希望采用阻力最小的路径，并且当您考虑到任何通用节点都存在.clone()方法时（这种方法并非专门针对容器），这种实现就可以了。

似乎确实应该为容器专门设置类似.deepclone()方法的东西。 也许像这样：

deepclone: function(obj) {
    var node = this.clone(obj);

    if (this.children) {
        for (var i = 0; i < this.children.length; i++) {
            node.add(this.children[i].clone();
        }
    }

    return node;
}