캔버스 (Kinetic.JS) - 복제 된 그룹이 나타나지 않습니까?

Question

나는 키네틱과 놀고있어 왜 내가 복제하는 그룹이 나타나지 않는지 알 수가 없어.

바이올린 : 나는 모양에게 문제를 복제 할 수 없습니다 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})); 

UPDATE는 - 그것은 깊은 사본을하지 않는 그룹을 복제 보인다. 이것은 그룹에 로그인하는 콘솔 (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; 
}