Мои растровые изображения MyelelJS на холсте правильно отображаются в Firefox, но (иногда) не масштабируются и занимают весь холст в Chrome?

Question

Итак, чтобы продемонстрировать это (я работаю над гораздо более сжатым скриптом), open this in chrome, и переместите Jay-Z с помощью клавиш со стрелками и поймайте около 4 - 5 (иногда больше!) Тортов.

Вы заметите, что существует огромный кекс на левой стороне экрана в настоящее время.

Я обновляю позиции тортов в своей функции handleTick и добавляю новые пирожные на временной интервал. Вот оба эти:

/*This function must exist after the Stage is initialized so I can keep popping cakes onto the canvas*/ 
function make_cake(){ 
    var path = queue.getItem("cake").src; 
    var cake = new createjs.Bitmap(path); 
    var current_cakeWidth = cake.image.width; 
    var current_cakeHeight = cake.image.height; 
    var desired_cakeWidth = 20; 
    var desired_cakeHeight = 20; 
    cake.x = 0; 
    cake.y = Math.floor((Math.random()*(stage.canvas.height-35))+1); //Random number between 1 and 10 
    cake.scaleX = desired_cakeWidth/current_cakeWidth; 
    cake.scaleY = desired_cakeHeight/current_cakeHeight; 
cake.rotation = 0; 
    cake_tray.push(cake); 
    stage.addChild(cake); 
} 

И setInterval часть:

setInterval(function(){ 
    if (game_on == true){ 
     if (cake_tray.length < 5){ 
      make_cake(); 
     } 
    } 
    else{ 
     ; 
    } 
},500); 

stage.update также вызывается из handleTick.

Here is the entire JS file

Спасибо за глядя на это. Обратите внимание еще раз, что это происходит только в Chrome, я не видел, чтобы это происходило в Firefox. В настоящее время это не касается других браузеров.

Answer 1

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

// This will give you an actual image reference 
var path = queue.getResult("cake");