Canvas和Paint基础

发表于 | 分类于
字数统计: 1.3k word | 阅读时长 ≈ 5 min
Canvas常用操作速查表

Canvas.drawXXX() 和 Paint 基础

drawXXX() 系列方法和 Paint 的基础掌握了，就能够应付简单的绘制需求。它们主要包括：

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

要画一个红色的圆，并不是写成 canvas.drawCircle(300, 300, 200, RED, paint) 这样，而是像下面这样：

1
2
paint.setColor(Color.RED); // 设置为红色
canvas.drawCircle(300, 300, 200, paint);
Paint.setStyle(Paint.Style style)

etStyle(Style style) 这个方法设置的是绘制的 Style 。Style 具体来说有三种： FILL, STROKE 和 FILL_AND_STROKE 。FILL 是填充模式，STROKE是画线模式（即勾边模式），FILL_AND_STROKE 是两种模式一并使用：既画线又填充。它的默认值是 FILL，填充模式。

而如果你想画的不是实心圆，而是空心圆（或者叫环形），也可以使用paint.setStyle(Paint.Style.STROKE) 来把绘制模式改为画线模式。

Paint.setStrokeWidth(float width)

在 STROKE 和 FILL_AND_STROKE 下，还可以使用 paint.setStrokeWidth(float width) 来设置线条的宽度,单位也是像素。

开启抗锯齿

在绘制的时候，往往需要开启抗锯齿来让图形和文字的边缘更加平滑。开启抗锯齿很简单，只要在 new Paint() 的时候加上一个 ANTI_ALIAS_FLAG参数就行。另外，你也可以使用 Paint.setAntiAlias(boolean aa) 来动态开关抗锯齿。

1
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Canvas的draw系列方法
Canvas.drawColor(@ColorInt int color) 颜色填充

这是最基本的 drawXXX() 方法：在整个绘制区域统一涂上指定的颜色。例如 drawColor(Color.BLACK) 会把整个区域染成纯黑色。

类似的方法还有 drawRGB(int r, int g, int b) 和 drawARGB(int a, int r, int g, int b) ，它们和 drawColor(color) 只是使用方式不同，作用都是一样的。

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

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

前两个参数 centerX ，centerY 是圆心的坐标，第三个参数 radius 是圆的半径，单位都是像素，它们共同构成了这个圆的基本信息（即用这几个信息可以构建出一个确定的圆）；第四个参数 paint ，它提供基本信息之外的所有风格信息，例如颜色、线条粗细、阴影等。

drawRect(float left, float top, float right, float bottom, Paint paint) 画矩形

left, top, right, bottom 是矩形四条边的坐标。(含义是left和right距view坐标系左边、top和bottom距上边的距离)

另外，它还有两个重载方法 drawRect(RectF rect, Paint paint) 和 drawRect(Rect rect, Paint paint) ，让你可以直接填写 RectF 或 Rect 对象来绘制矩形。

drawPoint(float x, float y, Paint paint) 画点

x 和 y 是点的坐标。点的大小可以通过 paint.setStrokeWidth(width) 来设置；点的形状可以通过 paint.setStrokeCap(cap) 来设置：ROUND 画出来是圆形的点，SQUARE 或 BUTT 画出来是方形的点。

1
2
3
paint.setStrokeWidth(20);
paint.setStrokeCap(Paint.Cap.ROUND);
canvas.drawPoint(50, 50, paint);
drawPoints(float[] pts, int offset, int count, Paint paint) / drawPoints(float[] pts, Paint paint) 画点（批量）
1
2
3
4
float[] points = {0, 0, 50, 50, 50, 100, 100, 50, 100, 100, 150, 50, 150, 100};
// 绘制四个点：(50, 50) (50, 100) (100, 50) (100, 100)
canvas.drawPoints(points, 2 /* 跳过两个数，即前两个 0 */,
          8 /* 一共绘制 8 个数（4 个点）*/, paint);
drawOval(float left, float top, float right, float bottom, Paint paint) 画椭圆

另外，它还有一个重载方法 drawOval(RectF rect, Paint paint)，让你可以直接填写 RectF 来绘制椭圆。

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) 画线（批量）
1
2
float[] points = {20, 20, 120, 20, 70, 20, 70, 120, 20, 120, 120, 120, 150, 20, 250, 20, 150, 20, 150, 120, 250, 20, 250, 120, 150, 120, 250, 120};
canvas.drawLines(points, paint);
drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, Paint paint) 画圆角矩形

left, top, right, bottom 是四条边的坐标，rx 和 ry 是圆角的横向半径和纵向半径。

1
canvas.drawRoundRect(100, 100, 500, 300, 50, 50, paint);

它还有一个重载方法 drawRoundRect(RectF rect, float rx, float ry, Paint paint)，让你可以直接填写 RectF 来绘制圆角矩形。

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 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。

绘制的时候都是顺时针绘制的

1
2
canvas.drawArc(200f,100f,800f,500f,-110f,100f,true,paint)//从-110度位置开始顺时针绘制划过100度
canvas.drawArc(200f,100f,800f,500f,0f,180f,true,paint)//从0度位置开始顺时针绘制划过180度（绘制了个半圆）

0%