javascript - Kineticjs 将元素添加到舞台

Question

我是 JS 和 KineticJS 的新手，想知道是否有人可以帮助我了解 Kinetic.Stage 节点的工作原理。我用过this tutorial作为起始位置 - 但希望能够通过单击按钮将对象(例如 new Kinetic.Text() 或 new Kinetic.Group())附加到现有阶段。

我想做的一个例子是在 Canvas 旁边有一个表单，允许用户输入文本，单击“开始”，然后让“他们输入的文本”出现在 Canvas 内。

我尝试在 document.ready 内和全局范围内声明“var stage”，认为我可以从函数内访问该阶段，例如:

function writeTextToStage(stage) {
     var text = new Kinetic.Text({
       x: 190,
       y: 15,
       text: 'Simple Text',
       fontSize: 30,
       fontFamily: 'Calibri',
       textFill: 'green'
     });
      var layer = new Kinetic.Layer();
      layer.add(text);
      stage.add(layer);
      stage.draw();
}

window.onload = function(){
    var stage = new Kinetic.Stage({
        container: "designer",
        width: 578,
        height: 520
    });
    var go = document.getElementById('go');
    go.addEventListener('mousedown', writeTextToCanvas(stage);
};

无论如何，如果“stage”对象是在另一个函数“initStage()”中声明的，是否可以在初始化后获取stage节点以便向其追加内容？我尝试通过 DOM 元素 $('kineticjs-content').children()[0] 访问它。

请帮忙。 Kineticjs.com 上的文档不是很详细。谢谢!

Answer 1

您需要在函数外部创建图层，然后在函数中只需将文本添加到图层中...

function AddText() {
   var text = new Kinetic.Text({
   ...
   });
  layer.add(text);
}