首页 文章

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

提问于
浏览 次
0

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

我们想要使用Bitmaps并对其应用颜色过滤器 .

可悲的是，ColorFilter无法正常工作 .

小提琴在这里代码：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();
}
javascript filter colors bitmap easeljs

1 回答

  • 2

    ColorFilter在此示例中不起作用，因为图像是跨域加载的 . 浏览器将无法读取像素以应用过滤器 . 我不确定为什么控制台中没有错误 .

    EaselJS没有机制在幕后创建图像时自动处理跨源图像（当您传递字符串路径时它会执行此操作） . 您必须自己创建图像，设置“crossOrigin”属性，然后设置路径（按此顺序） . 然后，您可以将图像传递给Bitmap构造函数 .

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

    您不必等待加载图像以创建位图并应用过滤器，但您必须等待缓存图像 .

    此修复程序还需要一个发送跨源头的服务器，git会这样做 . 这是一个更新的小提琴 . 请注意，如果您的图像加载在同一台服务器上，则无需这样做 .

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

    干杯 .

    回复于

相关问题