Android Canvas类 详解

  • Canvas对象的获取方式有两种
  • Canvas对象常用的方法


Canvas对象的获取方式有两种

  1. 通过重写View.onDraw方法，View中的Canvas对象会被当做参数传递过来，我们操作这个Canvas，效果会直接反应在View中。
  2. 另一种就是使用构造方法创建一个Canvas对象
    Canvas(Bitmap bitmap)
    例:Bitmap b = Bitmap.createBitmap(100, 100, Bitmap.Config.ARGB_8888);
    Canvas c = new Canvas(b);

Canvas对象常用的方法

方法

说明

public void drawARGB(int a, int r, int g, int b)

用指定的ARGB颜色填充整个画布的位图

a: 透明度(取值0…255)

r: 红色 (取值0…255)

g: 绿色 (取值0…255)

b: 蓝色 (取值0…255)

例: canvas.drawARGB(255,255,0,0);

public void drawRGB(int r, int g, int b)

用指定的RGB颜色填充整个画布的位图

r: 红色 (取值0…255)

g: 绿色 (取值0…255)

b: 蓝色 (取值0…255)

例: canvas.drawColor(Color.RED);

public void drawColor(int color)

用指定的颜色填充整个画布的位图

color: 要画在画布上的颜色

例: canvas.drawColor(Color.RED);

public void drawColor(int color, PorterDuff.Mode mode)

用指定的颜色和模式填充整个画布的位图

mode: 18个填充模式

1. ADD

2. CLEAR

3. DARKEN

4. DST

5. DST_ATOP

6. DST_IN

7. DST_OUT

8. DST_OVER

9. LIGHTEN

10. MULTIPLY

11. OVERLAY

12. SCREEN

13. SRC

14. SRC_ATOP

15. SRC_IN

16. SRC_OUT

17. SRC_OVER

18. XOR

例: canvas.drawColor(Color.RED, ADD);

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

使用指定的绘图工具绘制文本，原点为(x,y)

text: 文本

x: 绘制文本的原点的x轴坐标

y: 绘制文本的原点的Y轴坐标

paint: 用于文本的Paint对象

例: canvas.drawText(“绘制文本内容”, 100, 100, redPaint);

public void drawText(CharSequence text, int start, int end, float x, float y, Paint paint)

在指定的绘图中绘制由开始到结束指定的文本范围，其原点为(x,y)

text: 文本序列

start: 开始下标

end: 结束下标(end-1)

x: 绘制文本的原点的x轴坐标

y: 绘制文本的原点的Y轴坐标

paint: 用于文本的Paint对象

例:canvas.drawText(“绘制文本内容”, 2,4,100, 100, redPaint);

public void drawText(char[] text, int index, int count, float x, float y, Paint paint)

使用指定的绘图工具绘制文本，原点为(x,y)

text: 文本

index: 文本绘制开始的下标

count: 文本绘制从下标开始截取的长度

x: 绘制文本的原点的x轴坐标

y: 绘制文本的原点的Y轴坐标

paint: 用于文本的Paint对象

例:Char[] char = new char[]{‘绘’, ‘制’, ‘文’, ‘本’, ‘内’, ‘容’};

canvas.drawText(char , 2, 4, 100, 100, redPaint);

public void drawText(String text, int start, int end, float x, float y, Paint paint)

在指定的绘图中绘制由开始到结束指定的文本范围，其原点为(x,y)

text: 文本

start: 开始下标

end: 结束下标(end-1)

x: 绘制文本的原点的x轴坐标

y: 绘制文本的原点的Y轴坐标

paint: 用于文本的Paint对象

例:canvas.drawText(“绘制文本内容”, 2,4,100, 100, redPaint);

public void drawPath (Path path, Paint paint)

画出贝塞尔曲线

path: 要绘制的路径

paint: 用于需要绘制路径的Paint对象

例: canvas.drawPath(path, redPaint);

public void drawTextOnPath(String text, Path path, float hOffset, float vOffset, Paint paint)

使用指定的画笔沿着指定的路径绘制文本，原点为(x,y)

text: 要绘制的文本

path: 文本应该遵循的基线路径

hOffset: 距离路径开始位置的偏移量(横向)

vOffset: 距离路径上下的偏移量（纵向可以为负数）

paint: 用于需要绘制文本的Paint对象

例: canvas.drawTextOnPath(“绘制文本内容”, path, 10, -50, redPaint);

public void drawTextOnPath(char[] text, int index, int count, Path path, float hOffset, float vOffset, Paint paint)

使用指定的画笔沿着指定的路径绘制文本，原点为(x,y)

text: 要绘制的文本

index: 绘制文本的起始下标

count: 绘制字符的个数,从起始下标起

path: 文本应该遵循的基线路径

hOffset: 距离路径开始位置的偏移量(横向)

vOffset: 距离路径上下的偏移量（纵向可以为负数

paint: 用于需要绘制文本的Paint对象

例:Char[] char = new char[]{‘绘’, ‘制’, ‘文’, ‘本’, ‘内’, ‘容’};

canvas.drawText(char , 2, 4, path, 10, -50, redPaint);

public void drawPosText(char[] text, int index, int count, float[] pos, Paint paint)

绘制文本，每个字符的来源由pos数组指定

此方法不支持符号的组成和分解，因此不应用于呈现复杂的脚本

text:要绘制的文本

index: 要绘制的第一个字符的索引

count: 要绘制的字符数，从索引开始

pos: 数组的[x,y]位置，用于放置每个字符定位坐标

paint: 用于需要绘制文字的Paint对象

public void drawPosText(String text, float[] pos, Paint paint)

绘制文本，每个字符的来源由pos数组指定

此方法不支持符号的组成和分解，因此不应用于呈现复杂的脚本

text:要绘制的文本

pos: 数组的[x,y]位置，用于定位每个字符

paint: 用于需要绘制文字的Paint对象

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

以指定的开始和结束x、y坐标绘制线段; 线的大小取决于画笔的大小

startX: 直线起始点的X轴坐标

startY: 直线起始点的Y轴坐标

stopX: 直线结束点的X轴坐标

stopY: 直线结束点的Y轴坐标

paint: 用于线段的Paint对象

例: 绘制一条线

canvas.drawLine(200, 200, 400, 400, redPaint);

public void drawLines(float[] pts, Paint paint)

画多条线。每行都从pts数组中的4个连续的值中取出。因此，要绘制一条线，数组必须至少包含4个值

pts: 要绘制的点数组 [x0 y0 x1 y1 x2 y2 …]

paint: 用于文本的Paint对象

例: 绘制2条线

float[] pts = new float[]{100, 100, 200, 200, 200, 100, 300, 100};

canvas.drawLines(pts, redPaint);

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

画多条线。每行都从pts数组中的4个连续的值中取出。因此，要绘制一条线，数组必须至少包含4个值

pts: 要绘制的点数组 [x0 y0 x1 y1 x2 y2 …]

offset: 在绘制之前要跳过的数组中值的数目

count: 跳过“offset”后要处理的数组中值的数量

paint: 用于线段的Paint对象

例: 绘制2条线

float[] pts = new float[]{0, 0, 50, 50, 100, 100, 200, 200, 200, 100, 300, 100};

canvas.drawLines(pts, 4, 8, redPaint);

public void drawCircle(float cx, float cy, float radius, Paint paint)

用指定的颜料画指定的圆。如果半径<= 0，那么什么也画不出来

cx: 要画的圆中心的x坐标

cy: 要画的圆中心的x坐标

radius: 要画的圆的半径

paint: 用于需要绘制圆的Paint对象

例:canvas.drawCircle(200,200,100,redPaint);

public void drawOval (RectF oval, Paint paint)

绘制指定的椭圆

oval: 绘制的椭圆的矩形边界

例: RectF rectF = new RectF((float) 100.3, 100, 300, 300);

canvas.drawOval(rectF, redPaint);

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

绘制指定的椭圆

left: 绘制矩形的左侧(X轴的值)

top: 绘制矩形的顶部(Y轴的值)

right: 绘制矩形的右侧(X轴的值)

bottom: 绘制矩形的底部(Y轴的值)

paint: 用于需要绘制矩形的Paint对象

例: 绘制一个椭圆

canvas.drawOval((float) 100.3, 100, 300, 200, redPaint);

public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

绘制指定的圆弧，该圆弧将被缩放以适应指定的椭圆

oval : 椭圆的边界;用于定义圆弧的形状和大小

startAngle: 起始角(以度表示)是弧线开始的位置

sweepAngle: 顺时针方向测量的扫描过角(以度为单位)

useCenter: 是否和中心连线

paint: 用于需要绘制圆弧的Paint对象

例: 绘制圆弧

canvas.drawArc(rectF, 0, 90, true, redPaint);

public void drawRect(RectF rect, Paint paint)

使用指定的画笔绘制指定的矩形。矩形将被填充或框架基础上的绘画风格

rect: 要绘制的矩形

paint: 用于需要绘制矩形的Paint对象

例: 绘制一个矩形

RectF rectF = new RectF((float) 100.3, 100, 300, 300);

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

使用指定的画笔绘制指定的矩形。矩形将被填充或框架基础上的绘画风格

left: 绘制矩形的左侧(X轴的值)

top: 绘制矩形的顶部(Y轴的值)

right: 绘制矩形的右侧(X轴的值)

bottom: 绘制矩形的底部(Y轴的值)

paint: 用于需要绘制矩形的Paint对象

例: 绘制一个矩形

canvas.drawRect((float) 100.3, 100, 300, 300, redPaint);

public void drawRect(RectF rect, Paint paint)

使用指定的画笔绘制指定的矩形。矩形将被填充或框架基础上的绘画风格

rect: 要绘制的矩形

paint: 用于需要绘制矩形的Paint对象

例: 绘制一个矩形

RectF rectF = new RectF((float) 100.3, 100, 300, 300);

canvas.drawRect(rectF, redPaint);

public void drawRect(Rect r, Paint paint)

使用指定的画笔绘制指定的矩形。矩形将被填充或框架基础上的绘画风格

r: 要绘制的矩形

paint: 用于需要绘制矩形的Paint对象

Rect rect = new Rect(100, 100, 300, 300);

canvas.drawRect(rect , redPaint);

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

绘制指定的圆矩形

left: 矩形左侧的X坐标

top: 矩形顶部的Y坐标

right: 矩形右侧的X坐标

bottom: 矩形底部的Y坐标

rx: 圆角椭圆X轴方向的半径

ry: 圆角椭圆Y轴方向的半径

paint: 用于需要绘制矩形的Paint对象

例: 绘制圆角矩形

canvas.drawRoundRect((float) 100.3, 100, 300, 300,20,20,redPaint);

public void drawRoundRect(RectF rect, float rx, float ry, Paint paint)

绘制指定的圆矩形

rect: 要绘制圆角的矩形的边界

rx: 圆角椭圆X轴方向的半径

ry: 圆角椭圆Y轴方向的半径

paint: 用于需要绘制矩形的Paint对象

例: 绘制圆角矩形

RectF rectF = new RectF((float) 100.3, 100, 300, 300);

canvas.drawRoundRect(rectF,20,20,redPaint);

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

使用指定的绘图工具绘制指定的位图，其左上角在(x,y)处，由当前矩阵转换

bitmap: 要绘制的位图

left: 绘制的位图左侧的位置(X轴的值)

top : 绘制的位图顶部的位置(Y轴的值)

paint: 用于位图的Paint对象(可以为null)

例: canvas.drawBitmap(bitmap, 100, 100, null);

public void drawBitmap(int[] colors, int offset, int stride, float x, float y, int width, int height, boolean hasAlpha, Paint paint)

将指定的颜色数组视为位图，并绘制它

colors: 表示位图像素的颜色数组

offset: 偏移到第一个像素的颜色数组中

stride: 数组中行之间的颜色数(必须是>= width或<= -width)

x: 绘制位图的X坐标

y: 绘制位图的Y坐标

width: 位图的宽度

height: 位图的高度

hasAlpha: 如果颜色的alpha通道包含有效值，则为真。如果为false，则忽略alpha字节(假设每个像素都是0xFF)

paint: 用于位图的Paint对象

public void drawBitmap(int[] colors, int offset, int stride, int x, int y, int width, int height, boolean hasAlpha, Paint paint)

将指定的颜色数组视为位图，并绘制它

colors: 表示位图像素的颜色数组

offset: 偏移到第一个像素的颜色数组中

stride: 数组中行之间的颜色数(必须是>= width或<= -width)

x: 绘制位图的X坐标

y: 绘制位图的Y坐标

width: 位图的宽度

height: 位图的高度

hasAlpha: 如果颜色的alpha通道包含有效值，则为真。如果为false，则忽略alpha字节(假设每个像素都是0xFF)

paint: 用于位图的Paint对象

public void drawBitmap(Bitmap bitmap, Matrix matrix, Paint paint)

使用指定的矩阵绘制位图

bitmap: 要绘制的位图

matrix: 在绘制位图时用于变换位图的矩阵

paint: 用于位图的Paint对象(可能为null)

例: canvas.drawBitmap(bitmap, new Matrix(), null);

public void drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint paint)

绘制指定的位图，自动缩放/转换以填充目标矩形。如果源矩形不为空，则指定要绘制的位图的子集

bitmap: 要绘制的位图

src: 对当前图片进行裁剪，根据图片绘制的区域(可以为null)

dst: 对图片的大小进行缩放和移动，根据画布绘制显示的区域

paint: 用于位图的Paint对象(可以为null)

例: Rect src = new Rect(100, 100, bitmap.getWidth(), bitmap.getHeight())

Rect dst = new Rect(100, 100, bitmap.getWidth(), bitmap.getHeight())

canvas.drawBitmap(bitmap, src, dst, null);

public void drawBitmap(Bitmap bitmap, Rect src, RectF dst, Paint paint)

绘制指定的位图，自动缩放/转换以填充目标矩形。如果源矩形不为空，则指定要绘制的位图的子集

bitmap: 要绘制的位图

src: 对当前图片进行裁剪，根据图片绘制的区域(可以为null)

dst: 对图片的大小进行缩放和移动，根据画布绘制显示的区域

paint: 用于位图的Paint对象(可以为null)

例: Rect dst = new Rect(100.4, 100, bitmap.getWidth(), bitmap.getHeight()

canvas.drawBitmap(bitmap, null, dst, redPaint);

public void drawPicture(Picture picture)

保存画布状态，绘制图片，并恢复画布状态。这与不执行任何保存/恢复的picture.draw(canvas)不同

picture: 需要绘制的图片

public void drawPicture(Picture picture, RectF dst)

绘制图片，拉伸以适应dst矩形

picture: 需要绘制的图片

dst: 需要适应的目标矩形

public void drawPicture(Picture picture, Rect dst)

绘制图片，拉伸以适应dst矩形

picture: 需要绘制的图片

dst: 需要适应的目标矩形

public void drawPoint(float x, float y, Paint paint)

用于绘制单个点

x: X轴的值

y: Y轴的值

paint: 用于需要绘制点的Paint对象

例:canvas.drawPoint(200, 200, redPaint);

public void drawPoints(float[] pts, Paint paint)

根据数组绘制所有的点

pts: 需要绘制的点数组[x0 y0 x1 y1 x2 y2…]

paint: 用于需要绘制点的Paint对象

例: 绘制4个点

float pts[] = {200, 200, 250, 250, 300, 300, 350, 350};

canvas.drawPoints(pts, redPaint);

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

画一系列的点。每个点都以pts[]指定的坐标为中心，其直径由画笔的描边宽度指定(由画布’ CTM转换)，对描边宽度为0进行特殊处理，总是绘制1个像素(如果启用了抗锯齿，则最多绘制4个像素)。点的形状是由油漆的帽子类型控制的。形状是正方形的，除非帽型是圆的，在这种情况下，形状是圆的

pts: 需要绘制的点数组[x0 y0 x1 y1 x2 y2…]

offset: 开始绘制之前要跳过的值的数目

count: 跳过值的偏移量后要处理的值的数量。因为一个点使用两个值，所以绘制的“点”的数量是真实的(计数>> 1)

paint: 用于需要绘制点的Paint对象

例: 绘制3个点

float pts[] = {200, 200, 250, 250, 300, 300, 350, 350};

canvas.drawPoints(pts, 2, 6, redPaint);

public boolean clipPath (Path path)

裁剪路径

path: 裁剪的范围，路径所包括的范围不是空的才有效

例: canvas.clipPath(path);

public boolean clipPath (Path path, Region.Op op)

裁剪路径

path: 裁剪的范围，路径所包括的范围不是空的才有效

op有6中方式如下:

1. DIFFERENCE 差异

2. INTERSECT 交叉

3. REPLACE 替换

4. REVERSE_DIFFERENCE 反向的区别

5. UNION 并集

6. XOR 异或

例: canvas.clipPath(path, DIFFERENCE );

clipRect(RectF rect)

画布裁剪

rect: 与当前剪辑相交的矩形

例:Rect rect = new Rect(100.3, 300, 400, 600);

canvas.clipRect(rect);

clipRect(Rect rect, Region.Op op)

画布裁剪

rect: 与当前剪辑相交的矩形

op有6中方式如下:

1. DIFFERENCE 差异

2. INTERSECT 交叉

3. REPLACE 替换

4. REVERSE_DIFFERENCE 反向的区别

5. UNION 并集

6. XOR 异或

例:Rect rect = new Rect(100, 300, 400, 600);

canvas.clipRect(rect, DIFFERENCE );

clipRect(RectF rect, Region.Op op)

画布裁剪

rect: 与当前剪辑相交的矩形

op有6中方式如下:

1. DIFFERENCE 差异

2. INTERSECT 交叉

3. REPLACE 替换

4. REVERSE_DIFFERENCE 反向的区别

5. UNION 并集

6. XOR 异或

例:Rect rect = new Rect(100.3, 300, 400, 600);

canvas.clipRect(rect, DIFFERENCE );

clipRect(int left, int top, int right, int bottom)

画布裁剪

left: 要与当前剪辑相交的矩形的左侧(X轴值)

top: 与当前剪辑相交的矩形的顶部(Y轴的值)

right: 要与当前剪辑相交的矩形的右侧(X轴值)

bottom: 与当前剪辑相交的矩形的底部(Y轴值)

例: canvas.clipRect(0,0,300,300);

clipRect(float left, float top, float right, float bottom)

将当前剪辑与指定的矩形相交，该矩形用局部坐标表示

left: 要与当前剪辑相交的矩形的左侧(X轴值)

top: 与当前剪辑相交的矩形的顶部(Y轴值)

right: 要与当前剪辑相交的矩形的右侧(X轴值)

bottom: 与当前剪辑相交的矩形的底部(Y轴值)

例: canvas.clipRect(0,0,300.5,300.5);

clipRect(float left, float top, float right, float bottom, Region.Op op)

画布裁剪

left: 要与当前剪辑相交的矩形的左侧(X轴值)

top: 与当前剪辑相交的矩形的顶部(Y轴值)

right: 要与当前剪辑相交的矩形的右侧(X轴值)

bottom: 与当前剪辑相交的矩形的底部(Y轴值)

op有6中方式如下:

1. DIFFERENCE 差异

2. INTERSECT 交叉

3. REPLACE 替换

4. REVERSE_DIFFERENCE 反向的区别

5. UNION 并集

6. XOR 异或

例: canvas.clipRect(0,0,300.5,300.5, INTERSECT );

public void translate (float dx, float dy)

移位; 实际上移动的是坐标，画布的位置并没有变

dx: 在X轴上平移的距离

dy: 在Y轴上平移的距离

例: canvas.translate(100, 100);

public void scale (float sx, float sy)

缩放画布

sx: 在X上缩放的量

sy: 在Y上缩放的量

例:X轴方向放大2倍，Y轴方向方大4倍

canvas.scale(2, 4);

public final void scale (float sx, float sy, float px, float py)

自定义点为中心缩放画布

sx: 在X上缩放的量

sy: 在Y上缩放的量

px 在X轴上平移的距离

py: 在Y轴上平移的距离

例: 移动到(100,100)并X轴方向放大2倍，Y轴方向方大4倍

canvas.scale(2, 4, 100, 100);

public final void rotate (float degrees)

旋转画布

degrees: 旋转的量，以度为单位

例:原点为中心旋转45度(顺时针方向为正)

canvas.rotate(45);

public final void rotate (float degrees, float px, float py)

自定义点为中心旋转画布

degrees: 旋转的量，以度为单位

px 在X轴上平移的距离

py: 在Y轴上平移的距离

例: 旋转45度并移动到(100, 100)

canvas.rotate(45, 100, 100);

public void skew (float sx, float sy)

倾斜画布

这里的倾斜的角度都是tan值,比如要在x轴方向上倾斜30度，那么小数值对应:tan 30

sx: x轴方向上倾斜角度

sy: Y轴方向上倾斜角度

例:canvas.skew(0,1f);