自定义View之Canvas使用

Canvas能画哪些东西?

自定义View的绘制流程一般都是这样:提前创建好Paint对象,重写onDraw(),把绘制代码卸载ondraw()里面,大致如下:

1
2
3
4
5
6
7
8
9
Paint paint = new Paint();

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);

// 绘制一个圆
canvas.drawCircle(300, 300, 200, paint);
}

这里主要是学会Paint的几个基础Api和Canvas能绘制的一些图形:

  1. Canvas 类下的所有 draw- 打头的方法,例如 drawCircle() drawBitmap()
  2. Paint的几个常用Api:
    • Paint.setStyle(Style style) 设置绘制模式
    • Paint.setColor(int color) 设置颜色
    • Paint.setStrokeWidth(float width) 设置线条宽度
    • Paint.setTextSize(float textSize) 设置文字大小
    • Paint.setAntiAlias(boolean aa) 设置抗锯齿开关

下面主要看Canvas绘制的Api。

Canvas.drawColor(@ColorInt int color)

在整个绘制区域统一涂上指定的颜色。例如 drawColor(Color.BLACK) 会把整个区域染成纯黑色,覆盖掉原有内容; drawColor(Color.parse("#88880000") 会在原有的绘制效果上加一层半透明的红色遮罩。

这类颜色填充方法一般用于在绘制之前设置底色,或者在绘制之后为界面设置半透明蒙版。

drawCircle(float centerX, float centerY, float radius, Paint paint)

画圆。前两个参数 centerX centerY 是圆心的坐标,第三个参数 radius 是圆的半径,单位都是像素,它们共同构成了这个圆的基本信息(即用这几个信息可以构建出一个确定的圆);第四个参数 paint 我在视频里面已经说过了,它提供基本信息之外的所有风格信息,例如颜色、线条粗细、阴影等。

在Android里,每个View都有各自的坐标系,互不影响,坐标系的原点为View左上角的那个点。水平方向为X轴,向右为正,竖直方向为轴,向下为负。

drawRect(float left, float top, float right, float bottom, Paint paint)

画矩形。

drawPoint(float x, float y, Paint paint)

画点。xy 是点的坐标。点的大小可以通过 paint.setStrokeWidth(width) 来设置;点的形状可以通过 paint.setStrokeCap(cap) 来设置:ROUND 画出来是圆形的点,SQUAREBUTT 画出来是方形的点。

注:Paint.setStrokeCap(cap) 可以设置点的形状,但这个方法并不是专门用来设置点的形状的,而是一个设置线条端点形状的方法。端点有圆头 (ROUND)、平头 (BUTT) 和方头 (SQUARE) 三种

drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint)

画点(批量)。同样是画点,它和 drawPoint() 的区别是可以画多个点。pts 这个数组是点的坐标,每两个成一对;offset 表示跳过数组的前几个数再开始记坐标;count 表示一共要绘制几个点。

drawOval(float left, float top, float right, float bottom, Paint paint)

画椭圆。只能绘制横着的或者竖着的椭圆,不能绘制斜的,left, top, right, bottom 是这个椭圆的左、上、右、下四个边界点的坐标。

drawLine(float startX, float startY, float stopX, float stopY, Paint paint)

画线。startX, startY, stopX, stopY 分别是线的起点和终点坐标。由于直线不是封闭图形,所以 setStyle(style) 对直线没有影响。

drawLines(float[] pts, int offset, int count, Paint paint) / drawLines(float[] pts, Paint paint)

画线(批量)。

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint)

画圆角矩形。left, top, right, bottom是左上角和右下角的坐标,rxry 是圆角的横向半径和纵向半径。

drawArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

绘制弧形和扇形。drawArc() 是使用一个椭圆来描述弧形的。left, top, right, bottom描述的是这个弧形所在的椭圆;startAngle 是弧形的起始角度(x 轴的正向,即正右的方向,是 0 度的位置;顺时针为正角度,逆时针为负角度),sweepAngle 是弧形划过的角度;useCenter 表示是否连接到圆心,如果不连接到圆心,就是弧形,如果连接到圆心,就是扇形。

drawPath(Path path, Paint paint)

画自定义图形。

Path 可以描述直线、二次曲线、三次曲线、圆、椭圆、弧形、矩形、圆角矩形。把这些图形结合起来,就可以描述出很多复杂的图形。

Path 有两类方法,一类是直接描述路径的,另一类是辅助的设置或计算。

Path 方法第一类:直接描述路径。这一类方法还可以细分为两组:添加子图形和画线(直线或曲线)

第一组addXxx() ——添加子图形

第二组xxxTo() ——画线(直线或曲线)

Path 方法第二类:辅助的设置或计算

这类方法的使用场景比较少,如:setFillType(FillType fillType)设置填充方式。

drawBitmap(Bitmap bitmap, float left, float top, Paint paint)

绘制 Bitmap 对象,也就是把这个 Bitmap 中的像素内容贴过来。

drawText(String text, float x, float y, Paint paint)

绘制文字。