自定义控件三部曲之绘图篇（十一）——Paint之setXfermode(二)

最新推荐文章于 2021-11-21 10:36:47 发布
最新推荐文章于 2021-11-21 10:36:47 发布
阅读量484 收藏
点赞数
分类专栏： 自定义View

这篇文章将逐个讲解每个模式的意义。这里所讲的各种模式，在大家理解了之后可以回过头来看看setColorFilter(new PorterDuffColorFilter(Color.RED, PorterDuff.Mode.XXXX));中的混合过程，其实在PorterDuffColorFilter中的混合过程与这里的setXfermode()设置混合模式的计算方式和效果是完全相同的，只是在PorterDuffColorFilter中只能使用纯色彩，而且是完全覆盖在图片上方；而setXfermode()则不同，它只会在目标图像和源图像交合的位置起作用，而且源图像不一定是纯色的。 
在开始讲解之前，我们随便拿一个效果图来看一下，我们在这个效果图中需要关注哪两点

对应代码：

canvas.drawBitmap(dstBmp, 0, 0, mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
canvas.drawBitmap(srcBmp,width/2,height/2, mPaint);
前面在讲canvas的脏区域更新时，已经提到，在最后一句计算效果图像时，是以源图像所在区域为计算目标的，把计算后的源图像更新到对应区域内。 
所以如上图所示，我们在计算源图像所在区域效果图时，需要着重关注两个区域： 
1、如图标示区域一：区域一是源图像和目标图像的相交区域，由于在这个区域源图像和目标图像像素都不是空白像素，所以可以明显看出颜色的计算效果。 
2、如图标示区域二：在区域二中，源图像所在区域的目标图像是空白像素，所以这块区域所表示的意义就是，当某一方区域是空白像素时，此时的计算结果。 
总而言之：我们在下面的各个模式计算时，只需要关注图示中的区域一和区域二；其中区域一表示当源图像和目标图像像素都不是空白像素时的计算结果，而区域二则表示当某一方区域是空白像素时，此时的计算结果。
一、颜色叠加相关模式
这部分涉及到的几个模式有Mode.ADD（饱和度相加）、Mode.DARKEN（变暗），Mode.LIGHTEN（变亮）、Mode.MULTIPLY（正片叠底）、Mode.OVERLAY（叠加），Mode.SCREEN（滤色）
1、Mode.ADD（饱和度相加）
它的公式是Saturate(S + D)；ADD模式简单来说就是对SRC与DST两张图片相交区域的饱和度进行相加
同样使用上篇中的示例，一个矩形，一个圆形来做相加 
代码如下：（再次帖出代码，这将是最后一次帖出示例代码了，下面都是基于这个例子的基础上，具体的代码讲解，上篇已经讲过，这里就不再缀述了）
public class MyView extends View {
    private int width = 400;
    private int height = 400;
    private Bitmap dstBmp;
    private Bitmap srcBmp;
    private Paint mPaint;
 
    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);  
        srcBmp = makeSrc(width, height);
        dstBmp = makeDst(width, height);
        mPaint = new Paint();
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int layerID = canvas.saveLayer(0,0,width*2,height*2,mPaint,Canvas.ALL_SAVE_FLAG);
 
        canvas.drawBitmap(dstBmp, 0, 0, mPaint);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.ADD));
        canvas.drawBitmap(srcBmp,width/2,height/2, mPaint);
        mPaint.setXfermode(null);
 
        canvas.restoreToCount(layerID);
 
    }
 
    // create a bitmap with a circle, used for the "dst" image
    static Bitmap makeDst(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
 
        p.setColor(0xFFFFCC44);
        c.drawOval(new RectF(0, 0, w, h), p);
        return bm;
    }
 
    // create a bitmap with a rect, used for the "src" image
    static Bitmap makeSrc(int w, int h) {
        Bitmap bm = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas c = new Canvas(bm);
        Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
 
        p.setColor(0xFF66AAFF);
        c.drawRect(0, 0, w, h, p);
        return bm;
    }
}
与上篇文章唯一不同的地方在于，只是把模式改为了Mode.ADD 
效果图如下：

从效果图中可以看出，只有源图与目标图像相交的部分的图像的饱和度产生了变化，没相交的部分是没有变的，因为对方的饱和度是0，当然不相交的位置饱和度是不会变的。 
这个模式的应用范围比较少，暂时想不到哪里会用到；

2、Mode.LIGHTEN（变亮）
它的算法是： [Sa + Da - Sa*Da,Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] 
圆形和矩形的效果图为：


这个效果比较容易理解，两个图像重合的区域才会有颜色值变化，所以只有重合区域才有变亮的效果，源图像非重合的区域，由于对应区域的目标图像是空白像素，所以直接显示源图像。 
大家对公式其实不必理解，用过Photoshop的同学，应该都知道图层模式里的“变亮”模式，在博客《自定义控件三部曲之绘图篇（九）——Paint之setColorFilter》中已经讲过在photoshop中的操作方法。 
所以大家想知道结果，直接拿目标图像和源图像在photoshop中模拟一下就可以得到结果； 
我们在实际应用中，会有下面的这个情况，当选中一本书时，给这本书加上灯光效果

其实它是两张图合成的： 
DST:目标图像

SRC:源图像

可以看到，在这张图片的最上方中间的位置有些白色半透明的填充，其它位置都是透明的。 
下面我们来看一下代码：

public class LightBookView extends View {
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC;
 
    public LightBookView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.book_bg,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.book_light,null);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        //先画书架，做为目标图像
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN));
        //再图光点
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
 
    }
}
意思就是先把书架做为目标图像画在底层，然后给mBitPaint设置上PorterDuffXfermode，然后将处理过的源图盖在目标图像上。代码难度不大，就不再细讲。
3、Mode.DARKEN（变暗）
对应公式是： [Sa + Da - Sa*Da,Sc*(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)] 
示例图像为：

同样是对应photoshop中的混合模式中的变暗模式；同样大家可以在photoshop中就可以得到效果，就不再细讲了。

4、Mode.MULTIPLY(正片叠底)
公式是：[Sa * Da, Sc * Dc] 
示例图像为：


有些同学会奇怪了，Photoshop中也有正片叠底啊，相交区域正片叠底后的颜色确实是绿色的，但源图像的非相交区域怎么没了？ 
我们来看下他的计算公式：[Sa * Da, Sc * Dc]，在计算alpha值时的公式是Sa * Da，是用源图像的alpha值乘以目标图像的alpha值；由于源图像的非相交区域所对应的目标图像像素的alpha是0，所以结果像素的alpha值仍是0，所以源图像的非相交区域在计算后是透明的。 
在两个图像的相交区域的混合方式是与photoshop中的正片叠底效果是一致的。

5、Mode.OVERLAY（叠加）
这个没有给出公式…… 
示例图像为：


虽然没有给出公式，但从效果图中可以看到，源图像交合部分有效果，非交合部分依然是存在的，这就可以肯定一点，当目标图像透明时，在这个模式下源图像的色值不会受到影响；

6、Mode.SCREEN（滤色）
对应公式是：[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc] 
示例图像为：


同样，只是源图像与目标图像交合部分有效果，源图像非交合部分保持原样。

到这里，这六种混合模式就讲完了，我们下面总结一下：
1、这几种模式都是PhotoShop中存在的模式，是通过计算改变交合区域的颜色值的 
2、除了Mode.MULTIPLY(正片叠底)会在目标图像透明时将结果对应区域置为透明，其它图像都不受目标图像透明像素影响，即源图像非交合部分保持原样。

7、示例——twitter标识的描边效果
由于这些模式在photoshop中都存在，直接拿目标图像和源图像在photoshop中就可以演示出来，就没有多举例子，其实，在实现时实现两图像混合时，也经常会用到这些模式的，比如这里twitter的暗光效果 
我们这里有两张源图： 
图一：


图二：

然后完成的效果如下：

我们先想想这个要实现的效果有哪些特性： 
首先， 
在图一中，小鸟整个都是蓝色的 
在图二中，只有小鸟的边缘部分是白色的，中间部分是透明的。 
在最终的合成图中：图一和图二中小鸟与边缘的是显示的，而且还有某种效果，但小鸟中间的区域变透明了！显示的是底部Activity的背景色。 
想到我们前面学到的几种样式中，只有Mode.MULTIPLY(正片叠底)会在两个图像的一方透明时，结果像素就是透明的。所以这里使用的模式就是Mode.MULTIPLY 
对应代码如下：

public class TwitterView extends View {
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC;
    public TwitterView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.twiter_bg,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.twiter_light,null);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
 
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }
}
源码在文章底部给出
二、SRC相关模式
在讲完了photoshop中存在的几个模式以后，还有几个是在处理结果时以源图像显示为主的几个模式，所以大家在遇到当图像相交时，需要显示源图像时，就需要从这几个模式中考虑了 
这部分所涉及的模式有：Mode.SRC、Mode.SRC_IN、Mode.SRC_OUT、Mode.SRC_OVER、Mode.SRC_ATOP
1、Mode.SRC
计算公式为：[Sa, Sc] 
从公式中也可以看出，在处理源图像所在区域的相交问题时，全部以源图像显示 
所以示例图像为：

2、Mode.SRC_IN
计算公式为：[Sa * Da, Sc * Da] 
在这个公式中结果值的透明度和颜色值都是由Sa,Sc分别乘以目标图像的Da来计算的。所以当目标图像为空白像素时，计算结果也将会为空白像素。 
示例图像为：


大家注意SRC_IN模式与SRC模式的区别，一般而言，是在相交区域时无论SRC_IN还是SRC模式都是显示源图像，而唯一不同的是，当目标图像是空白像素时，在SRC_IN所对应的区域也将会变成空白像素； 
其实更严格的来讲，SRC_IN模式是在相交时利用目标图像的透明度来改变源图像的透明度和饱和度。当目标图像透明度为0时，源图像就完全不显示。 
利用这个特性，我们能完成很多功能，比如： 

示例1：图形圆角
我们有两张图像： 
图像一：（我们熟悉的小狗 ）


图像二：（去角遮罩）

效果为：

可以看到这个遮罩的四个角都是圆形切角，都是透明的。 
现在我们需要利用SRC_IN的特性，显示SRC图像，但会把目标图像中空白像素的部分去掉的特性来做了。 
由于我们需要最终显示小狗图像，所以这里需要将小狗 图像做为SRC，将遮罩做为目标图像 
代码为：

public class RoundImageView_SRCIN extends View {
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC;
 
    public RoundImageView_SRCIN(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.dog_shade,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.dog,null);
    }
 
 
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
 
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }
}
示例2：图片倒影
前面我们讲过，SRC_IN模式是在相交时利用目标图像的透明度来改变源图像的透明度和饱和度。所以当目标图像的透明度在0-255之间时，就会把源图像的透明度和颜色值都会变小。利用这个特性，我们可以做出倒影效果

用到的遮罩为：

这个遮罩好像还不太清，它是一个从上到下的白色填充渐变；白色的透明度从49%到0； 
对应的代码为：

public class InvertedImageView_SRCIN  extends View{
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC,BmpRevert;
    public InvertedImageView_SRCIN(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.dog_invert_shade,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.dog,null);
 
        Matrix matrix = new Matrix();
        matrix.setScale(1F, -1F);
        // 生成倒影图
        BmpRevert = Bitmap.createBitmap(BmpSRC, 0, 0, BmpSRC.getWidth(), BmpSRC.getHeight(), matrix, true);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        //先画出小狗图片
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        //再画出倒影
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        canvas.translate(0,BmpSRC.getHeight());
 
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(BmpRevert,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
 
        canvas.restoreToCount(layerId);
    }
}
代码中稍微有点难度的地方，可能是在利用小狗图片生成对应的倒影图像的位置：
Matrix matrix = new Matrix();
matrix.setScale(1F, -1F);
// 生成倒影图
BmpRevert = Bitmap.createBitmap(BmpSRC, 0, 0, BmpSRC.getWidth(), BmpSRC.getHeight(), matrix, true);
这里主要是利用matrix将图像做一个翻转，有关位移matrix的知识，我们会在讲解canvas的变换时细讲，这里就不再讲解了，继续关注吧。 
SRC_IN模式就讲这两个例子吧，其实它的用途是很多的，比如扣图，你能否利用我们圆角示例的来实现一个扣图效果呢？自己试试吧
3、Mode.SRC_OUT
计算公式为：[Sa * (1 - Da), Sc * (1 - Da)] 
从公式中可以看出，计算结果的透明度=Sa * (1 - Da)；也就是说当目标图像图像完全透明时，计算结果将是透明的； 
示例图像为：

从示例图中也可以看出，源图像与目标图像的相交部分由于目标图像的透明度为100%，所以相交部分的计算结果为空白像素。在目标图像为空白像素时，完全以源图像显示。 
所以这个模式的特性可以概括为：以目标图像的透明度的补值来调节源图像的透明度和色彩饱和度。即当目标图像为空白像素时，就完全显示源图像，当目标图像的透明度为100%时，交合区域为空像素。 
Mode.SRC_OUT简单来说，当目标图像有图像时结果显示空白像素，当目标图像没有图像时，结果显示源图像。 

1、橡皮擦效果
利用这个特性，我们可以实现橡皮擦效果


原理：我们说了简单来讲Mode.SRC_OUT模式，当目标图像有图像时计算结果为空白像素，当目标图像没有图像时，显示源图像； 
所以我们把手指轨迹做为目标图像，在与源图像计算时，有手指轨迹的地方就变为空白像素了，看起来的效果就是被擦除了。 
代码如下：

public class DogView_SRCOUT extends View {
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC;
    private Path mPath;
    private float mPreX,mPreY;
    public DogView_SRCOUT(Context context, AttributeSet attrs) {
        super(context, attrs);
 
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        mBitPaint.setColor(Color.RED);
        mBitPaint.setStyle(Paint.Style.STROKE);
        mBitPaint.setStrokeWidth(45);
 
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.dog,null);
        BmpDST = Bitmap.createBitmap(BmpSRC.getWidth(), BmpSRC.getHeight(), Bitmap.Config.ARGB_8888);
        mPath = new Path();
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
 
        //先把手指轨迹画到目标Bitmap上
        Canvas c = new Canvas(BmpDST);
        c.drawPath(mPath,mBitPaint);
 
        //然后把目标图像画到画布上
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
 
        //计算源图像区域
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }
 
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(event.getX(),event.getY());
                mPreX = event.getX();
                mPreY = event.getY();
                return true;
            case MotionEvent.ACTION_MOVE:
                float endX = (mPreX+event.getX())/2;
                float endY = (mPreY+event.getY())/2;
                mPath.quadTo(mPreX,mPreY,endX,endY);
                mPreX = event.getX();
                mPreY =event.getY();
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        postInvalidate();
        return super.onTouchEvent(event);
    }
}
首先这里涉及到使用贝赛尔曲线构造手指轨迹的知识，请参考《自定义控件三部曲之绘图篇（六）——Path之贝赛尔曲线和手势轨迹、水波纹效果 
》 
代码难度不大就不再讲了，既然我们实现了擦除效果，那我们稍微加以改进，就变成了刮刮卡效果了 
2、刮刮卡效果
首先，搞一个刮刮卡图片：（guaguaka_pic.png）

然后再搞个中奖结果：(guagua_text.png)

结果如下：

对应代码为：

public class GuaGuaCardView_SRCOUT extends View{
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC,BmpText;
    private Path mPath;
    private float mPreX,mPreY;
    public GuaGuaCardView_SRCOUT(Context context, AttributeSet attrs) {
        super(context, attrs);
 
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        mBitPaint.setColor(Color.RED);
        mBitPaint.setStyle(Paint.Style.STROKE);
        mBitPaint.setStrokeWidth(45);
 
        BmpText = BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka_text,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.guaguaka_pic,null);
        BmpDST = Bitmap.createBitmap(BmpSRC.getWidth(), BmpSRC.getHeight(), Bitmap.Config.ARGB_8888);
        mPath = new Path();
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        canvas.drawBitmap(BmpText,0,0,mBitPaint);
 
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
 
        //先把手指轨迹画到目标Bitmap上
        Canvas c = new Canvas(BmpDST);
        c.drawPath(mPath,mBitPaint);
 
        //然后把目标图像画到画布上
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
 
        //计算源图像区域
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }
 
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                mPath.moveTo(event.getX(),event.getY());
                mPreX = event.getX();
                mPreY = event.getY();
                return true;
            case MotionEvent.ACTION_MOVE:
                float endX = (mPreX+event.getX())/2;
                float endY = (mPreY+event.getY())/2;
                mPath.quadTo(mPreX,mPreY,endX,endY);
                mPreX = event.getX();
                mPreY =event.getY();
                break;
            case MotionEvent.ACTION_UP:
                break;
        }
        postInvalidate();
        return super.onTouchEvent(event);
    }
}
与上面橡皮擦效果不同的是，在绘图时，在特效前先把刮刮卡的中奖文字绘在底部，这时候当橡皮擦把刮刮卡的图片给擦除掉时，就露出底部的刮刮卡的中奖文字了。
4、Mode.SRC_OVER
计算公式为：[Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc] 
示例图像为：

我们可以看到，在计算结果中，源图像没有变。它的意思就是在目标图像的顶部绘制源图像。从公式中也可以看出目标图像的透明度为Sa + (1 - Sa)*Da；即在源图像的透明度基础上增加一部分目标图像的透明度。增加的透明度是源图像透明度的补量；目标图像的色彩值的计算方式同理，所以当源图像透明度为100%时，就原样显示源图像；
5、Mode.SRC_ATOP
计算公式为：[Da, Sc * Da + (1 - Sa) * Dc] 
示例图像为：


很奇怪，它的效果图竟然与SRC_IN模式是相同的，我们来对比一下它们的公式： 
SRC_IN: [Sa * Da, Sc * Da] 
SRC_ATOP:[Da, Sc * Da + (1 - Sa) * Dc] 
先看透明度：在SRC_IN中是Sa * Da,在SRC_ATOP是Da 
SRC_IN是源图像透明度乘以目标图像的透明度做为结果透明度，而SRC_ATOP是直接使用目标图像的透明度做为结果透明度 
再看颜色值： 
SRC_IN的颜色值为 Sc * Da，SRC_ATOP的颜色值为Sc * Da + (1 - Sa) * Dc；SRC_ATOP在SRC_IN的基础上还增加了(1 - Sa) * Dc； 
所以总结来了：

1、当透明度只有100%和0%时，SRC_ATOP是SRC_IN是通用的 
2、当透明度不只有100%和0%时，SRC_ATOP相比SRC_IN源图像的饱和度会增加，即会显得更亮！

所以，前面利用SRC_IN实现的圆角效果是完全可以使用SRC_ATOP模式来实现的 

1、圆角效果（当透明度只有100%和0%时，SRC_ATOP是SRC_IN是通用的）
效果图不变：


代码中仅将SRC_IN模式改为SRC_ATOP模式即可：

public class RoundImageView_SRCOUT extends View {
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC;
 
    public RoundImageView_SRCOUT(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.dog_shade,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.dog,null);
    }
 
 
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
 
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
        canvas.restoreToCount(layerId);
    }
}
示例2：图片倒影(颜色饱和度增加)
前面我们讲过，当目标图像的透明度不是100%和0%时，源图像的颜色值就会比SRC_IN模式的颜色值饱和度增加。 
我们来对比下效果： 
同样只需要在将原图片倒影代码的SRC_IN模式改成SRC_ATOP即可，代码如下：
public class InvertedImageView_SRCOUT extends View{
    private Paint mBitPaint;
    private Bitmap BmpDST,BmpSRC,BmpRevert;
    public InvertedImageView_SRCOUT(Context context, AttributeSet attrs) {
        super(context, attrs);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        mBitPaint = new Paint();
        BmpDST = BitmapFactory.decodeResource(getResources(),R.drawable.dog_invert_shade,null);
        BmpSRC = BitmapFactory.decodeResource(getResources(),R.drawable.dog,null);
 
        Matrix matrix = new Matrix();
        matrix.setScale(1F, -1F);
        // 生成倒影图
        BmpRevert = Bitmap.createBitmap(BmpSRC, 0, 0, BmpSRC.getWidth(), BmpSRC.getHeight(), matrix, true);
    }
 
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
 
        //先画出小狗图片
        canvas.drawBitmap(BmpSRC,0,0,mBitPaint);
 
        //再画出倒影
        int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
        canvas.translate(0,BmpSRC.getHeight());
 
        canvas.drawBitmap(BmpDST,0,0,mBitPaint);
        mBitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP));
        canvas.drawBitmap(BmpRevert,0,0,mBitPaint);
 
        mBitPaint.setXfermode(null);
 
        canvas.restoreToCount(layerId);
    }
}
效果图如下：

然后再来看看原来SRC_IN的效果图，对比一下：

明显亮度是有增加的。
所以对于SRC_ATOP的结论就出来了，一般而言SRC_ATOP是可以和SRC_IN通用的，但SRC_ATOP所产生的效果图在目标图不是透明度不是0或100%的时候，会比SRC_IN模式产生的图像更亮些；
好了，这篇就先到这里了，下篇继续给大家讲解xfermode的应用。 

 

Luckie stone
关注
专栏目录
自定义控件三部曲之绘图篇（十）——Paint之setXfermode(一)
启舰
04-27 2万+
前言： 不应该一路失望 又一路等待 时间它说 世界还有不同的海 但不要告诉我 现实它很坏 我想看看 自己的能耐 ——莫文蔚《境外》 系列文章： Android自定义控件三部曲文章索引：http://blog.csdn.net/harvic880925/article/details/50995268 一、GPU硬件加速 1、概述 GPU英文全称Graphic Proces...
Android自定义控件三部曲文章索引
热门推荐
启舰
11-25 17万+
前言：在我从C++转到Android时，就被Android里炫彩斑斓的自定义控件深深折服，想知道如果想利用C++实现这些功能，那是相当困难的。从那时候起，我就想，等我学会了自定义控件，一定要写一篇系列出来，方便后来者能更系统完善地掌握它。今天，这个系列就这样默默地诞生了，希望它能够完成它的使命，在你读完这系列博客时，发现定自义控件也不过如此！如果，顺便能给个评论，加个关注，我将不胜感激——启舰 ...
android.graphics.Paint的setXfermode方法 设置两张图片相交时的模式
phoenixshow的专栏
03-06 2314
用法：设置两张图片相交时的模式 例子：   1 mPaint = new Paint(); 2         mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN)); 常见的Xfermode（SRC为原图，DST
详解Paint的setXfermode(Xfermode xfermode)
weixin_34239169的博客
02-21 217
一、setXfermode(Xfermode xfermode) Xfermode国外有大神称之为过渡模式，这种翻译比较贴切但恐怕不易理解，大家也可以直接称之为图像混合模式，因为所谓的“过渡”其实就是图像混合的一种，这个方法跟我们上面讲到的setColorFilter蛮相似的。查看API文档发现其果然有三个子类：AvoidXfermode, PixelXorXfermode和PorterDuff...
Paint之setXfermode(图形混合模式)
火星男孩的分享空间
11-10 562
PorterDuff.Mode表示混合模式，枚举值有18个，表示各种图形混合模式,有：Mode.CLEAR Mode.SRC Mode.DST Mode.SRC_OVER Mode.DST_OVER Mode.SRC_IN Mode.DST_IN Mode.SRC_OUT Mode.DST_OUT Mode.SRC_ATOP Mode.DST_ATOP M
笔记-Paint之setXfermode
小黄人的博客
05-26 800
笔记-Paint之setXfermodesetXfermode(Xfermode xfermode)--图形混合模式在继承Xfermode这个类有三个子类AvoidXfermode，PixelXorXfermode，PorterDuffXfermodeAvoidXfermode，PixelXorXfermode是完全不支持硬件加速的，而PorterDuffXfermode是部分不支持的嗯，前两个好...
博客《自定义控件三部曲之绘图篇（十）——Paint之setXfermode(一)》对应源码
04-28
博客《自定义控件三部曲之绘图篇（十）——Paint之setXfermode(一)》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/51264653
博客《自定义控件三部曲之绘图篇（十一）——Paint之setXfermode(二)》对应源码
04-30
博客《自定义控件三部曲之绘图篇（十一）——Paint之setXfermode(二)》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/51284710
博客《自定义控件三部曲之绘图篇（十二）——Paint之setXfermode(三)》对应源码
04-30
博客《自定义控件三部曲之绘图篇（十二）——Paint之setXfermode(三)》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/50995268
setXfermode 模式浅析
weixin_34413357的博客
03-12 131
setXfermode 用来自定义View的时候融合图片很方便。 下图是按照canvas的大小画bitmap的效果，并不是直接画圆形和方型。 主要有几种模式,可以参见PorterDuff.Mode枚举，具体效果看下图： 上图 可以理解为作用域是第二次绘画的bitmap大小 代码如下： paint.setColor(Color.RED); canvas.drawC...
setXfermode讲解
04-07
Android Paint之 setXfermode PorterDuffXfermode 讲解！
Android中采用paint.setXfermode() 设置一个简单的圆形遮罩
05-04
Android中采用paint.setXfermode() 设置一个简单的圆形遮罩，详细了解请移步：http://blog.csdn.net/zxc514257857/article/details/63834235
Android绘图篇(六)——setXfermode
huxin1875的博客
04-12 1713
上一篇：Android绘图篇(五)——setShader 设置着色器 上篇总结了Paint中的setShader方法，这篇来总结下setXfermode方法。setXfermode需要传入一个Xfermode对象。来看下这个类的介绍： 它是一种图像混合模式，当然只知道这个，并不能理解它是干嘛的，也不知道怎么用，不过没关系，通过一个个例子就能逐渐体会它的奥妙。至于使用的时候，只需要传入其子类就行了...
自定义View——setXfermode
hoho的博客
11-21 2684
setXfermode "setXfermode"这个方法能够做什么？大多数情况下我们知道这个就行。对于Android开发中碰到最多的是实现圆形图片显示或是圆角图片，而"setXfermode"的使用就能够实现我们想要的图片效果。 Xfermode指的是你要绘制的内容和Canvas的目标位置的内容应该怎样结合计算出最终的颜色。通俗来讲就是要你以绘制的内容作为源图像，以 View 中已有的内容作为目标图像，选取一个PorterDuff.Mode作为绘制内容的颜色处理方案。就像这样： Xfermod..
Android setXfermode使用
qq_29014845的博客
06-21 269
要实现setXfermode的效果：1、关闭硬件加速2、必须是两个Bitmap参考资料：https://blog.csdn.net/u010335298/article/details/51983420https://blog.csdn.net/hiyohu/article/details/12509731...
Paint API —— setXfermode() 详解
我想月薪过万的博客
08-09 1123
效果展示 API解释 setXfermode(Xfermode xfermode) @param xfermode May be null. The xfermode to be installed in the paint 译文：xfermode 可以为空，并且必须安装到画笔上 Xfermode对象由 PorterDuffXfermode(PorterDuff.Mode mode)构造方法产生 PorterDuff.Mode mode 有18种 使用步骤： 第一步：绘制 目标（d.
android Paint之setXfermode方法
哟呼很多事的专栏
10-09 1万+
setXfermode(Xfermode xfermode) 该方法用来设置两张图片相交时的模式，系统已经实现的Xfermode子类有以下三个： 1、AvoidXfermode 指定了一个颜色和容差，强制Paint避免在它上面绘图(或者只在它上面绘图)。 2、PixelXorXfermode 当覆盖已有的颜色时，应用一个简单的像素XOR操作。 3、PorterDuffX
PorterDuffXfermode的用法
edisonlg的专栏
12-19 2万+
android.graphics.Paint public Xfermode setXfermode (Xfermode xfermode) Set or clear the xfermode object. Pass null to clear any previous xfermode. As a convenience, the parameter passed is also re
Android中如何采用paint.setXfermode() 设置圆形遮罩
最新发布
04-20
3. 将原始图片与圆形图片合并，使用 Paint.setXfermode() 设置圆形遮罩 paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, 0, 0, paint); 4. 最后将合并后的图片绘制...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值