javascript - 我在 Canvas 上的 EaselJS 位图在 Firefox 中正确呈现，但(有时)没有缩放并在 Chrome 中占据整个 Canvas ？

Question

为了证明这一点(我正在研究压缩得更多的 Fiddle)，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");