Несколько видов/рендерингов одной и той же модели 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 в документ.