javascript - Easeljs 中的位图无法与事件监听器一起使用？

Question

我正在尝试在 Canvas 中创建可拖动的背景图像。目前我有这样的东西:

var stage = new createjs.Stage("canvas");
createjs.Ticker.addEventListener("tick", tick);

var dragContainer = new createjs.Container();
stage.addChild(dragContainer);

dragContainer.on("pressmove", function (event) {
    event.currentTarget.x = event.stageX;
    event.currentTarget.y = event.stageY;
    stage.update();
});

// Add a thing
var shape = new createjs.Shape();
shape.graphics.beginFill("#000");
shape.graphics.drawRect(0, 0, 50, 50);

dragContainer.addChild(shape);

// Update the stage
function tick(event) {
    stage.update();
}

这工作得很好，一切都是可拖动的，等等。问题是，当我用位图替换用图形绘制的形状(这是我想要的功能)时，它不起作用。

    //Add a thing, this doesn't work
    var shape = new createjs.Bitmap("http://www.graphic-design-employment.com/images/create-a-simple-shape.jpg")
    dragContainer.addChild(shape);

这是一个jsfiddle:http://jsfiddle.net/frozensoviet/5heLu2L1/ 。你知道我做错了什么吗？

Answer 1

您可能会看到跨源错误。您的控制台应该向您显示错误。发生这种情况是因为 EaselJS 必须访问舞台像素以确定鼠标何时与内容相交。

我修改了你的 fiddle 以从支持 CORS 的服务器加载图像。文件夹中有一个htaccess文件，其中有一行:

Header set Access-Control-Allow-Origin "*"

然后，只需将内容标记为 crossOrigin 即可。请注意，必须在加载源之前设置 crossOrigin 标志。

var img = new Image();
img.crossOrigin = "Anonymous";
img.src = "http://playpen.createjs.com/CORS/duck.png";
var shape = new createjs.Bitmap(img);

EaselJS 没有对 CORS 的内置支持，因此您必须在加载和传递图像之前在图像上指定它。PreloadJS 确实具有 CORS 支持。

如果您无法在服务器上支持 CORS，还有另一种解决方法。在图像上指定一个相同大小的 hitArea，当进行命中检测时，它将绘制它而不是图像。这是更新的 fiddle :http://jsfiddle.net/lannymcnie/5heLu2L1/2/

var shape = new createjs.Bitmap("http://playpen.createjs.com/CORS/duck.png");
shape.image.onload = function() {
    var hitArea = new createjs.Shape();
    hitArea.graphics.f("#000").dr(0,0,shape.image.width,shape.image.height);
    shape.hitArea = hitArea;
}

希望有帮助!