我是 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 上的文档不是很详细。 谢谢!
最佳答案
您需要在函数外部创建图层,然后在函数中只需将文本添加到图层中...
function AddText() {
var text = new Kinetic.Text({
...
});
layer.add(text);
}
关于javascript - Kineticjs 将元素添加到舞台,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13706470/