我刚开始使用 easeljs 库。我创建了一个带舞台的 Canvas ,它可以正常工作。
我想添加位图作为按钮并将它们并排添加到舞台底部。
我试过以下方法,但它会将位图放在彼此的顶部。
var button = new createjs.Bitmap(queue.getResult("largebrick"));
var contentWidth = document.getElementById("content").offsetWidth;
var contentHeight = document.getElementById("content").offsetHeight;
var container = new createjs.Container();
stage.addChild(container);
stage.enableMouseOver(10);
for(var i = 0; i <10; i++){
button.x = 0 + button.getBounds().width * i;
button.y = contentHeight - button.getBounds().height;
button.addEventListener("mouseover", function() { document.body.style.cursor = 'pointer'; });
button.addEventListener("mouseout", function() { document.body.style.cursor = 'default'; });
button.addEventListener("click", function(event) {addBricks(button); });
container.addChild(button);
}
我希望你们中的一些人能提供帮助。
最佳答案
这里有几件事。您需要在循环内创建按钮的新实例,否则您只是在每次迭代时移动按钮的原始实例。在 this example ,我通过使用一个形状简化了一切,但你可以很容易地用你的位图做同样的事情。
var xPos = 0;
for(var i = 0; i < 10; i++){
var button = new createjs.Bitmap(queue.getResult("largebrick"));
button.cursor = "pointer";
button.x = xPos;
button.y = contentHeight - 50;
xPos += 60;
container.addChild(button);
}
此外,createjs 支持像这样将游标定义为显示对象的属性
button.cursor = "pointer";
这应该会稍微简化您的代码。
关于javascript - easeljs 添加位图以在不同位置多次上演,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20381817/