Canvas 如何在Easeljs/Createjs中用颜色覆盖位图的不透明部分？

我有一个PNG图像，有一些透明的部分。现在我想对图像的非透明部分应用颜色覆盖，同时保持透明部分完好无损

如果我使用

颜色过滤器

，它将填充整个位图。我也尝试过AlphaMaskFilter（使用与源代码相同的PNG），但它也不起作用。整个位图始终充满颜色

---

关于如何操作的任何其他建议？

您必须编写一个过滤器：

• 与AlphaMaskFilter类似，仅使用

  rect（）

  和

  source out

  复合操作或
• 其工作原理类似于AlphaMapFilter，但在源图像中遇到空像素时绘制彩色像素

下面是使用上述第一种方法的示例插件，这可能是最有效的方法：

(function () {
    "use strict";
    function ColorMaskFilter(color) {
        this.color = color;
    }
    var p = createjs.extend(ColorMaskFilter, createjs.Filter);
    p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
        if (!this.color) { return true; }
        targetCtx = targetCtx || ctx;
        if (targetX == null) { targetX = x; }
        if (targetY == null) { targetY = y; }

        targetCtx.save();
        if (ctx != targetCtx) {
            return false;
        }

        targetCtx.globalCompositeOperation = "source-out"; // Use source-in to fill the shape instead
    targetCtx.fillStyle = this.color;
        targetCtx.rect(targetX,targetY,width,height);
    targetCtx.fill();

        targetCtx.restore();
        return true;
    };
    p.clone = function () {
        return new AlphaMaskFilter(this.color);
    }; 
    createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());

我用下面的例子快速组合了一把小提琴：

---

注意：根据刚提出的包含样本和小提琴的方法的原文编辑而成

您必须编写一个过滤器：

• 与AlphaMaskFilter类似，仅使用

  rect（）

  和

  source out

  复合操作或
• 其工作原理类似于AlphaMapFilter，但在源图像中遇到空像素时绘制彩色像素

下面是使用上述第一种方法的示例插件，这可能是最有效的方法：

(function () {
    "use strict";
    function ColorMaskFilter(color) {
        this.color = color;
    }
    var p = createjs.extend(ColorMaskFilter, createjs.Filter);
    p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
        if (!this.color) { return true; }
        targetCtx = targetCtx || ctx;
        if (targetX == null) { targetX = x; }
        if (targetY == null) { targetY = y; }

        targetCtx.save();
        if (ctx != targetCtx) {
            return false;
        }

        targetCtx.globalCompositeOperation = "source-out"; // Use source-in to fill the shape instead
    targetCtx.fillStyle = this.color;
        targetCtx.rect(targetX,targetY,width,height);
    targetCtx.fill();

        targetCtx.restore();
        return true;
    };
    p.clone = function () {
        return new AlphaMaskFilter(this.color);
    }; 
    createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());

我用下面的例子快速组合了一把小提琴：

---

注意：根据原稿编辑，该原稿刚刚建议了包括样本和小提琴的方法

根据兰尼的建议，我可以想出这个过滤器

没有画布！
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（“2d”）；
var stage=newcreatejs.stage（画布）；
函数初始化（img）{
var bmp=new createjs.Bitmap（img）；
stage.addChild（bmp）；
bmp.filters=[new createjs.ColorMaskFilter（'#ffff00'）；
cache（0,0,30,30）；
stage.update（）；
}
（功能（）{
“严格使用”；
函数ColorMaskFilter（颜色）{
这个颜色=颜色；
}
var p=createjs.extend（ColorMaskFilter，createjs.Filter）；
p、 applyFilter=函数（ctx、x、y、宽度、高度、目标ctx、目标x、目标y）{
targetCtx=targetCtx | | ctx；
如果（targetX==null）{
targetX=x；
}
if（targetY==null）{
targetY=y；
}
targetCtx.save（）；
如果（ctx！=目标ctx）{
//TODO:支持targetCtx和targetX/Y
//clearRect，然后绘制ctx？
返回false；
}
如果（！this.mask | | this.mask.width！=宽度| | this.mask.height！=高度）{
var shape=new createjs.shape（）；
shape.graphics.beginll（this.color | |'#ff0000'）；
shape.graphics.drawRect（0，0，宽度，高度）；
缓存（0，0，宽度，高度）；
this.mask=shape.cacheCanvas；
}
targetCtx.globalCompositeOperation=“来源于”；
targetCtx.drawImage（this.mask，targetX，targetY）；
targetCtx.restore（）；
返回true；
};
/**超一流的**/
p、 克隆=函数（）{
返回新的ColorMaskFilter（this.color）；
};
/**超一流的**/
p、 toString=函数（）{
返回“[ColorMaskFilter]”；
};
createjs.ColorMaskFilter=createjs.promote（ColorMaskFilter，“过滤器”）；
}());
来源：

根据兰尼的建议，我可以想出这个过滤器

没有画布！
var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（“2d”）；
var stage=newcreatejs.stage（画布）；
函数初始化（img）{
var bmp=new createjs.Bitmap（img）；
stage.addChild（bmp）；
bmp.filters=[new createjs.ColorMaskFilter（'#ffff00'）；
cache（0,0,30,30）；
stage.update（）；
}
（功能（）{
“严格使用”；
函数ColorMaskFilter（颜色）{
这个颜色=颜色；
}
var p=createjs.extend（ColorMaskFilter，createjs.Filter）；
p、 applyFilter=函数（ctx、x、y、宽度、高度、目标ctx、目标x、目标y）{
targetCtx=targetCtx | | ctx；
如果（targetX==null）{
targetX=x；
}
if（targetY==null）{
targetY=y；
}
targetCtx.save（）；
如果（ctx！=目标ctx）{
//TODO:支持targetCtx和targetX/Y
//clearRect，然后绘制ctx？
返回false；
}
如果（！this.mask | | this.mask.width！=宽度| | this.mask.height！=高度）{
var shape=new createjs.shape（）；
shape.graphics.beginll（this.color | |'#ff0000'）；
shape.graphics.drawRect（0，0，宽度，高度）；
缓存（0，0，宽度，高度）；
this.mask=shape.cacheCanvas；
}
targetCtx.globalCompositeOperation=“来源于”；
targetCtx.drawImage（this.mask，targetX，targetY）；
targetCtx.restore（）；
返回true；
};
/**超一流的**/
p、 克隆=函数（）{
返回新的ColorMaskFilter（this.color）；
};
/**超一流的**/
p、 toString=函数（）{
返回“[ColorMaskFilter]”；
};
createjs.ColorMaskFilter=createjs.promote（ColorMaskFilter，“过滤器”）；
}());
来源：

感谢Supersan和Lanny的回答

不幸的是，过滤器似乎不再适用于最新版本的createjs：-(

我更新了JSFIDLE示例：

我刚刚更新了createjs（V1.0.0），现在不再应用过滤器：-(

有人能帮忙吗

(function () {
    "use strict";
    function ColorMaskFilter(color) {
        this.color = color;
    }
    var p = createjs.extend(ColorMaskFilter, createjs.Filter);
    p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
        if (!this.color) { return true; }
        targetCtx = targetCtx || ctx;
        if (targetX == null) { targetX = x; }
        if (targetY == null) { targetY = y; }
 
        targetCtx.save();
        if (ctx != targetCtx) {
            return false;
        }
 
        targetCtx.globalCompositeOperation = "source-in"; // Use source-in to fill the shape instead
    targetCtx.fillStyle = this.color;
        targetCtx.rect(targetX,targetY,width,height);
    targetCtx.fill();
    
        targetCtx.restore();
        return true;
    };
    p.clone = function () {
        return new AlphaMaskFilter(this.color);
    }; 
    createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());





var stage = new createjs.Stage("canvas");
var img = document.createElement("img");
img.crossOrigin = "Anonymous";
var bmp = new createjs.Bitmap(img);
img.onload = function() {
        bmp.filters = [new createjs.ColorMaskFilter("#ff0000")];
    bmp.cache(0,0,img.width, img.height);
    stage.addChild(bmp);
    stage.update();
}
img.src = "http://playpen.createjs.com/CORS/duck.png";

---

谢谢Supersan和Lanny的回答

不幸的是，过滤器似乎不再适用于最新版本的createjs：-(

我更新了JSFIDLE示例：

我刚刚更新了createjs（V1.0.0），现在不再应用过滤器：-(

有人能帮忙吗

(function () {
    "use strict";
    function ColorMaskFilter(color) {
        this.color = color;
    }
    var p = createjs.extend(ColorMaskFilter, createjs.Filter);
    p.applyFilter = function (ctx, x, y, width, height, targetCtx, targetX, targetY) {
        if (!this.color) { return true; }
        targetCtx = targetCtx || ctx;
        if (targetX == null) { targetX = x; }
        if (targetY == null) { targetY = y; }
 
        targetCtx.save();
        if (ctx != targetCtx) {
            return false;
        }
 
        targetCtx.globalCompositeOperation = "source-in"; // Use source-in to fill the shape instead
    targetCtx.fillStyle = this.color;
        targetCtx.rect(targetX,targetY,width,height);
    targetCtx.fill();
    
        targetCtx.restore();
        return true;
    };
    p.clone = function () {
        return new AlphaMaskFilter(this.color);
    }; 
    createjs.ColorMaskFilter = createjs.promote(ColorMaskFilter, "Filter");
}());





var stage = new createjs.Stage("canvas");
var img = document.createElement("img");
img.crossOrigin = "Anonymous";
var bmp = new createjs.Bitmap(img);
img.onload = function() {
        bmp.filters = [new createjs.ColorMaskFilter("#ff0000")];
    bmp.cache(0,0,img.width, img.height);
    stage.addChild(bmp);
    stage.update();
}
img.src = "http://playpen.createjs.com/CORS/duck.png";

嗨，谢谢你的帮助