1

我将通过说这是 100% 在 Firefox (v21.0) 中工作来开始这个问题。由于某种原因，它无法在 Google Chrome (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

4

1 回答 1

3

这可能是因为图像未加载。如果仅在创建阶段后更新阶段，则图像可能不会显示。我建议在加载后向图像添加回调以更新舞台。

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

预加载您打算使用的图像也可能有意义。

于 2013-06-04T15:48:44.677 回答