Easel.js：将浏览器兼容性时的图像的容器内并添加鼠标交互(Easel.js: Browser

我会说，这是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上面的代码工作，为图像添加到画布，你可以拖动它。

在镀铬/ 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圈=新createjs.Shape（）;” 成位图和/或图像，createjs.Bitmap（ “图像/ bg_” +值+ “JPG”）;. 然后，它不会呈现。

任何帮助是极大的赞赏！但愿我只是做是错误的。：P

这可能是因为未加载图像。如果你只创建后更新的阶段，图像可能不会显示。我会建议增加一个回调到图像更新后的加载阶段。

// 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(); }

它也可能是有意义的预装您打算使用的图像。