概述
在Android中，我们经常会需要去绘制一些自己需要的控件，所以继承自View的自定义View就产生了。这篇文章主要介绍在View中的重要类，Canvas类。
Canvas的作用
Canvas是自定义View中几个最重要的类之一，可以理解为画布，但是我理解下来，这只是单一的图层，每次Canvas绘制时其实都是在canvas类所定义出的一个图层上进行绘制图形，一旦canvas变化，则图层也发生变化，图层变化之前绘制的结果不变，但之后的绘制结果会以新的图层为基准进行绘制
创建一个自定义View
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import androidx.annotation.Nullable;
/**
* create by xu.tian
*
* @date 2021/8/22
*/
public class MyView extends View {
public static final String TAG = MyView.class.getSimpleName();
private Paint paint = new Paint();
private int width ;
private int height ;
public MyView(Context context) {
super(context);
}
public MyView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
}
public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public MyView(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
}
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w,h,oldw,oldh);
width = w ;
height = h ;
Log.d(TAG,"onSizeChanged width ---> "+w+"\n"+
"height ---> "+h+"\n"+
"oldw ---> "+oldw+"\n"+
"oldh ---> "+oldh);
}
}
绘制线条(Line)
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
// 设置画笔的宽度
paint.setStrokeWidth(10f);
// 设置画笔的颜色
paint.setColor(Color.RED);
// 设置画笔的Style
paint.setStyle(Paint.Style.FILL);
// 绘制一根线
canvas.drawLine(0f,0f,(float)width,(float)height,paint);
}
在这里绘制线条调用Canvas.drawLine(float startX, float startY, float stopX, float stopY,Paint paint)方法，参数分别如下
- startX 起点的x坐标
- startY 起点的y坐标
- stopX 终点的x坐标
- stopY 终点的y坐标
-
paint 画图的画笔类
所以我们这里绘制了一条从左上角到右下角的线条，运行结果如下
device-2021-08-22-145051.png
绘制一个矩形(Rect,RectF)
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
// 设置画笔的宽度
paint.setStrokeWidth(10f);
// 设置画笔的颜色
paint.setColor(Color.RED);
// 设置画笔的Style
paint.setStyle(Paint.Style.FILL);
// 绘制一个矩形
Rect rect = new Rect(width/2-100,height/2-200,width/2+100,height/2+200);
canvas.drawRect(rect,paint);
}
绘制矩形调用canvas.drawRect(RectF rect, Paint paint)，矩形Rect的构造参数的四个参数分别为左边界，上边界，右边界，下边界的值,单位为px，RectF与Rect不同之处在于构造参数的类型一个全为float,一个全为int，运行结果如下
device-2021-08-22-145619.png
绘制一个椭圆(Oval)
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
// 设置画笔的宽度
paint.setStrokeWidth(10f);
// 设置画笔的颜色
paint.setColor(Color.RED);
// 设置画笔的Style
paint.setStyle(Paint.Style.FILL);
// 绘制一个椭圆
RectF rect = new RectF(width/2-100,height/2-200,width/2+100,height/2+200);
canvas.drawOval(rect,paint);
}
绘制椭圆主要调用drawOval(RectF oval, Paint paint)，以一个矩形的边界来绘制一个椭圆,运行结果如下
device-2021-08-22-150049.png
绘制一个圆(Circle)
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
// 设置画笔的宽度
paint.setStrokeWidth(10f);
// 设置画笔的颜色
paint.setColor(Color.RED);
// 设置画笔的Style
paint.setStyle(Paint.Style.FILL);
// 绘制一个圆
canvas.drawCircle(width/2,height/2,200,paint);
}
绘制圆主要使用Canvas.drawCircle(float cx, float cy, float radius, Paint paint),
- cx 原中心的x坐标
- cy 原中心的y坐标
- radius 圆的半径
-
paint 画笔对象
运行结果如下
device-2021-08-22-150447.png
绘制一段路径(Path)
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
// 设置画笔的宽度
paint.setStrokeWidth(10f);
// 设置画笔的颜色
paint.setColor(Color.RED);
// 设置画笔的Style
paint.setStyle(Paint.Style.FILL);
// 绘制线条路径
Path path = new Path();
path.moveTo(width/2,height/2-200);
path.lineTo(width/2-300,height/2+300);
path.lineTo(width/2+300,height/2+300);
path.close();
canvas.drawPath(path,paint);
}
绘制Path的方法比较多，这里只简单示例绘制线条路径构建一个三角形的用法，后续会再详细介绍绘制别的类型路径的用法，该例运行结果如下
device-2021-08-22-151847.png
绘制文字
@Override
protected void onDraw(Canvas canvas){
super.onDraw(canvas);
Log.d(TAG,"onDraw");
// 设置画笔的宽度
paint.setStrokeWidth(10f);
// 设置画笔的颜色
paint.setColor(Color.RED);
// 设置画笔的Style
paint.setStyle(Paint.Style.FILL);
//文字大小
paint.setTextSize(50);
// 文字左右位置
paint.setTextAlign(Paint.Align.CENTER);
// 文字是否带下划线
paint.setUnderlineText(false);
canvas.drawText("My First TextView ",width/2,height/2,paint);
paint.setColor(Color.YELLOW);
canvas.drawLine(0,height/2,width,height/2,paint);
}
这里我们绘制了一段文字和一根线段这里是为了演示出Canvas中的文字的绘制方法只能实现水平方向上的居中显示，垂直方向上的垂直是需要我们再进行实现的，绘制文字有很多个，我们这里只简单调用了设置起始点的绘制方法，关于文字的绘制其实内容还是比较多的，这里我们就只简单的介绍，后续有时间会专门出一个文字绘制的文章，该示例运行结果如下
device-2021-08-22-152758.png
总结
今天总结了Canvas中一些简单图形的绘制，下篇我们介绍Canvas中的一些其他内容。
