Question

在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。

Answer 1

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

Answer 2

Konva中的任何节点只能有一个父节点。您不能将形状添加到其他容器中。如果您这样做：

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

然后将rect从layer1中删除并添加到layer2中。

因此，您必须创建第二个矩形。如果要具有相同的属性，则可以克隆节点：

layer1.add(rect);

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

如何在两个画布中添加konva形状？

2 个答案: