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

希望有幫助！