Android 绘图学习
android绘图之Paint(1)
android绘图之Canvas基础（2）
Android绘图之Path（3）
Android绘图之drawText绘制文本相关（4）
Android绘图之Canvas概念理解（5）
Android绘图之Canvas变换（6）
Android绘图之Canvas状态保存和恢复（7）
Android绘图之PathEffect （8）
Android绘图之LinearGradient线性渐变（9）
Android绘图之SweepGradient（10）
Android绘图之RadialGradient 放射渐变（11）
Android绘制之BitmapShader（12）
Android绘图之ComposeShader，PorterDuff.mode及Xfermode（13）
Android绘图之drawText,getTextBounds,measureText,FontMetrics,基线（14）
Android绘图之贝塞尔曲线简介（15）
Android绘图之PathMeasure（16）
Android 动态修改渐变 GradientDrawable
ComposeShader，PorterDuff.mode及Xfermode
1 ComposeShader 简介
ComposeShader 组合另外两种shader的效果。
ComposeShader构造函数：
/**
* Create a new compose shader, given shaders A, B, and a combining mode.
* When the mode is applied, it will be given the result from shader A as its
* "dst", and the result from shader B as its "src".
*
* @param shaderA The colors from this shader are seen as the "dst" by the mode
* @param shaderB The colors from this shader are seen as the "src" by the mode
* @param mode The mode that combines the colors from the two shaders. If mode
* is null, then SRC_OVER is assumed.
*/
public ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, @NonNull Xfermode mode) ；
/**
* Create a new compose shader, given shaders A, B, and a combining PorterDuff mode.
* When the mode is applied, it will be given the result from shader A as its
* "dst", and the result from shader B as its "src".
*
* @param shaderA The colors from this shader are seen as the "dst" by the mode
* @param shaderB The colors from this shader are seen as the "src" by the mode
* @param mode The PorterDuff mode that combines the colors from the two shaders.
*/
public ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB,
@NonNull PorterDuff.Mode mode) ；
参数说明：
shaderA,shaderB:要混合的两种shader，
Xfermode mode： 组合两种shader颜色的模式，
PorterDuff.Mode mode: 组合两种shader颜色的模式。
2 Xfermode是什么呢？
Xfermode称为图形混合模式也被称为过渡模式，把两个图形混合成一张图。
Xfermode 实现类有AvoidXfermode，PixelXorXfermode，PorterDuffXfermode，但是AvoidXfermode，PixelXorXfermode都已经被标识不推荐使用了，所以就只有PorterDuffXfermode一个实现类。PorterDuffXfermode用于图形合成时的图像过渡模式计算。
前两个实现类在API level 16被标记为Deprecated了（因为不支持硬件加速），用也可以，但是需要关闭硬件加速，高版本api默认打开硬件加速，如果需要关闭硬件加速，无法发挥OpenGLes的作用，也就无法充分利用GPU绘图能力，有关硬件加速请看https://developer.android.com/guide/topics/graphics/hardware-accel；
不同版本对硬件加速的支持程度（摘抄自官网）:
构造函数：
PorterDuffXfermode(PorterDuff.Mode mode)
mode：混合图像模式。
代码示例：
canvas.drawColor(Color.WHITE);
RectF rectF = new RectF(0, 0, width, height);
canvas.saveLayer(rectF,mPaint);
canvas.drawBitmap(dstBmp, 0, 0, mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(srcBmp, 0, 0, mPaint);
mPaint.setXfermode(null);
canvas.restore();
3 什么是PorterDuff.Mode?
Porter–Duff 分别是发明“Compositing Digital Images”两位学者的名字缩写，图形混合有很多种模式。PorterDuff.Mode分为Alpha合成模式和混合模式。图像合成就是将源像素和背景像素的颜色进行混合，最终显示的颜色取决于其RGB颜色分量和Alpha值。
Android 中PorterDuff.Mode模式包括：
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;
Mode.XOR;
Mode.DARKEN;
Mode.LIGHTEN;
Mode.MULTIPLY;
Mode.SCREEN;
Mode.ADD;
Mode.OVERLAY;
关于PorterDuff.Mode的详细说明，请看android Developer的官网说明：https://developer.android.com/reference/android/graphics/PorterDuff.Mode
比较旧的混合标识图片：
新的标识模式说明：
原图，目标图：先绘制的是目标图，后绘制的是原图。
举例说明：
目标图片：
源图片：
CLEAR：
清除模式，[0, 0]，即图像中所有像素点的alpha和颜色值均为0，此时所有图片不显示，所以在学习Canvas，可以设置画笔的Xfermode，mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));可以清空画布。
SRC：
只保留原图像的 alpha 和 color ，所以绘制出来只有源图。
DST：
只保留了目标图像的alpha和color值，所以绘制出来的只有目标图。
SRC_OVER： 源图像被绘制在目标图像的上方
DST_OVER： 目标图像被绘制在源图像的上方
SRC_IN： 在两者相交的地方绘制源图像，并且绘制的效果会受到目标图像对应地方透明度的影响
DST_IN： 与SRC_IN 对比，在两者相交的地方绘制目标图像，并且绘制的效果会受到源图像对应地方透明度的影响
SRC_OUT： 在不相交的地方绘制源图像，表示如果相交处的目标色的alpha是完全不透明的，这时候源图像会完全被过滤掉，否则会受到相交处目标色 alpha 影响，呈现出对应色值。
**DST_OUT：**对比SRC_OUT , 在不相交的地方绘制目标图像，相交处根据源图像alpha进行过滤，完全不透明处则完全过滤，完全透明则不过滤。
SRC_ATOP： 源图像和目标图像相交处绘制源图像，不相交的地方绘制目标图像，并且相交处的效果会受到源图像和目标图像alpha的影响
DST_ATOP： 源图像和目标图像相交处绘制目标图像，不相交的地方绘制源图像，并且相交处的效果会受到源图像和目标图像alpha的影响
XOR： 在不相交的地方按原样绘制源图像和目标图像，相交的地方受到对应alpha和颜色值影响，按公式进行计算，如果都完全不透明则相交处完全不绘制。
DARKEN： 效果变暗，即进行对应像素的比较，取较暗值，如果色值相同则进行混合。
LIGHTEN： 对比DARKEN ，DARKEN 的目的是变暗，LIGHTEN 的目的则是变亮，如果在均完全不透明的情况下，色值取源色值和目标色值中的较大值，否则按上面算法进行计算。
MULTIPLY： 正片叠底，源图像素颜色值乘以目标图像素颜色值除以255得到混合后图像像素颜色值。结果色总是较暗的颜色，任何颜色与黑色复合产生黑色，任何颜色与白色复合保持不变，当用黑色或白色以外的颜色绘画时，绘画工具绘制的连续描边产生逐渐变暗的颜色。
SCREEN： 滤色，保留两个图层中较白的部分，较暗的部分被遮盖；当一层使用了滤色（屏幕）模式时，图层中纯黑的部分变成完全透明，纯白部分完全不透明，其他的颜色根据颜色级别产生半透明的效果。
ADD： 饱和度相加，不常用
OVERLAY： 像素是进行 Multiply （正片叠底）混合还是 Screen （屏幕）混合，取决于底层颜色，但底层颜色的高光与阴影部分的亮度细节会被保留。
4 paint.setXfermode
只对bitmap起作用，修改developer的原图目标图，边上变成透明：
代码说明：
生成两张700*700的图片，在图片的内部绘制两个能够相交的图形，然后在view中分别绘制两个bitmap，就可以看到上面的结果，注意由于两个图片一样大，所以不想交的部分会受另外一张图的透明度的影响。
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.view.MotionEvent;
import android.view.View;
public class ViewDemo12 extends View {
private int width = 700;
private int height = 700;
private Bitmap dstBmp;
private Bitmap srcBmp;
private Paint mPaint;
public ViewDemo12(Context context, AttributeSet attrs) {
super(context, attrs);
dstBmp = makeDst(width,height);
srcBmp = makeSrc(width,height);
mPaint = new Paint();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
RectF rectF = new RectF(0, 0, 700, 700);
canvas.saveLayer(rectF,mPaint);
canvas.drawBitmap(dstBmp, 0, 0, mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.OVERLAY));
canvas.drawBitmap(srcBmp, 0, 0, mPaint);
mPaint.setXfermode(null);
canvas.restore();
}
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(0xFFE91E63);
c.drawOval(new RectF(200, 20, 700, 520), p);
return bm;
}
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(0xFF2196F3);
c.drawRect(20, 200,520,700, p);
return bm;
}
}
5 setXfermode 应用
前面我们利用BitmapShader实现了不同形状的图形，利用Xfermode也可以实现，利用SRC_IN。
public class ViewDemo13 extends View {
private int width = 700;
private int height = 700;
private Bitmap dstBmp;
private Bitmap srcBmp;
private Paint mPaint;
public ViewDemo13(Context context, AttributeSet attrs) {
super(context, attrs);
dstBmp = BitmapFactory.decodeResource(getResources(), R.drawable.hongbao);
width = dstBmp.getWidth();
height = dstBmp.getHeight();
srcBmp = makeSrc(width,height);
mPaint = new Paint();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
RectF rectF = new RectF(0, 0, width, height);
canvas.saveLayer(rectF,mPaint);
canvas.drawBitmap(dstBmp, 0, 0, mPaint);
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
canvas.drawBitmap(srcBmp, 0, 0, mPaint);
mPaint.setXfermode(null);
canvas.restore();
}
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(0xFFFFFFFF);
p.setStyle(Paint.Style.FILL);
c.drawRoundRect(0, 200,520,700,30,30, p);
return bm;
}
}
除此之外还能实现图片变亮，图片局部变暗，图片显示一部分，图片擦除等等诸多效果。
6 ComposeShader
混合两种shader，shader可以是BitmapShader,LinearGradient,RadialGradient,SweepGradient，所以可以有很多种组合。由于最后一个参数跟PorterDuff.mode有关，所以mode应用时将把从shaderA（ComposeShader 第一个参数）中获取的结果作为目标图像，shaderB（ComposeShader第二个参数）中获取的结果作为源图像，进行混合叠加。如果相交的两个图像大小不同，就会存在不想交的部分，不想交的部分是不会相互影响的，下面给出的示例代码，是两个大小相同的图像，完全透明，内部绘制了不透明的图形。
public class ViewDemo14 extends View {
private int width = 700;
private int height = 700;
private Bitmap dstBmp;
private Paint mPaint;
BitmapShader bitmapShader;
LinearGradient linearGradient;
public ViewDemo14(Context context, AttributeSet attrs) {
super(context, attrs);
dstBmp = BitmapFactory.decodeResource(getResources(), R.drawable.hongbao);
width = dstBmp.getWidth();
height = dstBmp.getHeight();
bitmapShader = new BitmapShader(dstBmp, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
linearGradient = new LinearGradient(0, 0, width, height, Color.RED, Color.GREEN, Shader.TileMode.CLAMP);
mPaint = new Paint();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawColor(Color.WHITE);
RectF rectF = new RectF(0, 0, width, height);
canvas.saveLayer(rectF,mPaint);
ComposeShader composeShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.ADD);
mPaint.setShader(composeShader);
canvas.drawRect(0, 0, width,height,mPaint);
mPaint.setXfermode(null);
canvas.restore();
}
}
由于内容较多，本篇只是概述，后面会更加详细的讲解PorterDuff.mode及Xfermode。
558
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
