画架将位图添加到不同位置的多次舞台

Question

我刚开始使用easeljs 库。我创建了一个带舞台的画布，它可以工作。

我想将位图添加为按钮，并将它们并排添加到舞台底部。

我尝试了以下方法，但它会将位图放在彼此的顶部。

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);

        }

我希望你们中的一些人能提供帮助。

Answer 1

这里有几件事。您需要在循环内创建按钮的新实例，否则您只是在每次迭代时移动按钮的原始实例。在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";

这应该会稍微简化您的代码。