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

希望对您有所帮助！

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

Bitmap in Easeljs does not work with event listeners?

html

javascript

canvas

bitmap

easeljs