Paint高级应用
1.概念
画笔,保存了绘制几何图形,文本和维度的样式和颜色信息
2.常用API
private void init() {
mPaint = new Paint();
mPaint.setColor(Color.RED);//设置颜色
mPaint.setARGB(255, 255, 255, 0);//设置Paint对象颜色,范围为0-255
mPaint.setAlpha(200);//设置alpha不透明度,范围为0-255
mPaint.setAntiAlias(true);//抗锯齿
mPaint.setStyle(Paint.Style.STROKE);//描边效果;
mPaint.setStrokeWidth(3);//描边宽度
mPaint.setStrokeJoin(Paint.Join.MITER);//拐角风格
mPaint.setStrokeCap(Paint.Cap.ROUND);//圆角效果
mPaint.setShader(new SweepGradient(200, 200, Color.BLUE, Color.BLACK));//设置环形渲染器
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DARKEN));//设置图层混合模式
mPaint.setColorFilter(new LightingColorFilter(0x00ffff, 0x00000));//设置颜色过滤器
mPaint.setFilterBitmap(true);//设置双线性过滤
mPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.INNER));//设置画笔遮罩滤镜,传入度数和样式
mPaint.setTextScaleX(2);//设置文本缩放倍数
mPaint.setTextSize(23);//设置字体大小
mPaint.setTextAlign(Paint.Align.CENTER);//设置文本对齐方式
mPaint.setUnderlineText(true);//设置下划线
String str = "Android开发";
mPaint = new Paint();
Rect rect = new Rect();
mPaint.getTextBounds(str, 0, str.length(), rect);//测试文本大小,将文本大小信息放在rect中
mPaint.measureText(str);//获取文本的宽
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();//获取字体度量对象
float ascent = fontMetrics.ascent;
Log.e(TAG, "ascent: "+ascent+"---"+
"bottom: "+fontMetrics.bottom+"---"+
"descent: "+fontMetrics.descent+"---" +
"leading: "+fontMetrics.leading+"---" +
"top: "+fontMetrics.top+"---" );
}
以上这些是常用API,部分API的详细记录一下
(1)mPaint.setStyle(Paint.Style.STROKE);//描边效果;
这个主要有这几种效果 下图,,
STROKE :就是下图圆环的效果同时通过mPaint.setStrokeWidth(20)可以设置圆环的宽度;
FILL:就是中间那个圆效果实心圆;
FILL_AND_STROKE:这个看名称就懂了,就是这两个的合体吧所以和FILL效果一样
WechatIMG469.png
(2)setStrokeCap //圆角效果
ROUND
BUTT
SQUARE
图片.png
(3)paint.setStrokeJoin(Paint.Join.MITER);
这个主要是用来设置拐角效果如下图
/**
* The outer edges of a join meet at a sharp angle
*/
MITER (0),
/**
* The outer edges of a join meet in a circular arc.
*/
ROUND (1),
/**
* The outer edges of a join meet with a straight line
*/
BEVEL (2);
图片.png
(4)setFilterBitmap(true)
设置了这个后为true后我们可以发现打了马赛克样式的图片看着背景变虚化了
图片.png
(5)mPaint.getFontMetrics();//获取字体度量对象
String str = "Android开发";
mPaint = new Paint();
Rect rect = new Rect();
mPaint.getTextBounds(str, 0, str.length(), rect);//测试文本大小,将文本大小信息放在rect中
mPaint.measureText(str);//获取文本的宽
Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();//获取字体度量对象
float ascent = fontMetrics.ascent;
Log.e(TAG, "ascent: "+ascent+"---"+
"bottom: "+fontMetrics.bottom+"---"+
"descent: "+fontMetrics.descent+"---" +
"leading: "+fontMetrics.leading+"---" +
"top: "+fontMetrics.top+"---" );
给大家来张图
图片.png
这个是我看网易Android课程老师讲解放上去的图,我顺便截图了,刚开始看着图还是不太理解的,最后自己写个demo打印了这几个参数才明白的,如下:
图片.png
通过以上如果我们需要计算字体的高度可以通过:ascent+descent=字体高度
Paint基本属性就大概先了解这么多
3.Paint颜色相关
(1)setColor(int color)
(2)setARGB(int a,int r,int g,int b)
(3)setShader(Shader s)参数着色器对象,一般使用shader的几个子类
下面就是shader的几个子类详解
①LinearGradient线性渲染
构造方法:
mLinearGradient = new LinearGradient(0, 0, 500, 500, new int[]{Color.GREEN, Color.RED}, new float[]{0.5f, 1}, Shader.TileMode.CLAMP);
参数比较多
(x0,y0,x1,y1)前四个参数就是两个端点的位置比如 (0,0) (500,500)就是屏幕左上角到(500,500)这个位置这两个点之间的渐变过程 我们想象画一个矩形或者圆形就明白了
int[] colors 渐变颜色值
float[] {0.5f,1} 表示颜色占据的渲染比例(可以为空)
效果图
图片.png
②RadialGradient环形渲染
/**
* Create a shader that draws a radial gradient given the center and radius.
*
* @param centerX 辐射中心的X坐标
* @param centerY 辐射中心的Y坐标
* @param radius 辐射半径
* @param colors 辐射渐变颜色数组
* @param stops 辐射渐变位置数组
* @param tileMode 辐射范围之外的着色模式 shader模式
* @param centerColor 中心点渐变颜色
* @param edgeColor 边界渐变颜色
*/
mShader = new RadialGradient(250,250,250,
new int[]{Color.RED,Color.GREEN}, null,Shader.TileMode.CLAMP);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);
效果如下:
图片.png
③扫描渲染
/**
* A Shader that draws a sweep gradient around a center point.
*
* @param cx The x-coordinate of the center 扫描中心x轴
* @param cy The y-coordinate of the center 扫描中心位置y轴
* @param color0 The color to use at the start of the sweep 扫描开始颜色
* @param color1 The color to use at the end of the sweep 扫描终止颜色
*/
mShader = new SweepGradient(250, 250, Color.RED, Color.GREEN);
mPaint.setShader(mShader);
canvas.drawCircle(250, 250, 250, mPaint);
效果图:
图片.png
④位图渲染
原本是这样一张图
图片.png
/**
* Call this to create a new shader that will draw with a bitmap.
*
* @param bitmap The bitmap to use inside the shader 这个不用说了吧
* @param tileX The tiling mode for x to draw the bitmap in. x轴方向的mode
* @param tileY The tiling mode for y to draw the bitmap in. y轴方向的mode
*/
mShader = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
mPaint.setShader(mShader);
canvas.drawRect(0, 0, 5000, 5000, mPaint);
添加位图渲染后 挺好看的哈
图片.png
我们可以通过切换不同的mode查看具体效果,这里就不做一一演示了
三种模式的的具体介绍
图片.png
⑤组合渲染
Shader mShaderA = new SweepGradient(250, 250, Color.RED, Color.GREEN);
Shader mShaderB = new BitmapShader(mBitmap, Shader.TileMode.REPEAT, Shader.TileMode.MIRROR);
/**
* 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
* @param shaderB
* @param mode 组合两种shader的颜色模式
* @Parm Xfermode 组合两种shader的颜色模式
* ComposeShader有两种构造方法 Xfermode后面说
*/
// mShader = new ComposeShader( Shader shaderA, Shader shaderB, Xfermode mode);
mShader = new ComposeShader(mShaderA, mShaderB, PorterDuff.Mode.ADD);
mPaint.setShader(mShader);
canvas.drawRect(0, 0, 5000, 5000, mPaint);
这里我就把上面的扫描渲染和位图渲染组合在了一起 效果图如下:
图片.png
有点美图的感觉吧哈哈
4.Paint滤镜,Xfermode
后面再讲.....这里还没来得及看