我在游戏robolucha的实现中使用easeJS,目前我们通过在透明图像下使用形状来显示不同颜色的角色。
我们想要使用位图并对其应用滤色镜。
可悲的是,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();
}
答案 0 :(得分: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/
干杯。