UI绘制_Paint的Xfermode

2017-12-10 本文已影响0人 Lypop

上一篇讲了Paint的渲染部分，

UI绘制_Paint的高级渲染 http://www.jianshu.com/p/cce8044d049d

而这篇我们来学习一下图像混合的mode，通过使用Xfermode将绘制的图形的像素和Canvas上对应位置的像素按照一定的规则进行混合，形成新的像素，再更新到Canvas中形成最终的图形使用的时候都是通Paint.setXfermode

我们一个像素的颜色都是由四个分量组成，即ARGB，A表示的是我们Alpha值，RGB表示的是颜色，在讲解Xfermode的时候需要了解一下PorterDuff.mode

public class PorterDuff {
    public enum Mode {
        /** [0, 0] */
        CLEAR       (0),
        /** [Sa, Sc] */
        SRC         (1),
        /** [Da, Dc] */
        DST         (2),
        /** [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] */
        SRC_OVER    (3),
        /** [Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc] */
        DST_OVER    (4),
        /** [Sa * Da, Sc * Da] */
        SRC_IN      (5),
        /** [Sa * Da, Sa * Dc] */
        DST_IN      (6),
        /** [Sa * (1 - Da), Sc * (1 - Da)] */
        SRC_OUT     (7),
        /** [Da * (1 - Sa), Dc * (1 - Sa)] */
        DST_OUT     (8),
        /** [Da, Sc * Da + (1 - Sa) * Dc] */
        SRC_ATOP    (9),
        /** [Sa, Sa * Dc + Sc * (1 - Da)] */
        DST_ATOP    (10),
        /** [Sa + Da - 2 * Sa * Da, Sc * (1 - Da) + (1 - Sa) * Dc] */
        XOR         (11),
        /** [Sa + Da - Sa*Da,
             Sc*(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */
        DARKEN      (12),
        /** [Sa + Da - Sa*Da,
             Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */
        LIGHTEN     (13),
        /** [Sa * Da, Sc * Dc] */
        MULTIPLY    (14),
        /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */
        SCREEN      (15),
        /** Saturate(S + D) */
        ADD         (16),
        OVERLAY     (17);

    Mode(int nativeInt) {
        this.nativeInt = nativeInt;
    }

    public final int nativeInt;
    }
}

S表示的是原像素，原像素的值表示[Sa,Sc] Sa表示的就是源像素的Alpha值，Sc表示源像素的颜色值

D表示的是目标像素，目标像素的值表示[Da,Dc] Da表示的就是目标像素的Alpha值

效果图

下面讲解一些常用的mode

SRC_IN [Sa * Da, Sc * Da]
处理图片相交区域时，受到目标图片的Alpha值影响，当目标图片的透明度为0时，源图片就不会显示
效果如下

核心代码

int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(dest_img, 0, 0, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
canvas.drawBitmap(src_img, 0, 0, paint);
paint.setXfermode(null);
canvas.restoreToCount(layerId);

SRC_OUT [Sa * (1 - Da), Sc * (1 - Da)]
和SRC_IN一样,不同的是当目标图片的透明度为不透明时，源图片就不会显示

效果如下

guagua.gif

核心

SRC_ATOP [Da, Sc * Da + (1 - Sa) * Dc]
当透明度为100%和0%时，SRC_IN 和 SRC_ATOP是通用的，当透明度不为上述的两个值时，SRC_ATOP 比 SRC_IN 源图像的饱和度会增加，变得更亮一些。所以效果上是和SRC_IN一样的，可以用SRC_IN替换成SRC_ATOP
DST_IN [Sa * Da, Sa * Dc]
正好和SRC_IN 相反，当源图片的透明度为0的时候，目标图片完全不显示

效果如下

核心代码

canvas.drawBitmap(src_img, 0, 0, paint);
int layerId = canvas.saveLayer(0, 0, src_img.getWidth(), src_img.getHeight(), null, Canvas.ALL_SAVE_FLAG);
canvas.drawBitmap(dest_img, new Rect(dx, 0, dx + src_img.getWidth(), src_img.getHeight()), new Rect(0, 0, src_img.getWidth(), src_img.getHeight()), paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(src_img, 0, 0, paint);
paint.setXfermode(null);
canvas.restoreToCount(layerId);

UI绘制_Paint的Xfermode

猜你喜欢

热点阅读