동일한 kineticjs 모델의 여러보기/렌더

Question

많은 데이터가 포함 된 다소 큰 그래프를 표시하는 그래프 유틸리티를 작성 중입니다. 내가 지원할 수있는 기능 중 하나는 응용 프로그램의 여러 패널에서 동시에 여러 데이터보기를 사용하는 것입니다.

저는 무슨 뜻인지 시험해보기 위해 그림을 그렸습니다. 나는 kinetic을 사용하여 백그라운드에서 그라디언트 된 이미지를 만들었다 고 가정합니다. 내가 잡을 수 있도록하고 싶습니다

빨간색에 설명 된 부분과 전체 이미지를 재 구축 할 필요없이, 동시에 녹색으로 설명 된 부분을 보여줍니다.

내가 스테이지 1 내 레이어를 추가 한 시점에서

var stage1 = new Kinetic.Stage({ 
    container: 'container1', 
    width: somewidth, 
    height: someheight 
}); 

var stage2 = new Kinetic.Stage({ 
    container: 'container1', 
    width: someotherwidth, 
    height: someotherheight 
}); 

var Layer1 = new Kinetic.Layer({ 
    y: someY, 
    scale: someScale 
}); 
// add stuff to first layer here... 

var Layer2 = new Kinetic.Layer({ 
    y: otherY, 
    scale: otherScale 
}); 
// add other stuff to second layer here... 

stage1.add(mapLayer); 
stage1.add(topLayer); 

stage2.add(mapLayer); 
stage2.add(topLayer); 

, 모든 괜찮지 만, 곧 내가 그들뿐만 아니라 스테이지 2에 추가하려고, 그것은 고장. 나는 출처를 들여다보고 있지만 무언가가 무대 고유의 데이터를 강요하는 것을 볼 수는 없다. 이것이 가능한가? 아니면 모든 도형을 복제해야합니까?

Answer 1

여러 부모에 노드를 추가하는 것은 KineticJS 디자인으로는 불가능합니다. 각 Layer은 <canvas> 요소를 갖습니다. DOM 요소를 문서에 두 번 삽입 할 수 없다는 것을 알고 있습니다.