как добавить форму конвы в два холста？

Question

В HMTL, если у меня есть элемент Rect konva. Я хочу добавить его к двум слоям конвы на двух этапах, но только второй этап имеет Rect?

мой код выглядит следующим образом:

      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width/2,
        height: height
      });
      var stage2 = new Konva.Stage({
        container: 'container2',
        width: width/2,
        height: height
      });

      var layer = new Konva.Layer();
      var layer2 = new Konva.Layer();

      var rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      });
      // add the shape to the layer
      layer.add(rect1);
      layer2.add(rect1);

      var rect2 = new Konva.Rect({
        x: 150,
        y: 40,
        width: 100,
        height: 50,
        fill: 'red',
        shadowBlur: 10,
        cornerRadius: 10
      });
      layer.add(rect2);
      layer2.add(rect2);

      // add the layer to the stage
      stage.add(layer);
      stage2.add(layer2);

Я ожидаю этап и этап2для обоих есть rect1 & rect2, но фактический результат - только stage2 имеет rect & rect2.

Answer 1

Любой узел в Konva может иметь только ОДНОГО родителя. Вы не можете добавить форму в разные контейнеры. Если вы сделаете это:

layer1.add(rect);
layer2.add(rect);

Тогда rect будет удален из layer1 и добавлен в layer2.

Таким образом, вы должны создать второй прямоугольник. Если вы хотите иметь те же свойства, вы можете клонировать узел:

layer1.add(rect);

const rect2 = rect.clone();
layer2.add(rect2);

Answer 2

Стадия находится на самом верхнем уровне в иерархии элементов Konva. Это должно быть объявлено только один раз. Если вы хотите иметь несколько элементов, используйте разные слои и добавьте их в один этап. И добавить разные ректы на разных слоях. Используя разные слои, вы можете изолировать канавки и манипулировать ими по своему желанию.