Android 混合模式 —— PorterDuffXferMode

文章摘要

混合是模式是Android自定义View中的重要的一个环节,也是最难掌握的一个特性。本文将分以下三个内容来介绍:第一章简要介绍用处,第二章介绍简单的代码实现,第三章将详细介绍各个模式的作用,第四章将介绍使用过程中的一些注意点(坑点)。

第一章 例子

## 以前吃饭的时候,一个同事拿出了刚买的华为荣耀手机,指着上面的时钟说,彬帅,你看这动效不错吧。然后问我有什么思路,当时我看了一下,说了一种最简单的方案——使用蒙版。
图1 华为荣耀时钟截图

这个动效最核心的就是刻度的起伏,我给出的方案可以用图2简单的解释。

图2. 华为手机动效实现示意图
最终的实现结果如下:
图3. 最终的实现结果图

详情可以前往这里https://github.com/Ajian-studio/GAHonorClock 查看,此外还有其他两个实现方案。

第二章 代码实现

上面的为例,怎么用代码实现蒙版的效果?

protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 保存图层
        int layerCount = canvas.saveLayer(mClockViewRectF, mPaint, Canvas.ALL_SAVE_FLAG);
        mPaint.setColor(mClockScaleLineColor);

        // 绘制等长度的时钟刻度线
        float clockScaleLineStartY = mAdjustClockScaleLineStartX + mClockViewRectF.top;
        float clockScaleLineEndY = clockScaleLineStartY + mClockScaleLineHeight;
        for (int i = 0; i < DEFAULT_TOTAL_CLOCK_SCALE_LINE_NUM; i++) {
            canvas.drawLine(mClockViewCenterX, clockScaleLineStartY,
                    mClockViewCenterX, clockScaleLineEndY, mPaint);
            canvas.rotate(ANGLE_PER_SCALE, mClockViewCenterX, mClockViewCenterY);
        }

        // 设置混合模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));

        // 旋转蒙版,实现移动的效果
        canvas.rotate(mNowClockAngle, mClockViewCenterX, mClockViewCenterY);
        // 绘制蒙版,切除外边缘和蒙版重叠的部分刻度线
        canvas.drawBitmap(mClockMaskBitmap, null, mClockViewRectF, mPaint);
        // 关闭混合模式
        mPaint.setXfermode(null);

        // 其他无关操作
        mPaint.setColor(mClockPointColor);
        canvas.drawCircle(mClockPointCenterX, mClockPointCenterY, mClockPointRadius, mPaint);

        // 恢复图层
        canvas.restoreToCount(layerCount);

        updateTimeText(canvas);
    }
将上面的代码提炼一下,混合模式的实现简化代码如下:
protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 保存图层
        int layerCount = canvas.saveLayer(mClockViewRectF, mPaint, Canvas.ALL_SAVE_FLAG);
        // 绘制 DST 图像
        canvas draw dst img
        // 设置混合模式
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        // 旋转蒙版,实现移动的效果
        canvas.rotate(mNowClockAngle, mClockViewCenterX, mClockViewCenterY);
        // 绘制 SRC 图像
        canvas draw src img
        // 关闭混合模式
        mPaint.setXfermode(null);
        // 恢复图层
        canvas.restoreToCount(layerCount);
    }

注: 混合模式中,DST 和 SRC 区别如下:
DST,是指开启混合模式之前的绘制内容, 也就是先前的内容;
SRC, 是指当开启混合模式之后绘制的内容,也就是后绘制的内容。

第三章 混合模式介绍

在Android的源码 android.graphics.PorterDuff.java 中如下的源码:

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      (16),
    /** [Sa + Da - Sa*Da,
         Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] */
    LIGHTEN     (17),
    /** [Sa * Da, Sc * Dc] */
    MULTIPLY    (13),
    /** [Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] */
    SCREEN      (14),
    /** Saturate(S + D) */
    ADD         (12),
    OVERLAY     (15);

    Mode(int nativeInt) {
        this.nativeInt = nativeInt;
    }
 }
上面的代码中的注释,解释了各个模式的最终的颜色的组成。但是看代码不直观,那么就看看下面这种 google 官方的图。
图4 Google 官方Demo的各个模式的说明图

第四章 混合模式实际的坑点

大致坑点有两个:
1)硬件加速在个别机型上会影响最终的结果
2) 谷歌官方Demo的图有一定的误导

下面将就 谷歌官方Demo 做一个说明。官方的图的颜色比较淡,为了更好的说明,将替换更鲜艳的颜色,如下图:

图5 使用红和蓝的Google 官方Demo的各个模式的说明图

但是我们直接试验的会得到如下的图6中右边,而得不到图4或图5的样子。

图6 左图为官方demo图, 右图为实际的效果图

为什么会出现这样的偏差呢?这个问题不是我一个会遇到吧?应该会有很多人遇到。

图7 左图为官方demo图的SRC, 右图为实际的效果图的SRC

通过上图7,左边为官方demo的绘制模式,虽然可见区域仅仅是蓝色方块,但是实际绘制的范围为红色框框出来的;而右图是我们实际操作过程中出现的,绘制范围仅仅是蓝色方块的范围。
这里我们得出一个结论:
混合模式发生作用的范围是,实际绘制的区域(不管相应的区域是否为可见),而不在绘制区域将不会受到任何影响。

此外现在都是讲的是不透明的情况下,那么透明情况如何?请看下图。

图9 带透明度谷歌官方demo图
图10 带透的绘制区域就是相应颜色区域的图

总结

到此为止,本文已经结束了。本文的示例代码可以在这里 https://github.com/linxuebin1990/TestMixedMode查看。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值