EaseJS 将颜色过滤器应用于位图

Question

我在robolucha这个游戏的实现中使用了easeJS，目前我们在透明图像下使用形状来显示不同颜色的角色。

我们想使用位图并对其应用滤色器。

很遗憾，ColorFilter 无法正常工作。

Fiddle 代码在这里：https://jsfiddle.net/athanazio/7z6mqnrk/

这是我使用的代码

var stage = new createjs.Stage("filter");
var head = new createjs.Container();
head.x = 300;
head.y = 300;
head.regX = 100; 
head.regY = 100; 
var path = "https://raw.githubusercontent.com/hamilton-lima/javascript-samples/master/easejs/colorfilter/"; 

var layer1 = new createjs.Bitmap(path + "layer1-green.png");
layer1.image.onload = function(){
        layer1.filters = [ new createjs.ColorFilter(0, 0, 0, 1, 0, 0, 255, 1) ];
        layer1.cache(0,0,200,200);
}

var layer2 = new createjs.Bitmap(path + "layer2.png");

head.addChild(layer1);
head.addChild(layer2);

stage.addChild(head);

createjs.Ticker.addEventListener("tick", headTick);
function headTick() {
        head.rotation += 10;
}

createjs.Ticker.addEventListener("tick", handleTick);
function handleTick() {
        stage.update();
}

Answer 1

ColorFilter 在此示例中不起作用，因为正在加载图像 cross-domain。浏览器将无法读取像素来应用过滤器。我不太确定为什么控制台没有错误。

EaselJS 在幕后创建图像时没有自动处理 cross-origin 图像的机制（当您传递字符串路径时它会这样做）。您必须自己创建图像，设置 "crossOrigin" 属性，然后设置路径（按此顺序）。然后你可以将图像传递给位图构造函数。

var img = document.createElement("img");
img.crossOrigin = "Anonymous";
img.onload = function() {
    // apply the filter and cache it
}
img.src = path + "layer1.png";

layer1 = new createjs.Bitmap(img);

您不必等待图像加载来创建位图和应用滤镜，但您必须等待缓存图像。

此修复还需要服务器发送 cross-origin header，而 git 可以。这是包含该更改的更新 fiddle。请注意，如果您的图像是在同一台服务器上加载的，则没有必要。

https://jsfiddle.net/7z6mqnrk/10/

干杯。

EaseJS 将颜色过滤器应用于位图

EaseJS applying Color filter to Bitmap

javascript

colors

bitmap

filter

easeljs