CANVAS的使用详解

来源：互联网发布：模仿优化编辑：程序博客网时间：2024/06/17 02:46

由于在网络上找到关于Canvas的使用都比较抽象，也许是我的逻辑思维不太好吧，总是感觉理解起来比较困难，

尤其是对save()和restore()方法的使用。本篇文章的内容就是对Canvas的使用进行一下总结，包括它的两种不同的使用

情节和它的一些方法进行一下说明。

1 Bitmap，可以来自资源/文件，也可以在程序中创建，实际上的功能相当于图片的存储空间；

2 Canvas，紧密与Bitmap联系，把Bitmap比喻内容的话，那么Canvas就是提供了众多方法操作Bitamp的平台；

3 Paint，与Canvas紧密联系，是"画板"上的笔刷工具，也用于设置View控件上的样式；

4 Drawable，如果说前三者是看不见地在内存中画图(虚拟的)，那么Drawable就是把前三者绘图结果表现出来的接口(真实的)。

Drawable多个子类，例如：位图(BitmapDrawable)、图形(ShapeDrawable)、图层(LayerDrawable)等。

我们打个简单的比方吧：

Paint 就是画笔

Bitmap 就是画布

Canvas 就是画家

于是，画家可以通过画笔可以在画布上进行任何的画画。

Canvas的两种使用情形，从Canvas对象的获得角度分析：

1、自定义View和自定义SurfaceView中获得Canvas对象

由于自定义View和SurfaceView在显示界面中已经获得了显示区域，canvas对象只不过是在其显示(绘画)区域进行界面布局

的设计，当操作完毕后，系统会显示canvas的操作结果。

自定义View的绘图方法为：

1. //存在canvas对象，即存在默认的显示区域

2. @Override

3. publicvoid draw(Canvas canvas) {

4. //canvas绘图

5. }

SurfaceView的绘图方法为，例如：

1. SurfaceView surfaceView = new MySurfaceView() ; //创建一个Surface对象

2. SurfaceHolder surfaceHolder = surfaceView. getHolder() ; //获得SurfaceHolder对象

3. Canvas canvas = surfaceHolder.lockCanvas() ; //获得canvas对象

4. //进行绘图操作

5. surfaceHolder.unlockCanvasAndPost(canvas) ; //释放canvas锁，并且显示视图

2、在其他情形下，我们需要通过代码创建一个Canvas对象，并且在绘画成功后，将该画图区域转换为Drawable图片

或者通过setBitmap(bitmap)显现出来。一般步骤为：

1. //创建一个的Bitmap对象

3. Bitmap bitmap = Bitmap.createBitmap(200, 100, Config.ARGB_8888) ;

4. //创建一个canvas对象，并且开始绘图

5. Canvas canvas = new Canvas (bitmap) ;

7. ImageView imgView = new ImageView(this) ; //或者其他可以设置背景图片的View控件

10. //为ImageView设置图像

11. //将Bitmap对象转换为Drawable图像资

12. Drawable drawable = new BitmapDrawable(bitmap) ;

13. imgView .setBackgroundDrawable(drawable) ;

14.

15.

16. 或者简单点： imgView .setImageBitmap(bitmap);

这两种方式都可以显示我们的绘图。

Canvas方法分析:

clipXXX()方法族

说明：在当前的画图区域裁剪(clip)出一个新的画图区域，这个画图区域就是canvas对象的当前画图区域了。

例如：clipRect(new Rect())，那么该矩形区域就是canvas的当前画图区域了。

public int save()

说明：保存已经由canvas绘画出来的东西，在save()和restore()方法之间的操作不对它们【以前绘制好的，即save保存的】造成影响，例如旋转(roate)等。

而且对canvas的操作(roate和translate)都是临时的，restore()后不再存在。

public void restore()

说明：复原sava()方法之前保存的东西资源。

drawXXX()方法族

说明：以一定的坐标值在当前画图区域画图。

注意：图层会叠加，即后面绘画的图层会覆盖前面绘画的图层。

需要注意的方法是：

public voiddrawRect(float left, float top, float right, float bottom,Paint paint)

说明：绘制一个矩型。需要注明的是绘制矩形的参数和Java中的方法不一样。

该方法的参数图解说明如下：

那么，矩形的高 height = bottom - right

矩形的宽 width = right – left

PS ：假如drawRect的参数有误，比如right < left，Android是不会给我们检查的，也不会提示相应的错误信息，

但它会绘画出一个高或宽很小的矩形，可能不是你希望的。

public void translate (float dx, float dy)

说明：在当前的坐标上平移(x,y)个像素单位

若dx <0 ，沿x轴向上平移；dx >0 沿x轴向下平移

若dy <0 ，沿y轴向上平移；dy >0 沿y轴向下平移

public void rotate(float degrees)

说明：旋转一定的角度绘制图像。

PS ：从截图上看，图像是确实旋转了，但是我找不到旋转的依据中心。

下面给出该Demo的截图，可以更改一些参数后自己观察效果。

1、布局文件 main.xml ： 采用了两个ImageView来显示bitmap绘图对象，让后采用了一个自定义View绘图

<?xml version="1.0" encoding="utf-8"?>

1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

2. android:orientation="vertical" android:layout_width="fill_parent"

3. android:layout_height="fill_parent">

5. <View android:layout_width="fill_parent" android:layout_height="2dip" android:background="#800080" android:layout_marginTop="2dip"></View>

6. <TextView android:layout_width="fill_parent"

7. android:layout_height="wrap_content" android:text="显示canvas区域以及clip方法的使用" />

9. <ImageView android:id="@+id/imgClip" android:layout_width="fill_parent"

10. android:layout_height="wrap_content" android:layout_marginTop="10dip" />

11.

12. <View android:layout_width="fill_parent" android:layout_height="2dip" android:background="#800080" android:layout_marginTop="2dip"></View>

13. <TextView android:layout_width="fill_parent"

14. android:layout_height="wrap_content" android:text="save方法和restore方法的使用" />

15. <ImageView android:id="@+id/imgSave" android:layout_width="fill_parent"

16. android:layout_height="wrap_content" android:layout_marginTop="10dip" />

17.

18. <View android:layout_width="fill_parent" android:layout_height="2dip" android:background="#800080" android:layout_marginTop="2dip"></View>

19. <TextView android:layout_width="fill_parent"

20. android:layout_height="wrap_content" android:text="自定义View，获得了一个Canvas对象和绘图区域" />

21. <com.qin.canvas.MyView android:id="@+id/myView"

22. android:layout_width="fill_parent" android:layout_height="200px" />

23.

24. </LinearLayout>

2、自定义View , MyView.java，

import android.content.Context;

1. import android.graphics.Bitmap;

2. import android.graphics.BitmapFactory;

3. import android.graphics.Canvas;

4. import android.graphics.Color;

5. import android.graphics.Paint;

6. import android.graphics.Typeface;

7. import android.graphics.Bitmap.Config;

8. import android.util.AttributeSet;

9. import android.view.View;

10.

11. publicclass MyView extends View{

12.

13. private Paint paint = new Paint() ;

14.

15. public MyView(Context context) {

16. super(context);

17. // TODO Auto-generated constructor stub

18. }

19. public MyView(Context context , AttributeSet attrs){

20. super(context,attrs);

21. }

22. //存在canvas对象，即存在默认的显示区域

23. @Override

24. publicvoid draw(Canvas canvas) {

25. // TODO Auto-generated method stub

26. super.draw(canvas);

27. //加粗

28. paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));

29. paint.setColor(Color.BLUE);

30. canvas.drawText("自定义View,canvas对象已经存在。", 30, 40, paint);

31. canvas.drawRect(10, 10, 30, 30, paint);

32.

33. //将icon图像转换为Bitmap对象

34. Bitmap iconbit = BitmapFactory.decodeResource(getResources(), R.drawable.icon) ;

35. canvas.drawBitmap(iconbit, 40,40, paint);

36. }

37. }

3、主工程文件MainActivity.java

public class MainActivity extends Activity {

1. //画笔对象paint

2. private Paint paint = new Paint() ; //记得要为paint设置颜色，否则看不到效果

3. private ImageView imgClip ; //绘图区域以及clip方法

4. private ImageView imgSave ; // save方法以及restore

6. /** Called when the activity is first created. */

7. @Override

8. publicvoid onCreate(Bundle savedInstanceState) {

9. super.onCreate(savedInstanceState);

10. setContentView(R.layout.main) ;

11.

12. imgClip = (ImageView)findViewById(R.id.imgClip) ;

13. imgSave = (ImageView)findViewById(R.id.imgSave);

14.

15. clip_drawCanvas() ; //绘图区域以及clip方法

16. save_drawCanvas(); // save方法以及restore

17. }

18. //这样的情况下，需要创建Canvas对象，然后在此对象上进行操作

19. //对bitmap操作完成后，，显示该Bitmap有以下两种操作。

20. //1、需要将bitmap转换为Drawable对象Drawable drawable = new BitmapDrawable(bitmap) ;

21. //2、直接setImageBitmap(bitmap)

22. privatevoid clip_drawCanvas(){

23. //将icon图像转换为Bitmap对象

24. Bitmap iconbit = BitmapFactory.decodeResource(getResources(), R.drawable.icon) ;

25.

26. //创建一个的Bitmap对象

27. Bitmap bitmap = Bitmap.createBitmap(200, 150, Config.ARGB_8888) ;

28.

29. Canvas canvas = new Canvas (bitmap) ;

30. //设置颜色来显示画图区域

31. canvas.drawColor(Color.RED);

32.

33. paint.setColor(Color.BLACK);

34. canvas.drawText("原先的画图区域--红色部分", 60,50,paint) ;

35. //画bitmap对象

36. canvas.drawBitmap(iconbit, 20, 20, paint);

37.

38. //剪裁一个区域，当前的操作对象为Rect裁剪的区域

39. Rect rect = new Rect (10,80,180,120) ;

40.

41. //当前的画图区域为Rect裁剪的区域，而不是我们之前赋值的bitmap

42. canvas.clipRect(rect) ;

43. canvas.drawColor(Color.YELLOW);

44. //设置颜色来显示画图区域

45. paint.setColor(Color.BLACK);

46. canvas.drawText("裁剪clip后画图区域-黄色部分", 10,100,paint) ;

47.

48. //将Bitmap对象转换为Drawable图像资源

49. //Drawable drawable = new BitmapDrawable(bitmap) ;

50. //img.setBackgroundDrawable(drawable) ;

51.

52. //显示，同上

53. imgClip.setImageBitmap(bitmap);

54. }

55.

56. privatevoid save_drawCanvas(){

57. //将icon图像转换为Bitmap对象

58. Bitmap iconbit = BitmapFactory.decodeResource(getResources(), R.drawable.icon) ;

59.

60. //创建一个的Bitmap对象

61. Bitmap bitmap = Bitmap.createBitmap(200, 100, Config.ARGB_8888) ;

62.

63. Canvas canvas = new Canvas (bitmap) ;

64.

65. paint.setColor(Color.GREEN);

66. paint.setTextSize(16); //设置字体大小

67. canvas.drawRect(10, 10, 50, 8, paint);

68. canvas.drawText("我没有旋转",50, 10, paint);

69. //保存canvas之前的操作,在sava()和restore之间的操作不会对canvas之前的操作进行影响

70. canvas.save() ;

71.

72. //顺时针旋转30度

73. canvas.rotate(30) ;

74. canvas.drawColor(Color.RED);

75. canvas.drawBitmap(iconbit, 20, 20, paint);

76. canvas.drawRect(50, 10, 80, 50, paint);

77. //canvas.translate(20,20);

78. canvas.drawText("我是旋转的",115,20, paint);

79.

80. //复原之前save()之前的属性,并且将save()方法之后的roate(),translate()以及clipXXX()方法的操作清空

81. canvas.restore();

82.

83. //平移(20,20)个像素

84. //canvas.translate(20,20);

85. canvas.drawRect(80, 10, 110,30, paint);

86. canvas.drawText("我没有旋转",115,20, paint);

87.

88. //将Bitmap对象转换为Drawable图像资

89. //为ImageView设置图像

90. //imgSave.setImageBitmap(bitmap);

91.

92. Drawable drawable = new BitmapDrawable(bitmap) ;

93. imgSave.setBackgroundDrawable(drawable) ;

94.

95. }

96. }

总的来说，Canvas理解起来还是比较纠结的，尤其是它的几个方法真是让人头疼，希望你能够自己编写相应的代码理解透彻，

0 0