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

问题描述

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

I have an PNG image that has some transparent portion. Now I want to apply a color overlay to the non-transparent part of the image while keeping the transparent portion intact.

如果我使用 ColorFilter 会填充整个位图。我也尝试过 AlphaMaskFilter （使用与源相同的PNG），但是它也不起作用。整个位图总是充满颜色。

If I use the ColorFilter it fills the whole bitmap. I've also tried the AlphaMaskFilter (using the same PNG as source) but it doesn't work either. The whole bitmap is always filled with color.

还有其他建议吗？

推荐答案

您将必须编写一个过滤器，该过滤器可以：

You would have to write a filter that either:

• 类似于AlphaMaskFilter，仅使用 rect（）和 source-out CompositeOperation OR


• 就像AlphaMapFilter一样，但是在源图像中遇到空白像素的地方绘制彩色像素。

• works like AlphaMaskFilter, only using a rect() and source-out compositeOperation OR
• works like AlphaMapFilter, but instead draw a colored pixel where it encountered empty pixels in the source image.

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

Here is a sample plugin using the first approach above, which is probably the most efficient:

(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");
}());

我使用以下示例整理了一个小提琴：

I put together a quick fiddle using this example: http://jsfiddle.net/dbtwd463/

注意：编辑自原文只是建议使用包含样本和小提琴的方法

这篇关于如何在Easeljs / Createjs中用颜色覆盖位图的非透明部分？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！