Android图形处理-百变Paint
Paint的基本属性
在 Android图形处理-Canvas 已经有了基本的使用,但是这节介绍几个好玩的属性
设置阴影和渐变
设置渐变
主要是给画笔(Paint)设置一个Shader
sp161108_143636
Paint paint = new Paint();
LinearGradient linearShader = new LinearGradient(0, 0, 100, 100,
new int[]{Color.RED, Color.BLACK, Color.BLUE, Color.DKGRAY},
null, Shader.TileMode.CLAMP);
paint.setShader(linearShader);
canvas.drawCircle(100,100,100,paint);
LinearGradient是Shader的子类。其他子类:
sp161108_142705
LinearGradient构造方法的含义:
/** Create a shader that draws a linear gradient along a line.
@param x0 The x-coordinate for the start of the gradient line
@param y0 The y-coordinate for the start of the gradient line
@param x1 The x-coordinate for the end of the gradient line
@param y1 The y-coordinate for the end of the gradient line
@param colors The colors to be distributed along the gradient line
@param positions May be null. The relative positions [0..1] of
each corresponding color in the colors array. If this is null,
the the colors are distributed evenly along the gradient line.
@param tile The Shader tiling mode
*/
前两个参数是开始点,接下来是结束点,colors是颜色的数组,positions是分布的模式,tile是渐变的模式比如可重复等
设置阴影
paint.setShadowLayer(100,20,20,Color.RED);
paint.setColor(getResources().getColor(R.color.colorAccent));
canvas.drawCircle(100,100,50,paint);
核心是setShadowLayer
sp161108_144655
画笔效果
PathEffect
sp161108_145217
这个表示画笔的样式的基类
-
CornerPathEffect
CornerPathEffect cornerPathEffect = new CornerPathEffect(40);
paint.setPathEffect(cornerPathEffect);
sp161108_145557
构造参数表示拐角的半径
-
DiscretePathEffect
DiscretePathEffect discretePathEffect = new DiscretePathEffect(5.0f, 5.0f);
paint.setPathEffect(discretePathEffect);
第一个参数控制震动的频率,第二个参数控制震动的幅度
sp161108_145913
-
DashPathEffect
DashPathEffect dashPathEffect = new DashPathEffect(new float[]{8.0f, 6.0f, 7.0f, 4.0f}, 0);
paint.setPathEffect(dashPathEffect);
第一个参数是每个破折线(dash)的随机长度
sp161108_150434
-
PathDashPathEffect
Path path1 = new Path();
path1.addCircle(0,0,4, Path.Direction.CCW);
PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(path1, 30, 0, PathDashPathEffect.Style.ROTATE);
paint.setPathEffect(pathDashPathEffect);
这也是虚线但是这个虚线段是可以自己设置形状的
第一个参数是一个路径,但是这个路径要画出一个形状,第二个参数是两个虚线之间的距离
sp161108_150946
画出一个五角星,注意角度是18和36度:
Path path1 = new Path();
path1.moveTo(0, 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 200), 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100)-(float) Math.sin(Math.PI * 36 / 180) * 100,
100+(float) (Math.cos(Math.PI * 18 / 180) * 100));
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100),0);
path1.lineTo((float) (Math.cos(Math.PI * 18 / 180) * 100)+(float) Math.sin(Math.PI * 36/ 180) * 100,
100+(float) (Math.cos(Math.PI * 18 / 180) * 100));
path1.lineTo(0, 100-(float) Math.sin(Math.PI * 18 / 180) * 100);
sp161108_155132
在缩小之后把五角星应用到虚线中:
但是在等比例缩小10倍之后五角星没有正确绘制,发生变形了:
sp161108_155337
-
ComposePathEffect
DiscretePathEffect discretePathEffect = new DiscretePathEffect(5.0f, 5.0f);
PathDashPathEffect pathDashPathEffect = new PathDashPathEffect(path1, 30, 0, PathDashPathEffect.Style.ROTATE);
ComposePathEffect composePathEffect = new ComposePathEffect(discretePathEffect, pathDashPathEffect);
paint.setPathEffect(composePathEffect);
创建一个组合的效果,是一个在外面一个在内侧
sp161108_155657
-
SumPathEffect
SumPathEffect sumPathEffect = new SumPathEffect(discretePathEffect, pathDashPathEffect);
和上面的不同这是一个复合效果
sp161108_155941
区别很明显,因为两个都是相同的效果“叠加”得到的
光棍节快到了
参考 android制作闪动的红心
sp161108_162225
int px = getMeasuredWidth() / 2;
int py = getMeasuredHeight() / 2;
// 路径的起始点
path.moveTo(px, py - 5*5 );
// 根据心形函数画图
for (double i = 0; i <= 2 * Math.PI; i += 0.001) {
// 注意这里得到的xy不是真实的坐标要在进行减法
float x = (float) (16 * Math.sin(i) * Math.sin(i) * Math.sin(i));
float y = (float) (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i));
x *= 5;
y *= 5;
x = px - x;
y = py - y;
path.lineTo(x, y);
}
canvas.drawPath(path, paint);
DrawTextOnPath
注意在paint写文字的时候setStyle方法依旧有效,设置 paint.setStyle(Paint.Style.STROKE) 就会产生空心字体的效果
sp161108_163150
注意在写字之前一定先要移动面板然后在写
Path path = new Path();
path.moveTo(0, 0);
path.lineTo(100, 100);
path.lineTo(150, 190);
path.lineTo(400, 240);
canvas.drawPath(path,paint);
canvas.save();
canvas.translate(0, 50);
canvas.drawTextOnPath("你好",path, 10, 10, paint);
canvas.restore();
sp161108_163647
drawTextOnPath中两个float参数负责调整字体和path的偏移量
设置Mask效果
面具效果的根类是MaskFilter,它两个子类,也就是有两个效果,一个是模糊一个是“突出化”
sp161108_163858
设置模糊效果
在上面的代码中更改:
BlurMaskFilter blurMaskFilter = new BlurMaskFilter(5, BlurMaskFilter.Blur.NORMAL);
paint.setMaskFilter(blurMaskFilter);
sp161109_092018
第一个参数是模糊半径第二个参数是模糊的样式
设置突出化的效果
设置突出化就是可以在一个3D的场景中设置光源、光源的距离等从而造成效果:
EmbossMaskFilter embossMaskFilter = new EmbossMaskFilter(new float[]{1.5f, 1.5f, 1.5f}, 1f, 10, 6.2f);
来自:http://www.jianshu.com/p/be58a2f5687c