html - Canvas (Kinetic.JS) - 克隆组没有出现？

Question

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

fiddle :http://jsfiddle.net/DgwLd/3/

我可以毫无问题地克隆形状 - 只是没有出现的组。该文档确认可以克隆组，所以我不确定这里发生了什么。这是来自 Fiddle 的代码:

//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() 方法存在于任何一般节点(它不是专门用于容器)时，此实现是正确的).

不过，看起来确实应该有类似 .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;
}