javascript - 如何在两个 Canvas 中添加konva形状？

在HMTL中，如果我有konva 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);

我希望stage和stage2都具有rect1和rect2，但是实际输出只有stage2具有rect和rect2。

最佳答案

舞台是Konva元素层次结构中的最高级别。应该只声明一次。如果要具有多个元素，请使用不同的层并将其添加到一个阶段。并在不同的图层上添加不同的矩形。通过使用不同的层，您可以隔离矩形并根据需要对其进行操作。

关于javascript - 如何在两个 Canvas 中添加konva形状？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58372142/