Lanceljs добавить растровое изображение, чтобы поставить несколько раз в разных местах

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

Пара вещей здесь. Вам нужно создать новый экземпляр кнопки внутри цикла, в противном случае вы просто перемещаете исходный экземпляр кнопки на каждой итерации. В этом примере я немного упростил все, используя фигуру, но вы можете легко сделать то же самое с вашим растровым изображением.

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

что должно немного упростить ваш код.