开篇
废话不说了,直接开凿吧!这篇这要说一下路径(path)的绘制技巧以及 神一样的存在(贝塞尔曲线)的绘制
基本绘制
- 1、直线路径
void moveTo(float x1,float y1):直线的开始点,即将直线路径的绘制点定在(x1,y1)的位置;
void lineTo(float x2,float y2):直线的结束点,又是下一次绘制路径的开始点,lineTo() 可以一直调用
void close():如果连续画了几条直线,但没有形成闭环,调用 close() 方法会自动将路径的首尾连接起来,形成闭环。
onDraw 方法实现:
private void init() {
//初始化画笔
paint = new Paint();
paint.setTextSize(100);
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setTextSize(100); //单位为 sp
paint.setStrokeWidth(10);
path = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.moveTo(100, 200);
path.lineTo(200, 200);
path.lineTo(300, 400);
path.lineTo(0, 400);
path.close();
canvas.drawPath(path, paint);
}
![image.png](https://upload-images.jianshu.io/upload_images/11455341-906b446bfd41a3b9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 2、矩形路径
void addRect (float left, float top, float right, float bottom, Path.Direction dir)
void addRect (RectF rect, Path.Direction dir)
这里的 Path 类创建矩形路径的参数与前面 canvas 绘制矩形差不多,唯一不同的一点就是增加了 Path.Direction 参数 Path.Direction 取值: - Path.Direction.CCW:是counter-clockwise缩写,指创建逆时针方向的矩形路径 - Path.Direction.CW:是clockwise的缩写,指创建顺时针方向的矩形路径 示例代码:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
RectF rect = new RectF(100, 200, 400, 400);
path.addRect(rect, Path.Direction.CCW);
canvas.drawPath(path, paint);
RectF rect1 = new RectF(500, 200, 800, 400);
path.addRect(rect1, Path.Direction.CW);
canvas.drawPath(path, paint);
}
![image.png](https://upload-images.jianshu.io/upload_images/11455341-13ecf0328552833b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 貌似从效果图中根本看不出顺时针和逆时针生成有任何区别,是滴,如果仅仅是做展示使用的话确实是没有任何区别,但是如果配合 Text 一起使用的话,那区别就很大了,我们前面有介绍过在路径上绘制 Text ,我们来做一下:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
String text = "搞笑我们是认真的”;
Path CCWPath = new Path();
RectF rect = new RectF(100, 200, 400, 400);
CCWPath.addRect(rect, Path.Direction.CCW);
canvas.drawPath(CCWPath, paint);
canvas.drawTextOnPath(text, CCWPath, 0, 0, paint);
Path CWPath = new Path();
RectF rect1 = new RectF(500, 200, 800, 400);
CWPath.addRect(rect1, Path.Direction.CW);
canvas.drawPath(CWPath, paint);
canvas.drawTextOnPath(text, CWPath, 0, 0, paint);
}
![image.png](https://upload-images.jianshu.io/upload_images/11455341-3f4d477d3fbf6c6a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 3、圆角矩形路径
void addRoundRect (RectF rect, float[] radii, Path.Direction dir)
void addRoundRect (RectF rect, float rx, float ry, Path.Direction dir)
参数:
第一个构造函数可以定制每个角的圆角大小
- float[] radii:必须传入 8 个数值,分四组,分别对应每个角所使用的椭圆的横轴半径和纵轴半径,比如(x1,y1,x2,y2,x3,y3,x4,y4),其中,x1,y1 对应第一个角的(左上角)产生的椭圆的横轴半径和纵轴半径,其他类推
第二个构造函数:只能构建统一圆角大小
- float rx:所产生圆角的椭圆的横轴半径;
- float ry:所产生圆角的椭圆的纵轴半径;
示例代码:
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Path CCWPath = new Path();
RectF rect = new RectF(100, 200, 400, 400);
float[] radii = {
30, 30, 50, 50, 70, 70, 90, 90};
CCWPath.addRoundRect(rect, radii, Path.Direction.CCW);
canvas.drawPath(CCWPath, paint);
Path CWPath = new Path();
RectF rect1 = new RectF(500, 200, 800, 400);
CWPath.addRoundRect(rect1, 30, 30, Path.Direction.CW);
canvas.drawPath(CWPath, paint);
}
}
- 4、圆形路径
void addCircle (float x, float y, float radius, Path.Direction dir)
参数:
- float x:圆心X轴坐标
- float y:圆心Y轴坐标
- float radius:圆半径
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
path.addCircle(300, 300, 200, Path.Direction.CW);
canvas.drawPath(path, paint);
}
}
![](https://upload-images.jianshu.io/upload_images/11455341-e3e600753d1f8b7d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 5、椭圆路径
void addOval (RectF oval, Path.Direction dir)
参数:
- RectF oval:生成椭圆所对应的矩形
- Path.Direction :生成方式,与矩形一样,分为顺时针与逆时针,意义完全相同,不再重复
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
RectF rectF = new RectF(300, 300, 700, 500);
path.addOval(rectF, Path.Direction.CW);
canvas.drawPath(path, paint);
}
![image.png](https://upload-images.jianshu.io/upload_images/11455341-c73633b147411492.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 6、圆弧路径
void addArc (RectF oval, float startAngle, float sweepAngle)
参数说明:
- RectF oval:弧是椭圆的一部分,这个参数就是生成椭圆所对应的矩形;
- float startAngle:开始的角度,