Easel.js：将图像放置在容器中并添加鼠标交互时的浏览器兼容性 [英] Easel.js: Browser compatibility when placing an image within a container and adding mouse interactions
问题描述
首先，我要说这个问题在Firefox（v21.0）中可以100％正常运行。由于某些原因，它无法在Google Chrome浏览器（v27.0.1453.94m）中运行。
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.
这是我遇到问题的JavaScript代码：
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();
}
因此，在Firefox中，上述代码可以正常工作，如上图所示
So, in Firefox the above code works, as in the image is added to the canvas and you can drag it around.
在Chrome / IE10中什么也没有发生-或更简单地说，什么也没有出现在画布上。我认为问题出在我将图像添加到容器中时，因为我可以将其他项目放入容器中并且可以正常工作。
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.
我正在使用 http://code.createjs.com/easeljs-0.6.1.min.js ，并且此代码基于拖动教程。以下是该教程中的代码：
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>
要模拟我的问题，请更改 var circle = new createjs.Shape（）;转换成位图/图像，createjs.Bitmap（ images / bg_ + value +。jpg）;。
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.
任何帮助，我们将不胜感激！希望我做错了。 ：P
Any help is greatly appreciated! Hopefully I'm just doing it wrong. :P
推荐答案
这可能是因为未加载图像。如果仅在创建舞台后才对其进行更新，则图像可能不会显示。我建议向图像添加回调以在加载后更新舞台。
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.
这篇关于Easel.js：将图像放置在容器中并添加鼠标交互时的浏览器兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
