2

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。コレクションが空であることがわかります)。これはバグですか？構成要素なしでグループを複製したい理由がわかりません。

何かご意見は？前もって感謝します。

4

1 に答える 1

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;
}
于 2012-08-28T15:44:36.567 に答える