自定义View-绘制基本图形

一. 前言

绘制点，线，矩形，圆角矩形，圆弧，圆，椭圆等基本图形。

二. 绘制点

1. 原理

在某个坐标处绘制点，可以绘制一个点或者一组点。

2. 具体使用

//绘制一个点
public void drawPoint(float x, float y, @NonNull Paint paint)
  
//绘制一组点
public void drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint)

//在坐标(100,100)处绘制一个点
canvas.drawPoint(100,100,paint1);

//绘制一组点
canvas.drawPoints(new float[]{
        300,100,
        400,100,
},paint2);

3. 注意

绘制点(x , y)确定的是绘制出来的点的中心坐标，所以，有时候我们需要考虑绘制的点过大超出视图的范围。

三. 绘制线

1. 原理

两点（初始点和结束点）确定一条直线。

2. 具体使用

//绘制一条线
public void drawLine(float startX, float startY, float stopX, float stopY,
        @NonNull Paint paint)
  
//绘制一组线
public void drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint)

//画一条线
//在坐标(200,100)到(200,700)之间绘制一条线
canvas.drawLine(200,100,700,100,paint1);

//画一组线
canvas.drawLines(new float[]{
        200,200,300,200,
        200,300,300,300
}, paint2);
canvas.drawPoint(200,200,paint1);

3. 运行结果

绘制的起点(startX,startY)确定的位置是绘制的线条起始位置，如上图所示，我们绘制的时候也需要注意防止超出视图范围。

四. 绘制矩形

1. 原理

矩形的对角线顶点确定一个矩形。

2. 具体使用

//根据left,top,right,bottom绘制矩形
public void drawRect(float left, float top, float right, float bottom, @NonNull Paint paint)

//根据Rect绘制矩形
public void drawRect(@NonNull Rect r, @NonNull Paint paint)

//根据RectF绘制矩形
public void drawRect(@NonNull RectF rect, @NonNull Paint paint)
  
//特别注意：Rect类和RectF类的区别
//Rect = int || RectF = float

//绘制一个矩形
canvas.drawRect(100,400,600,700,paint2);
canvas.drawPoint(100,400,paint1);
canvas.drawPoint(600,700,paint1);

3. 注意

绘制矩形的left,top,right,bottom就是直接确定矩形的位置，根据上图，不需要考虑可能超出视图的可能。

五. 绘制圆角矩形

1. 原理

矩形的对角线顶点确定一个矩形。

2. 具体使用

//根据left,top,right,bottom以及rx,ry绘制矩形
public void drawRoundRect(float left, float top, float right, float bottom, float rx, float ry,
        @NonNull Paint paint)

//根据Rect绘制矩形
public void drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)

//绘制一个圆角矩形
canvas.drawRoundRect(100,800,600,1000,30,30,paint2);
canvas.drawPoint(100,800,paint1);
canvas.drawPoint(600,1000,paint1);
canvas.drawPoint(130,830,paint1);
canvas.drawPoint(570,970,paint1);

3. 注意

通过上图圆角矩形对角线点的显示以及对角线点对应的(rx,ry)显示，可以清楚的发现(rx,ry)所起的作用。

当 rx大于宽度的一半， ry大于高度一半时，画出来的为椭圆。由于当rx大于宽度一半，ry大于高度一半时，无法计算出圆弧，所以drawRoundRect对大于该数值的参数进行了修正，凡是大于一半的参数均按照一半来处理。

六. 绘制椭圆

1. 原理

矩形的对角线顶点确定矩形，根据传入矩形的长宽作为长轴和短轴画椭圆。绘制椭圆实际上是绘制一个矩形的内切图形。

2. 具体使用

//根据left,top,right,bottom以及rx,ry绘制椭圆
public void drawOval(float left, float top, float right, float bottom, @NonNull Paint paint)
  
//根据Rect绘制椭圆
public void drawOval(@NonNull RectF oval, @NonNull Paint paint)

//绘制一个矩形
canvas.drawRect(100,400,600,700,paint2);
canvas.drawPoint(100,400,paint1);
canvas.drawPoint(600,700,paint1);

//绘制一个椭圆
canvas.drawOval(100,400,600,700,paint1)

3. 注意

绘制椭圆没有很需要注意的地方。

七. 绘制圆

1. 原理

圆心坐标+半径决定圆。

2. 具体使用

1 2	//根据圆心(cx,cy)和半径radius绘制圆形 public void drawCircle(float cx, float cy, float radius, @NonNull Paint paint)

//绘制一个圆
canvas.drawCircle(500,1200,100,paint2);
canvas.drawPoint(500,1200,paint1);
canvas.drawPoint(400,1200,paint1);
canvas.drawPoint(600,1200,paint1);

3. 注意

和绘制矩形一样，绘制的圆形内容不会超出视图范围。

八. 绘制圆弧

1. 原理

通过圆弧角度的起始位置和扫过的角度确定圆弧。

角度起始位置的图片：

2. 具体使用

//根据left,top,right,bottom以及起始角度startAngle，扫过的角度sweepAngle绘制椭圆，是否使用中心useCenter
public void drawArc(float left, float top, float right, float bottom, float startAngle,
            float sweepAngle, boolean useCenter, @NonNull Paint paint)
  
//根据Rect以及起始角度startAngle，扫过的角度sweepAngle绘制椭圆，是否使用中心useCenter
public void drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,
            @NonNull Paint paint)

//绘制一个圆弧
canvas.drawRect(100,1400,500,1700,paint2);
canvas.drawArc(100,1400,500,1700,0,90,false,paint1);
canvas.drawRect(550,1400,950,1700,paint2);
canvas.drawArc(550,1400,950,1700,0,90,true,paint1);