Android自定义控件开发入门与实战（11）Xfermode，Android程序员必看

最新推荐文章于 2024-05-06 18:21:31 发布
最新推荐文章于 2024-05-06 18:21:31 发布
阅读量433 收藏
点赞数
分类专栏： 程序员 文章标签： 面试 android 移动开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64382950/article/details/121574505
版权

它只有一个参数PorterDuff.Mode，表示混合模式，枚举值有18个那么多：

/** [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 - SaDa, Sc(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)] */

DARKEN (12),

/** [Sa + Da - SaDa, 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);

上图中的Sa表示Source Alpha，表示资源的Alpha通道，Sc的全称为Source color，表示源图像的颜色，Da表示Destination alpha，表示目标图像的alpha通道，Destination color表示目标图像的颜色。

在每个公式中，都会分成两部分[…,…]，前半部分计算Alpha通道，后半部分计算处理后的颜色值。

其中上面的算法涉及到两个概念：目标图像（DST）和原图像（SRC）

一般我们都会让他们相交，产生两个区域，区域一为原图像和目标图像的相交区域，区域二为原图像与空白像素的相交区域。

这两个区域很重要，之后会经常用到。

这里举一个例子，我们画一个圆形和一个矩形，然后相交，其中，圆形为目标图像，矩形为原图像。

首先画一个圆形和矩形：

public XfermodeView1(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

setLayerType(LAYER_TYPE_SOFTWARE, null);

dstBmp = makeDst(width, height);

srcBmp = makeSrc(width, height);

mPaint = new Paint();

}

private Bitmap makeSrc(int width, int height) {

Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);

Canvas c = new Canvas(bitmap);

Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);

p.setColor(0xFF66AAFF);

c.drawRect(0, 0, width, height, p);

return bitmap;

}

private Bitmap makeDst(int width, int height) {

。。。

p.setColor(0xFFFFCC44);

c.drawOval(new RectF(0, 0, width, height), p);

return bitmap;

}

画出一个颜色为黄色的圆形和一个蓝色的矩形，接下来让他们混合，混合Mode为SRC_IN:

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

canvas.drawBitmap(dstBmp, 0, 0, mPaint);

mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));

canvas.drawBitmap(srcBmp, width / 2, height / 2, mPaint);

mPaint.setXfermode(null);

canvas.restoreToCount(layerId);

}

将圆形在控件中心位置画出，而矩形则以圆心为左上角画出。

效果如下：

在这里插入图片描述

我们知道SRC_IN的计算公式为[Sa * Da, Sc * Da] ，该公式中结果的透明值和颜色值都是由 Sa和Sc 来乘以 Da计算的。

当目标图像为空白像素时，计算结果也将是空白像素。 所以区域一的相交部分显示的是源图像，而对于区域二的不相交部分，此时目标图像的透明度是0，源图像不显示。

颜色叠加相关模式

接下来我们将逐个看一下各种模式 的含义及用法。

这一部分所涉及的模式都是针对色彩变换的几种模式，有Mode.ADD(饱和度相加)、Mode.LIGHTEN(变亮)、Mode.DARKEN(变暗)、Mode.MUTIPLY(正片叠底)、Mode.OVERLAY(叠加)、Mode.SCREEN(滤色)。

1、Mode.ADD(饱和度相加)

对应的算法：Saturate(S + D)

简单来说就是就是对SRC与DST两张图片相交区域的饱和度进行相加。

将上例中的SRC_IN改成ADD，效果如下：

在这里插入图片描述

可以看到当两个饱和度为100的相交后会变成白色（这里不明显还以为是透明，下面我把背景颜色改一下），不相交的地方等就是饱和度100+0，所以还是自己原来的颜色。

2、Mode.LIGHTEN(变亮)

对应的算法：[Sa + Da - Sa_Da, Sc_(1 - Da) + Dc*(1 - Sa) + max(Sc, Dc)]

效果如下（这里把背景颜色改成了绿色）：

在这里插入图片描述

当只有两个颜色相交时，才会有颜色的变化。

这就和我们在PS中，有两个图片，一个是没什么光影的物品图片，一个是有一个只有亮光的图片，P在一起后，这个物品就好像被灯照亮了一般。

3、Mode.DARKEN(变暗)

对应算法：[Sa + Da - Sa_Da, Sc_(1 - Da) + Dc*(1 - Sa) + min(Sc, Dc)]

效果如下：

在这里插入图片描述

没什么好说的。

4、Mode.MULTIPLY(正片叠底)

对应的算法：[Sa * Da, Sc * Dc]

这个算法简单一点，可以研究一下， 其中最终的Alpha值时 Sa*Da，就是源图像的Alpha值乘以目标图像的Alpha值，那么区域二的alpha就是0，效果如下：

在这里插入图片描述

5、Mode.OVERLAY(叠加)

官方没有给出算法，效果如下：

在这里插入图片描述

应该是相交的部分进行了叠加。非相交区域都还在。

6、Mode.SCREEN(滤色)

对应的算法：[Sa + Da - Sa * Da, Sc + Dc - Sc * Dc]

效果如下：

在这里插入图片描述

就是对颜色进行了过滤吧。

到这里，6中混合模式就讲完了，下面说下总结：

  1. 这几种模式都是PhotoShop中存在的模式，是通过计算改变相交区域的颜色值的

  2. 除了Mode.MULTIPLY会在目标图像透明时，将结果对应区域设置为透明，其他图像都不受目标图像的影响，即区域二保持原样。

  3. 在

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》

【docs.qq.com/doc/DSkNLaERkbnFoS0ZF】 完整内容开源分享

考虑混合模式时，一般只考虑两种：

1、像 区域一 一样的两个不透明区域的混合

2、像 区域二 一样的完全透明区域的混合。

对于与半透明区域的混合，实战中一般是用不到的。

PorterDuffXfermode之源图像模式

下面介绍混合模式中以源图像显示为主的模式，如果在实战中遇到相交，并且想显示源图像，则需要考虑下面的几个Mode：

Mode.SRC, Mode.SRC_IN, Mode.OUT, Mode.SRC_OVER, Mode.SRC_ATOP

7、Mode.SRC

对应的算法：[Sa, Sc]

简单粗暴的显示SRC图像：

在这里插入图片描述

8、Mode.SRC_IN

对应的算法：[Sa * Da, Sc * Da]

该公式中，结果只的透明度和颜色有Sa、Sc分别乘Da，就是如果有相交的地方，则显示源文件的颜色。而如果目标像素为空白像素时，结果也为空白。

在这里插入图片描述

可以看到SRC和SRC_IN的区别是:

(1)SRC下源图像会在覆盖目标图像的同时，自己没相交的地方也会出现

(2)SRC_IN在相交区域内（区域一）显示源图像，而在未相交的区域显示目标图像或者透明

根据SRC_IN，我们可以实现很多效果，比如目标图像是个圆形，源图像是个矩形头像，这样一混合，就能成为圆形的头像！

因为SRC_IN是根据目标图像的透明值来计算结果的透明和颜色的，所以当目标的透明值在0-255间时，结果值时会变小的，我们可以根据SRC_IN的特性来实现倒影效果。（因为没有找到透明的图片，这里就用文字阐述了）

  • 首先拿到源图像、目标图像（这是一个遮罩图），用Matrix矩阵将源图像进行翻转(matrix.setScale(1f,-1f))得到翻转后的源图像

  • 先绘制源图像，然后画布向下移，以翻转后的源图像做为源图像，遮罩图作为目标图像，进行SRC_IN混合，就可以得到倒影图。

9、Mode.SRC_OUT

对应的算法为：[Sa * (1 - Da), Sc * (1 - Da)]

在这里插入图片描述

从公式Sa*(1-Da)看出，当目标图像完全不透明时，结果算出来会使透明的。

所以SRC_OUT的特性可以理解为：以目标图像的透明度的补值来调节源图像的透明度和饱和度。

示例一：橡皮檫效果：

我们可以根据手势轨迹来对图片擦除，很明显，要擦除的图片是源图像，而手势轨迹所在的图像是目标图像。当手指在滑动时，应该产生不透明的目标图像，和源图像SRC_OUT结合，源图像就会产生擦除效果。

首先，先初始化控件：

public EraserView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

setLayerType(LAYER_TYPE_SOFTWARE, null);

mPitPaint = new Paint();

mPitPaint.setColor(Color.RED);

mPitPaint.setStyle(Paint.Style.STROKE);

mPitPaint.setStrokeWidth(40);

srcBmp = BitmapFactory.decodeResource(getResources(), R.drawable.ic_jojo3);

dstBmp = Bitmap.createBitmap(srcBmp.getWidth(), srcBmp.getHeight(), Bitmap.Config.ARGB_8888);

mPath = new Path();

}

然后监听手势滑动，下面对滑动轨迹也是用了贝济埃曲线去计算：

@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);

}

然后就是绘制了，我们先把目标图像（手势滑动）给画在画布上，然后当进行滑动的时候，用drawPath去绘制目标图像的具体形状，再用源图像和滑动的图像做SRC_OUT的混合。

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//先把手势轨迹滑到目标图像上

int layerId = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);

Canvas c = new Canvas(dstBmp);

c.drawPath(mPath, mPitPaint);

//再把目标图像画到画布上

canvas.drawBitmap(dstBmp, 0, 0, mPitPaint);

//计算源图像区域

mPitPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));

canvas.drawBitmap(srcBmp, 0, 0, mPitPaint);

mPitPaint.setXfermode(null);

canvas.restoreToCount(layerId);

}

效果如下：

在这里插入图片描述

示例二 刮刮乐效果

因为刮刮乐其实就是橡皮檫效果演变而来的，所以这里再做一个刮刮乐的效果。

其实很简单，就是在onDraw最开始的时候，在最底层画一个bitmap

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

//先画出低层的结果图片

canvas.drawBitmap(innerBmp, null, new RectF(0, 0, dstBmp.getWidth(), dstBmp.getHeight()), mPitPaint);

。。。。

}

效果如下：

在这里插入图片描述

10、Mode.SRC_OVER

对应的算法： [Sa + (1 - Sa)*Da, Rc = Sc + (1 - Sa)*Dc]

公式可以看出，如果源图像的alpha为100时，就完全显示源图像

效果如下：

在这里插入图片描述

11、Mode.SRC_ATOP

对应的算法为：[Da, Sc * Da + (1 - Sa) * Dc]

可以看到结果Alpha值为Da，也就是目标图像，颜色是当如果源图像alpha为100%时的Sc*Da

大概就是显示目标图像中的源图像。这又和SRC_IN的效果相同了，其实对比公式，可以知道，在透明度100%和0%时，SRC_IN和SRC_ATOP的效果的确是一样的。

在这里插入图片描述

目标图像模式与其他模式

上面说的是源图像模式，就是在混合时，以源图像的显示为主，那么这一节就是将以目标图像的显示为主。

涉及的mode为 Mode.DST、Mode.DST_IN、Mode.DST_OUT、Mode.DST_OVER、Mode.DST_ATOP

12、Mode.DST

对应的算法：[Da, Dc]

完全显示目标图像：

在这里插入图片描述

13、Mode.DST_IN

对应的算法：[Sa * Da, Sa * Dc]

当源图像的alpha为0时，完全不显示，显示的颜色为源图像的alpha乘以目标图像的颜色。

效果如下：

在这里插入图片描述

14、Mode.DST_OUT

计算公式如下：[Da * (1 - Sa), Dc * (1 - Sa)]

可以看出，如果当源图像的透明度为100%，则区域一完全不显示，效果如下：

在这里插入图片描述

15、Mode.DST_OVER

对应的算法：[Sa + (1 - Sa)*Da, Rc = Dc + (1 - Da)*Sc]

这里顾名思义(OVER就是覆盖的意思咯)，效果如下：

在这里插入图片描述

m0_64382950
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android绘图基础之xfermode & layer
crazy_jack
06-28 1885
转载请注明出处：http://blog.csdn.net/crazy1235/article/details/73835933 layer xfermode CLEAR DST SRClayerandroid的绘图机制有点类似于 [PhotoShop] 的方式！可以分成很多个图层（layer）每个图层绘制自己的内容，然后图层之间可以合并！（图片转自网络）Api 中关于图层的操作有如下几个函数： sa
android中Xfermode的使用
SpringQi
04-20 2262
通过使用Xfermode将绘制的图形的像素和Canvas上对应位置的像素按照一定的规则进行混合，形成新的像素，再更新到Canvas中形成最终的图形。 我们一个像素的颜色都是由四个分量组成，即ARGB，A表示的是我们Alpha值，RGB表示的是颜色 S表示的是源像素，源像素的值表示[Sa,Sc] Sa表示的就是源像素的Alpha值，Sc表示源像素的颜色值 D表示的是目标像素，目标像素的值表示[Da,...
2024年安卓最全Android Xfermode 实战 实现圆形、圆角图片，2024年最新2024甘肃选调生面试题目
最新发布
2401_84562576的博客
05-06 843
放到一篇里面，结果由于篇幅原因就独立出来了~在很久以前也写过一个利用Xfermode 实现圆形、圆角图片的，但是那个继承的是View，其实继承ImageView能方便点，最起码省去了onMeasure里面自己去策略，以及不需要自己去提供设置图片的方法，最主要的是大家对ImageView的API会比较熟悉，用起来会比较顺手。网上学习 Android的资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。缩放后的图片的宽高，一定要大于我们view的宽高；
自定义View—使用Xfermode实现圆角图片
海的鼻涕的博客
06-06 1588
有些时候，棱角分明的矩形可能不满足我们的需求。我们希望图片是圆角，显得图片更加圆滑，例如手q的头像是圆形的。虽说我到现在没做过一个像样的项目，但是还是先学习下，厉兵秣马。这篇博客主要学习自hongyang前辈的教程，同时也增加自己，作为一个新手，的学习过程，使之详细。此次的圆角图片继承自ImageView，这样可以节省onMeasure步骤。Xfermode和他的儿子们实现圆角图片，我们需要用到Xf
Android setXfermode使用
qq_29014845的博客
06-21 245
要实现setXfermode的效果：1、关闭硬件加速2、必须是两个Bitmap参考资料：https://blog.csdn.net/u010335298/article/details/51983420https://blog.csdn.net/hiyohu/article/details/12509731...
《Android---简单的自定义加载控件及Xfermode的使用》
IT痴者
03-20 170
部分代码 @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { super.onLayout(changed, left, top, right, bottom); int width = getMeasuredWidt...
《Android自定义控件入门到实战》源码2018.10
11-23
来自官网的源码，直接下载后搬运到这里，
android开发入门与实战(下)
01-19
第2章 工欲善其事 必先利其器——搭建Android开发环境 2.1 开发Android应用前的准备 2.1.1 Android开发系统要求 2.1.2 Android软件开发包 2.1.3 其他注意事项 2.2 Windows开发环境搭建 2.2.1 JDK、Eclipse、Android...
Android xformode属性
zuochunsheng的博客
03-05 631
参考 android xfermode绘图setXfermode属性w3c svg官方
新手引导之控件高亮显示
rrkdddd33的博客
12-17 1280
最近项目需要做一个新手引导的功能， 即某个功能控件高亮，其他部分覆以蒙版效果，如下图所示： 实现步骤如下： 自定义view  重写onDraw(Canvas canvas)                        1 绘制一个屏幕大小的遮罩层              bitmap = Bitmap.createBitmap(canvas.getWidth(), canv
Android 理解PorterDuffXfermode叠加模式
fz_dev的博客
05-24 2291
关于PorterDuffXfermode的讲解在网上有很多相关的教程，以下只是针对我自己在使用过程中遇到的问题做补充说明： 以上所有格子应该看做一张图片（包括图片的大小） src需要是一张图片，才能体现周边的透明度 怎么理解这句话呢？ 如果在View的Canvas上绘制src，比如drawCircle(xxx),所代表的区域仅仅是圆形的区域或圆环的区域，此刻的相
Android自定义控件入门到精通--Xfermode
Jhone_csdn的专栏
06-22 399
文章目录XfermodePorterDuff.Mode示例一：轨迹截图示例二：绘画板示例三：图片上色动画（进度演示？）Xfermode的脏区及解决办法示例四：刮刮卡效果 Xfermode Xfermode在Android高版本中只保留了一个实现类PorterDuffXfermode，在Android24及以下低版本中，你还可以看到另外两个实现类AvoidXfermode，PixelXorXfermode，高版本已移除了，这里就不展开讲了，其中AvoidXfermode可以用于做选区和选区填充，非常强大，但
Android图形图画学习(3)——Xfermode
u012604322的专栏
10-29 803
Paint.setXfermode(Xfermode)定义了两张图片相交时的模式： 首先说明它的用法通常如下借助其子类： paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN)); 下图显示了所有定义的模式应用时的情形： 其中dst表示画布上原有的位图，src表示新画上去的位图。注意它是与位图相关的。
Android高级-Paint-滤镜，XFEMODE
u013815832的博客
11-13 281
Paint 颜色相关 Pain的setShader设置着色器，最后一种混合模式中的ComposeShader ，构造方法中传入了 PorterDuff.Mode Xfermode 两个图层混合模式 我们先看PorterDuff.Mode 图层混合一般会使用三种方式： 第一：ComposeShader 构造方法中会设置图层混合规则 第二：Paint 的方法中有mPai...
Android Shaper： Paint.Xfermode和Path，实现图片圆角效果
PoetKing
10-23 1020
以前不论是圆角图片还是圆形图片，一般都是通过重新创建一个对应形状的Bitmap，然后重新设置。现在找到了一个好的方法，就是利用Xfermode的图片渲染合成原理，然后使用Path构造我们需要的效果范围，在onDraw的时候，将范围外的所有部分过滤掉。看效果图： 其实实现原理非常简单，并且可以无限扩展。 public abstract class Shaper { privat
Android图像处理（四）Xfermode和BitmapShader
DuanLiuchang的博客
06-03 1556
Xfermode 先画的为Dst 后画的为Src 只适用于具有alpha通道的图片 圆角矩形 public class RoundRectXfermodeView extends View { private Bitmap mBitmap; private Bitmap mOut; private Pa
android的xfermode总结
weixin_34122810的博客
11-21 88
2019独角兽企业重金招聘Python工程师标准>>> ...
Android 绘图进阶（二）：Xfermode（画笔风格）绘制涂层
danfengw的博客
09-18 1618
如果你对PorterDuff与Xfermode不够了解可以参看我之前的博客Android 绘图进阶（一），上篇博客介绍了Xfermode的SRC_IN的画笔风格的使用实例，这篇博客介绍一下它的一种涂层效果（XOR）。方案一：圆形画板擦一、思路 　　根据graphic图我们可以使用看出Xor效果实现的就是相交部分会露出底部图片。因此我们需要设置一个底部的背景（BitmapBackground），我是
Android Xfermode
qq_39197781的博客
07-23 616
       Xfermode图片混合模式，为什么会有这个东西呢，其实可以类比photoshow的图层，好的不知道。再来，也就是假设我们要在某个图纸上画画，左手画圆，右手画方。然后它们要是互不相干，那自然皆大欢喜，但是如果有相交重叠的部分，如何处理这就是Xfermode要处理的东西了。先上一张图。这张是你选择的这种混合模式应该出现的效果，但可能并不是这么理想，往下看~      &nbs
WinForm控件开发总结.docx
03-05
首先，WinForm控件开发主要分为三类：复合控件、扩展控件和自定义控件。复合控件是将多个现有控件组合在一起，形成新的功能集；扩展控件是基于现有控件进行派生，添加或修改功能；而自定义控件是从System.Windows....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值