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

希望有所帮助！

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

1 个答案: