1

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

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

我试图在 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 上的文档不是很冗长。谢谢！

4

1 回答 1

0

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

function AddText() {
   var text = new Kinetic.Text({
   ...
   });
  layer.add(text);
}
于 2012-12-05T21:34:25.480 回答