1

この質問は、これが Firefox (v21.0) で 100% 動作することから始めます。何らかの理由で、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 に答える