Javascript Easeljs中的位图不适用于事件侦听器？

我试图在画布上创建一个可拖动的背景图像。目前我有这样的想法：

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

---

这里有一个JSFIDLE:。知道我做错了什么吗？

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

我修改了你的小提琴，从支持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的内置支持，因此在加载和传递图像之前，必须在图像上指定CORS。PreloJS确实有CORS支持

如果您不能在服务器上支持CORS，那么还有另一种解决方法。在图像上指定一个相同大小的命中区域，它将在执行命中检测时绘制该区域而不是图像。这里是一个更新的小提琴：

---

希望有帮助

您的图像是否跨域加载？您看到控制台错误了吗？谢谢，这正是问题所在！

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