Android UI Paint画笔原理

Paint 概念

画笔，保存了绘制几何图形、文本和位图的样式和颜色信息

Paint p= new Paint();
p.setColor(Color.RED);
p.setARGB(255, 255, 255, 0); // 设置颜色
p.setAlpha(200);// 透明度 0-255
p.setAntiAlias(true); // 抗锯齿
p.setStyle(Paint.Style.STROKE); // STROKE描边效果 FILL填充效果
p.setStrokeWidth(4); // 描边宽度
p.setStrokeCap(Paint.Cap.ROUND); // 圆角效果 BUTT正常 ROUND圆角
p.setStrokeJoin(Paint.Join.MITER); // 拐角风格 
p.setShader(new SweepGradient(200, 200, Color.BLUE, Color.RED)); // 设置扫描渲染器
p.setXfermode(new PorterDuffxfermode(ProterDuff.Mode.DARKEN)); // 设置图层混合模式
p.setColorFilter(new LightingColorFilter(0x00ffff, 0x000000)); //  设置颜色过滤器
p.setFilterBitmap(true) ; // 设置双线性过滤。双线性让颜色过渡更平滑
p.setMaskFilter(new BlueMaskFilter(10, BlurMaskFilter.Blue.NORMAL)); // 画笔遮罩滤镜
p.setTextScalex(2); // 设置文本缩放倍数
p.setTextSize(30) ; // 字体大小
p.setTextAlign(Paint.Align.LEFT);
p.setUnderlineText(true); // 设置下划线

String str = "xxxxxx";
Rect rect = new Rect(); // 矩形区域
p.getTextBounds(str, 0, str.length, rect) ; // 测量文本大小
p.measureText(str); // 获取文本的宽
p.getFontMetrics(); // 获取字体度量对象

字体度量对象

baseline 字符基线
ascent 最高点到baseline的推荐距离
top 字符最高点到baseline的最大距离
descent 字符最低点到baseline的推荐距离
bottom 字符最低点到baseline的最大距离
leading 行间距上一行的descent与下一行的ascent的距离

渲染器

p.setShader(new SweepGradient(200, 200, Color.BLUE, Color.RED)); // 设置扫描渲染器
LinearGradient: 线性渲染
RadialFradient: 环形渲染
SweepGradient: 扫描渲染
BitmapShader : 位图渲染
ComposeShader : 组合渲染

线性渲染

 /**                                                                                                                                                            
  * 1.线性渲染,LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[], @Nullable float positions[], @NonNull TileMode tile)         
  * (x0,y0)：渐变起始点坐标                                                                                                                                             
  * (x1,y1):渐变结束点坐标                                                                                                                                             
  * color0:渐变开始点颜色,16进制的颜色表示，必须要带有透明度                                                                                                                           
  * color1:渐变结束颜色                                                                                                                                               
  * colors:渐变数组                                                                                                                                                 
  * positions:位置数组，position的取值范围[0,1],作用是指定某个位置的颜色值，如果传null，渐变就线性变化。                                                                                            
  * tile:用于指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法                                                                                                                         
  */                                                                                                                                                            
 mShader = new LinearGradient(0, 0, 500, 500, new int[]{Color.RED, Color.BLUE, Color.GREEN}, new float[]{0.f,0.7f,1}, Shader.TileMode.REPEAT);
 mPaint.setShader(mShader); 
 canvas.drawCircle(250, 250, 250, mPaint);
 canvas.drawRect(0,0,1000,1000, mPaint);

环形渲染

/**
 * 环形渲染，RadialGradient(float centerX, float centerY, float radius, @ColorInt int colors[], @Nullable float stops[], TileMode tileMode)
 * centerX ,centerY：shader的中心坐标，开始渐变的坐标
 * radius:渐变的半径
 * centerColor,edgeColor:中心点渐变颜色，边界的渐变颜色
 * colors:渐变颜色数组
 * stoops:渐变位置数组，类似扫描渐变的positions数组，取值[0,1],中心点为0，半径到达位置为1.0f
 * tileMode:shader未覆盖以外的填充模式。
 */
mShader = new RadialGradient(250, 250, 250, new int[]{Color.GREEN, Color.YELLOW, Color.RED}, null, Shader.TileMode.CLAMP);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);

扫描渲染

/**
 * 扫描渲染，SweepGradient(float cx, float cy, @ColorInt int color0,int color1)
 * cx,cy 渐变中心坐标
 * color0,color1：渐变开始结束颜色
 * colors，positions：类似LinearGradient,用于多颜色渐变,positions为null时，根据颜色线性渐变
 */
mShader = new SweepGradient(250, 250, Color.RED, Color.GREEN);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);

位图渲染

/**
* 位图渲染，BitmapShader(@NonNull Bitmap bitmap, @NonNull TileMode tileX, @NonNull TileMode tileY)
* Bitmap:构造shader使用的bitmap
* tileX：X轴方向的TileMode
* tileY:Y轴方向的TileMode
 REPEAT, 绘制区域超过渲染区域的部分，重复排版
 CLAMP， 绘制区域超过渲染区域的部分，会以最后一个像素拉伸排版
 MIRROR, 绘制区域超过渲染区域的部分，镜像翻转排版
*/
mShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
mPaint.setShader(mShader);
// canvas.drawRect(0,0,500, 500, mPaint);
canvas.drawCircle(250, 250, 250, mPaint);

组合渲染

/**
 * 组合渲染，
 * ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, Xfermode mode)
 * ComposeShader(@NonNull Shader shaderA, @NonNull Shader shaderB, PorterDuff.Mode mode)
 * shaderA,shaderB:要混合的两种shader
 * Xfermode mode： 组合两种shader颜色的模式
 * PorterDuff.Mode mode: 组合两种shader颜色的模式
 */
BitmapShader bitmapShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.REPEAT);
LinearGradient linearGradient = new LinearGradient(0, 0, 1000, 1600, new int[]{Color.RED, Color.GREEN, Color.BLUE}, null, Shader.TileMode.CLAMP);
mShader = new ComposeShader(bitmapShader, linearGradient, PorterDuff.Mode.MULTIPLY);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);

图层混合模式

//效果作用于src源图像区域
private static final Xfermode[] sModes = {
        //所绘制不会提交到画布上
        new PorterDuffXfermode(PorterDuff.Mode.CLEAR),
        //显示上层绘制的图像
        new PorterDuffXfermode(PorterDuff.Mode.SRC),
        //显示下层绘制图像
        new PorterDuffXfermode(PorterDuff.Mode.DST),
        //正常绘制显示，上下层绘制叠盖
        new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER),
        //上下层都显示，下层居上显示
        new PorterDuffXfermode(PorterDuff.Mode.DST_OVER),
        //取两层绘制交集，显示上层
        new PorterDuffXfermode(PorterDuff.Mode.SRC_IN),
        //取两层绘制交集，显示下层
        new PorterDuffXfermode(PorterDuff.Mode.DST_IN),
        //取上层绘制非交集部分，交集部分变成透明
        new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT),
        //取下层绘制非交集部分，交集部分变成透明
        new PorterDuffXfermode(PorterDuff.Mode.DST_OUT),
        //取上层交集部分与下层非交集部分
        new PorterDuffXfermode(PorterDuff.Mode.SRC_ATOP),
        //取下层交集部分与上层非交集部分
        new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP),
        //去除两图层交集部分
        new PorterDuffXfermode(PorterDuff.Mode.XOR),
        //取两图层全部区域，交集部分颜色加深
        new PorterDuffXfermode(PorterDuff.Mode.DARKEN),
        //取两图层全部区域，交集部分颜色点亮
        new PorterDuffXfermode(PorterDuff.Mode.LIGHTEN),
        //取两图层交集部分，颜色叠加
        new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY),
        //取两图层全部区域，交集部分滤色
        new PorterDuffXfermode(PorterDuff.Mode.SCREEN),
        //取两图层全部区域，交集部分饱和度相加
        new PorterDuffXfermode(PorterDuff.Mode.ADD),
        //取两图层全部区域，交集部分叠加
        new PorterDuffXfermode(PorterDuff.Mode.OVERLAY)
};

图层叠加API

// 禁用硬件加速
setLayerType(View.LAYER_TYPE_SOFTWARE, null);
// 使用离屏绘制
int sc = canvas.saveLayer(x, y, x + W, y + H, null);
canvas.translate(x, y);
canvas.drawBitmap(makeDst(2 * W / 3, 2 * H / 3), 0, 0, paint);
paint.setXfermode(sModes[i]);
canvas.drawBitmap(makeSrc(2 * W / 3, 2 * H / 3), W / 3, H / 3, paint);
paint.setXfermode(null);
canvas.restoreToCount(sc); // 将离屏的图像绘制到canvas上