Question

我将开始提出这个问题，说这是100％在Firefox（v21.0）中工作。出于某种原因，它无法在谷歌浏览器中工作（v27.0.1453.94m）。它在IE10中也不起作用。

以下是我遇到问题的JavaScript代码：

function canvasDrawBackground(value){
    console.log(value);     
    stage.removeChild(background);
    var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
    background = new createjs.Container();
    background.x = background.y = 0;
    background.addChild(temp);
    stage.addChild(background);
    background.addEventListener("mousedown", function(evt) {
        var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
        evt.addEventListener("mousemove",function(ev) {
            ev.target.x = ev.stageX+offset.x;
            ev.target.y = ev.stageY+offset.y;
            stage.update();   
        });
    });
    stage.update(); 
}

因此，在Firefox中，上面的代码可以正常工作，因为图像会添加到画布中，您可以拖动它。

在Chrome / IE10中没有任何反应 - 或者更简单地说，画布上没有任何内容。我认为问题在于我何时将图像添加到容器中，因为我可以将其他项目放入容器中并且可以正常工作。

我正在使用http://code.createjs.com/easeljs-0.6.1.min.js，此代码基于“拖动”教程。这是教程中的代码：

<!DOCTYPE html>
<html>
<head>
    <title>EaselJS demo: Dragging</title>
    <link href="../../shared/demo.css" rel="stylesheet" type="text/css">
    <script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
    <script>
        var stage, output;

        function init() {
            stage = new createjs.Stage("demoCanvas");

            // this lets our drag continue to track the mouse even when it leaves the canvas:
            // play with commenting this out to see the difference.
            stage.mouseMoveOutside = true; 

            var circle = new createjs.Shape();
            circle.graphics.beginFill("red").drawCircle(0, 0, 50);

            var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
            label.textAlign = "center";
            label.y = -7;

            var dragger = new createjs.Container();
            dragger.x = dragger.y = 100;
            dragger.addChild(circle, label);
            stage.addChild(dragger);

            dragger.addEventListener("mousedown", function(evt) {
                var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};

                // add a handler to the event object's onMouseMove callback
                // this will be active until the user releases the mouse button:
                evt.addEventListener("mousemove",function(ev) {
                    ev.target.x = ev.stageX+offset.x;
                    ev.target.y = ev.stageY+offset.y;
                    stage.update();   
                });
            });

            stage.update();
        }
    </script>
</head>
<body onLoad="init();">
    <canvas id="demoCanvas" width="500" height="200">
        alternate content
    </canvas>
</body>
</html>

要模拟我的问题，请更改“var circle = new createjs.Shape（）;”到位图/图像，createjs.Bitmap（“images / bg_”+ value +“。jpg”）;.然后它不会渲染。

非常感谢任何帮助！希望我做错了。：P

Answer 1

这可能是因为未加载图像。如果仅在创建后更新舞台，则可能无法显示图像。我建议为图像添加一个回调，以便在加载后更新舞台。

// Simple approach. May not work depending on the scope of the stage.
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
temp.image.onload = function() { stage.update(); }

预装您想要使用的图像也是有意义的。

Easel.js：在容器中放置图像并添加鼠标交互时的浏览器兼容性

1 个答案: