同一个kineticjs模型的多个视图/渲染

Question

我正在构建一个图形实用程序，它显示一个包含大量数据的相当大的图形。 我希望能够支持的一件事是在我的应用程序的不同面板中同时拥有多个数据视图。

我画了一张照片试图证明我的意思。假设我使用动力学在背景中构建了渐变图像。

我希望能够同时抓住显示红色部分和绿色部分的部分，而无需重建整个图像。

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);

在我将我的图层添加到stage1时，一切都很好，但是一旦我尝试将它们添加到stage2，它就会崩溃。我正在筛选来源，但我看不到任何强迫数据对于舞台来说是独一无二的。这可能吗？或者我必须复制我的所有形状？

Answer 1

KineticJS设计无法将节点添加到多个父节点中。每个Layer都有<canvas>元素。据我所知，不可能将DOM元素插入文档两次。