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

Question

我正在尝试在画布中创建可拖动的背景图像。 目前我有这样的事情：

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必须访问舞台像素才能确定鼠标何时将内容相交。

我修改了您的小提琴以从支持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，当进行命中检测时，它将绘制图像而不是图像。 这是更新的小提琴： 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;
}

希望有帮助！