自定义控件详解（四）：Paint 画笔路径效果

Paint 画笔，即用来绘制图形的"笔"

前面我们知道了Paint的一些基本用法：

paint.setAntiAlias(true);//抗锯齿功能

paint.setColor(Color.RED);  //设置画笔颜色

paint.setStyle(Style.FILL);//设置填充样式

paint.setStrokeWidth();//设置画笔宽度 ，单位px

paint.setShadowLayer(, , , Color.GREEN);//设置阴影

不过我们会发现，这样画出的线条都是笔笔直直的，能满足需求，但是美观上并不好看。

这就需要使用到Paint类更多的一些方法了

首先，看下最简单设置的线条

Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
paint.setColor(Color.RED);
paint.setStrokeWidth(50);

Path path = new Path();
path.moveTo(100,500);
path.lineTo(200,200);
path.lineTo(300,500);
//绘制一个红色，线条宽度50px 的折线
canvas.drawPath(path,paint);

一、线条路径样式

public void setPathEffect(PathEffect effect);

　　设置路径样式;取值类型是所有派生自PathEffect的子类

　从第二个到最后一个，每一个都表示一个样式，其中用的最多的是 CornerPathEffect--圆形拐角效果，DashPathEffect——虚线效果

　（1）、CornerPathEffect--圆形拐角效果

　　new CornerPathEffect(float radius) // radius 表示弯曲的半径程度

Path path = new Path();

path.moveTo(,);

path.lineTo(,);

path.lineTo(,);

//绘制一个红色，线条宽度50px 的折线

paint.setPathEffect(new CornerPathEffect());

canvas.drawPath(path,paint);

可以看到原来直线的折角现在已经有一个弯曲程度了

拓展：我们可以根据这个方法来进行曲线图的实现

　　（2）、DashPathEffect——虚线效果

public DashPathEffect(float intervals[], float phase)

intervals[]：表示组成虚线的各个线段的长度；整条虚线就是由intervals[]中这些基本线段循环组成的。
phase：      开始绘制的偏移值

　注意： intervals[ ] 里面个数不限，但至少为2个。

　　　　可以为单数个，也可以为双数个，如果为单数个，多出来的最后一个无效果

　　双数个，表示一个实现长度，一个空线长度

　　　　比如 new DashPathEffect(new float[]{30,10,20,10},10);

　　　　那么每一段都分为4部分，先是30px的实线，再是10px的空心线，再是20px的实线，再是10px的空线

Paint paint = new Paint();

paint.setStyle(Paint.Style.STROKE);

paint.setColor(Color.RED);

paint.setStrokeWidth();

Path path = new Path();

path.moveTo(,);

path.lineTo(,);

paint.setPathEffect(new DashPathEffect(new float[]{,,,},));

        canvas.drawPath(path,paint);

至于其他的效果，大家可以自己尝试。

二、ComposePathEffect与SumPathEffect 叠加路径效果

从英文上可以看出这两个方法是用来合并路径效果的，但既然是两个方法，就有相应的区别

　　(1)、ComposePathEffect

　　　　这种合并路径效果是先将paint 设置成第二个参数的路径效果，然后在此基础上在设置成第一个参数对应的路径效果

　　　　我们给一个线条，设置圆形拐角路径和一个虚线路径看一下

Paint paint = new Paint();

paint.setStyle(Paint.Style.STROKE);

paint.setColor(Color.RED);

paint.setStrokeWidth(3);

Path path = new Path();

path.moveTo(100,600);

path.lineTo(200,200);

path.lineTo(300,600);

//虚线路径

DashPathEffect dashPathEffect = new DashPathEffect(new float[]{30, 10, 20, 10}, 0);

//圆角拐点路径

CornerPathEffect cornerPathEffect = new CornerPathEffect(10);

//合并后的路径

ComposePathEffect composePathEffect = new ComposePathEffect(dashPathEffect, cornerPathEffect);

//设置路径

paint.setPathEffect(composePathEffect);

canvas.drawPath(path,paint);

　　（2）、SumPathEffect

　　　　这种合并路径效果是分别将两个路径的效果叠加的显示出现

　　　　我们给一个线条，设置圆形拐角路径和一个虚线路径看一下

Paint paint = new Paint();

paint.setStyle(Paint.Style.STROKE);

paint.setColor(Color.RED);

paint.setStrokeWidth();

Path path = new Path();

path.moveTo(,);

path.lineTo(,);

path.lineTo(,);

//虚线路径

DashPathEffect dashPathEffect = new DashPathEffect(new float[]{, , , }, );

//圆角拐点路径

CornerPathEffect cornerPathEffect = new CornerPathEffect();

//合并后的路径

SumPathEffect sumPathEffect = new SumPathEffect(dashPathEffect,cornerPathEffect);

//设置路径

paint.setPathEffect(sumPathEffect);

canvas.drawPath(path,paint);

可以看出一个虚线路径和一个圆形拐角路径叠加显示起来的效果

三、setStrokeCap(Paint.Cap cap)

　　设置线帽样式，取值有Cap.ROUND(圆形线帽)、Cap.SQUARE(方形线帽)、Paint.Cap.BUTT(无线帽)

　　线冒，可以理解为一条线两个端点，设置线冒样式使线条两端不看起来不那么死板

　　这里绘制3条不同样式的直线来看一下效果

Paint paint = new Paint();

paint.setStyle(Paint.Style.STROKE);

paint.setColor(Color.RED);

paint.setStrokeWidth();

Path pathBUTT = new Path();

pathBUTT.moveTo(,);

pathBUTT.lineTo(,);

paint.setStrokeCap(Paint.Cap.BUTT);

canvas.drawPath(pathBUTT,paint);

Path pathSQUARE = new Path();

pathSQUARE.moveTo(,);

pathSQUARE.lineTo(,);

paint.setStrokeCap(Paint.Cap.SQUARE);

canvas.drawPath(pathSQUARE,paint);

Path pathROUND = new Path();

pathROUND.moveTo(,);

pathROUND.lineTo(,);

paint.setStrokeCap(Paint.Cap.ROUND);

canvas.drawPath(pathROUND,paint);

四、setStrokeJoin(Paint.Join join)

　　设置结合处效果取值：

1、Join.MITER（结合处为锐角）

2、Join.Round(结合处为圆弧)

3、Join.BEVEL(结合处为直线)

　　举例：

Paint paint = new Paint();

paint.setColor(Color.RED);

paint.setStrokeWidth();

paint.setStyle(Paint.Style.STROKE);

paint.setAntiAlias(true);

Path pathROUND = new Path();

pathROUND.moveTo(,);

pathROUND.lineTo(,);

pathROUND.lineTo(,);

paint.setStrokeJoin(Paint.Join.ROUND);

canvas.drawPath(pathROUND,paint);

Path pathMITER = new Path();

pathMITER.moveTo(,);

pathMITER.lineTo(,);

pathMITER.lineTo(,);

paint.setColor(Color.GREEN);

paint.setStrokeJoin(Paint.Join.MITER);

canvas.drawPath(pathMITER,paint);

Path path = new Path();

path.moveTo(,);

path.lineTo(,);

path.lineTo(,);

paint.setColor(Color.BLUE);

paint.setStrokeJoin(Paint.Join.BEVEL);

canvas.drawPath(path,paint);

巴特西

自定义控件详解（四）：Paint 画笔路径效果

最新文章

热门文章