[Konva.Node.create导致舞台停止工作

Question

我可以创建一个舞台并添加形状。但是，如果我使用Konva.Node.create命令，那么舞台将不再显示新添加的形状。

在下面的代码中，第一个文本为“ Hello World！”。将显示，但第二个文本（在Konva.Node.create之后）应显示“ Hello World 2！”。没有出现在舞台上。

此代码的工作提要是here。

任何帮助将不胜感激。谢谢

var stage = new Konva.Stage({
    container : "container",
    width : 400,
    height : 300
});

var layer = new Konva.Layer();
stage.add(layer);


var text = new Konva.Text({
  x: 10,
  y: 48,
  text:'Hello, World!',
  align: 'left',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green',
  draggable: true,
  name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();

Konva.Node.create(stage, "container");

var text2 = new Konva.Text({
  x: 40,
  y: 48,
  text:'Hello, World 2!',
  align: 'left',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green',
  draggable: true,
  name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();

Answer 1

Konva.Node.create会覆盖div container中的原始阶段并创建一个新副本。因此您的更改不可见。

可能您只需要删除该行。

Answer 2

有效！

var stage = new Konva.Stage({
    container : "container",
    width : 400,
    height : 300
});

var layer = new Konva.Layer();
stage.add(layer);

var text = new Konva.Text({
  x: 10,
  y: 48,
  text:'Hello, World!',
  align: 'left',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green',
  draggable: true,
  name: `text_${Date.now()}`
});
layer.add(text);
layer.draw();

var stage = Konva.Node.create(stage, "container");
var layer = stage.getLayers()[0];

var text2 = new Konva.Text({
  x: 40,
  y: 48,
  text:'Hello, World 2!',
  align: 'left',
  fontSize: 30,
  fontFamily: 'Calibri',
  fill: 'green',
  draggable: true,
  name: `text_${Date.now()}`
});
layer.add(text2);
layer.draw();