CANVAS的使用详解

CANVAS 的使用详解的使用详解 由于在网络上找到关于 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 对象 2 3 Bitmap bitmap Bitmap createBitmap 200 100 Config ARGB 8888 4 创建一个 canvas 对象 并且开始绘图 5 Canvas canvas new Canvas bitmap 6 7 ImageView imgView new ImageView this 或者其他可以设置背景图 片的 View 控件 8 9 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 轴向下平移 若 dy 0 沿 y 轴向下平移 public void rotate float degrees 说明 旋转一定的角度绘制图像 PS 从截图上看 图像是确实旋转了 但是我找不到旋转的依据中心 下面给出该 Demo 的截图 可以更改一些参数后自己观察效果 1 布局文件 布局文件 main xml 采用了两个 ImageView 来显示 bitmap 绘图对象 让后 采用了一个自定义 View 绘图 1 4 5 6 TextView android layout width fill parent 7 android layout height wrap content android text 显示 canvas 区域以及 clip 方法的使用 8 9 11 12 13 TextView android layout width fill parent 14 android layout height wrap content android text save 方 法和 restore 方法的使用 15 17 18 19 TextView android layout width fill parent 20 android layout height wrap content android text 自定义 View 获得了一个 Canvas 对象和绘图区域 21 23 24 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 5 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 之 前的操作进行影响