Easel.js: Browser compatibility when placing an image within a container and adding mouse interactions

问题

I'm going to start this question off by saying that this is 100% working in Firefox (v21.0). For some reason it's not working in Google Chrome (v27.0.1453.94m). It also doesn't work in IE10.

Here is the JavaScript code I'm having issues with:

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

So, in Firefox the above code works, as in the image is added to the canvas and you can drag it around.

In Chrome / IE10 nothing happens - or more simply nothing appears on the canvas. I think the issue is in regards to when I add the image into the container, as I can place other items into the container and it works.

I am using http://code.createjs.com/easeljs-0.6.1.min.js and this code is based off of the "drag" tutorial. Here's the code from the tutorial:

<!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>

To simulate my issue, change "var circle = new createjs.Shape();" into a bitmap / image, createjs.Bitmap("images/bg_" + value +".jpg");. It then doesn't render.

Any help is greatly appreciated! Hopefully I'm just doing it wrong. :P

回答1:

This is probably because the image is not loaded. If you only update the stage after creating it, the image may not display. I would recommend adding a callback to the image to update the stage after its loaded.

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

It also may make sense to preload the images you intend to use.

来源：https://stackoverflow.com/questions/16865628/easel-js-browser-compatibility-when-placing-an-image-within-a-container-and-add

标签

javascript

cross-browser

easeljs