Andriod中绘(画)图----Canvas的使用具体解释

转载请注明出处：http://blog.csdn.net/qinjuning    

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

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

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

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

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

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

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

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

以上引自于hellogv的《Android入门第十四篇之绘图》

我们打个简单的例如吧：

Paint        就是画笔

Bitmap    就是画布

Canvas   就是画家

于是，画家能够通过画笔能够在画布上进行不论什么的画画。

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

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

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

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

自己定义View的画图方法为：

//存在canvas对象，即存在默认的显示区域
	@Override
	public void draw(Canvas canvas) {
         //canvas画图
        }

SurfaceView的画图方法为，比如：

           SurfaceView  surfaceView = new MySurfaceView() ;         //创建一个Surface对象
           SurfaceHolder surfaceHolder = surfaceView. getHolder() ;  //获得SurfaceHolder对象
           Canvas   canvas  = surfaceHolder.lockCanvas() ;          //获得canvas对象
           //进行画图操作
           surfaceHolder.unlockCanvasAndPost(canvas) ;            //释放canvas锁，而且显示视图

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

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

   //创建一个的Bitmap对象 

      Bitmap bitmap = Bitmap.createBitmap(200, 100, Config.ARGB_8888) ;
     //创建一个canvas对象，而且開始画图
      Canvas canvas = new Canvas (bitmap) ;

     ImageView imgView  = new ImageView(this) ;  //或者其它能够设置背景图片的View控件

      //为ImageView设置图像
      //将Bitmap对象转换为Drawable图像资
      Drawable drawable = new BitmapDrawable(bitmap) ;
     imgView .setBackgroundDrawable(drawable) ;

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

这两种方式都能够显示我们的画图。

Canvas方法分析:

clipXXX()方法族

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

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

public int save()

说明：保存已经由canvas绘画出来的东西，在save()和restore()方法之间的操作不正确它们造成影响，比如旋转(roate)等。

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

public voidrestore()

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

drawXXX()方法族

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

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

须要注意的方法是：

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

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

该方法的參数图讲解明例如以下：

        各位看官请注意：图中X、Y轴方向标记错误。 自己也懒得又一次修正了。

 

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

    矩形的宽 width  = right – left

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

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

public voidtranslate(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.xkl ：  採用了两个ImageView来显示bitmap画图对象， 让后採用了一个自己定义View画图

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">

	<View android:layout_width="fill_parent" android:layout_height="2dip" android:background="#800080" android:layout_marginTop="2dip"></View>
	<TextView android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="显示canvas区域以及clip方法的使用" />

	<ImageView android:id="@+id/imgClip" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:layout_marginTop="10dip" />

	<View android:layout_width="fill_parent" android:layout_height="2dip" android:background="#800080" android:layout_marginTop="2dip"></View>
	<TextView android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="save方法和restore方法的使用" />
   	<ImageView android:id="@+id/imgSave" android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:layout_marginTop="10dip" />

	<View android:layout_width="fill_parent" android:layout_height="2dip" android:background="#800080" android:layout_marginTop="2dip"></View>
	<TextView android:layout_width="fill_parent"
		android:layout_height="wrap_content" android:text="自己定义View，获得了一个Canvas对象和画图区域" />
	<com.qin.canvas.MyView android:id="@+id/myView"
		android:layout_width="fill_parent" android:layout_height="200px" />

</LinearLayout>

    2、自己定义View  , MyView.java，

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Typeface;
import android.graphics.Bitmap.Config;
import android.util.AttributeSet;
import android.view.View;

public class MyView extends View{

	private Paint paint  = new Paint() ;

	public MyView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	public MyView(Context context , AttributeSet attrs){
		super(context,attrs);
	}
	//存在canvas对象，即存在默认的显示区域
	@Override
	public void draw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.draw(canvas);
		//加粗
		paint.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
		paint.setColor(Color.BLUE);
		canvas.drawText("自己定义View,canvas对象已经存在。", 30, 40, paint);
		canvas.drawRect(10, 10, 30, 30, paint);

		//将icon图像转换为Bitmap对象
      	Bitmap iconbit = BitmapFactory.decodeResource(getResources(), R.drawable.icon) ;
      	canvas.drawBitmap(iconbit, 40,40, paint);
	}
}

  3、主project文件 MainActivity.java

public class MainActivity extends Activity {
	//画笔对象 paint
	private Paint paint = new Paint() ;   //记得要为paint设置颜色，否则 看不到效果
	private ImageView imgClip ;  // 画图区域以及clip方法
	private ImageView imgSave ;  // save方法以及restore

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
          setContentView(R.layout.main) ;

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

          clip_drawCanvas() ; // 画图区域以及clip方法
          save_drawCanvas();  // save方法以及restore
    }
    //这种情况下，须要创建Canvas对象，然后在此对象上进行操作
    //对bitmap操作完毕后，，显示该Bitmap有下面两种操作。
    //1、须要将bitmap转换为Drawable对象  Drawable drawable = new BitmapDrawable(bitmap) ;
    //2、直接setImageBitmap(bitmap)
    private void  clip_drawCanvas(){
      	//将icon图像转换为Bitmap对象
      	Bitmap iconbit = BitmapFactory.decodeResource(getResources(), R.drawable.icon) ;

      	//创建一个的Bitmap对象
      	Bitmap bitmap = Bitmap.createBitmap(200, 150, Config.ARGB_8888)  ;

      	Canvas canvas = new Canvas (bitmap) ;
      	//设置颜色来显示绘图区域
      	canvas.drawColor(Color.RED);

      	paint.setColor(Color.BLACK);
      	canvas.drawText("原先的绘图区域--红色部分", 60,50,paint) ;
      	//画bitmap对象
      	canvas.drawBitmap(iconbit, 20, 20, paint);

      	//剪裁一个区域，当前的操作对象为Rect裁剪的区域
      	Rect rect = new Rect (10,80,180,120) ;

      	//当前的绘图区域为Rect裁剪的区域，而不是我们之前赋值的bitmap
      	canvas.clipRect(rect)  ;
      	canvas.drawColor(Color.YELLOW);
        //设置颜色来显示绘图区域
      	paint.setColor(Color.BLACK);
    	canvas.drawText("裁剪clip后绘图区域-黄色部分", 10,100,paint) ;

    	//将Bitmap对象转换为Drawable图像资源
      	//Drawable drawable = new BitmapDrawable(bitmap) ;
      	//img.setBackgroundDrawable(drawable) ;

    	//显示，同上
      	imgClip.setImageBitmap(bitmap);
    }

    private void save_drawCanvas(){
     	//将icon图像转换为Bitmap对象
      	Bitmap iconbit = BitmapFactory.decodeResource(getResources(), R.drawable.icon) ;

    	//创建一个的Bitmap对象
      	Bitmap bitmap = Bitmap.createBitmap(200, 100, Config.ARGB_8888)  ;

    	Canvas canvas = new Canvas (bitmap) ;

    	paint.setColor(Color.GREEN);
    	paint.setTextSize(16);  //设置字体大小
    	canvas.drawRect(10, 10, 50, 8, paint);
    	canvas.drawText("我没有旋转",50, 10, paint);
    	//保存canvas之前的操作,在sava()和restore之间的操作不会对canvas之前的操作进行影响
    	canvas.save() ;

    	//顺时针旋转30度
    	canvas.rotate(30) ;
    	canvas.drawColor(Color.RED);
    	canvas.drawBitmap(iconbit, 20, 20, paint);
    	canvas.drawRect(50, 10, 80, 50, paint);
        //canvas.translate(20,20);
    	canvas.drawText("我是旋转的",115,20, paint);

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

    	//平移(20,20)个像素
    	//canvas.translate(20,20);
    	canvas.drawRect(80, 10, 110,30, paint);
    	canvas.drawText("我没有旋转",115,20, paint);

    	//将Bitmap对象转换为Drawable图像资
    	//为ImageView设置图像
    	//imgSave.setImageBitmap(bitmap);

    	Drawable drawable = new BitmapDrawable(bitmap) ;
    	imgSave.setBackgroundDrawable(drawable) ;

    }
}

总的来说，Canvas理解起来还是比較纠结的，尤其是它的几个方法真是让人头疼， 希望你可以自己编写对应的代码

理解透彻，才真正的有所收获。

时间： 2024-10-03 14:14:53

Andriod中绘(画)图----Canvas的使用具体解释的相关文章

怎么使用CAD看图中的画线功能

设计师们每天的日常工作就是绘制图纸,那都是借助CAD编辑器来进行绘制的,CAD编辑器中绘制的图纸都是dwg格式的,需要使用CAD看图软件才能够对图纸进行查看,那在使用CAD看图软件的时候,怎么使用CAD看图中的画线功能?下面我们就一起来看看吧. 步骤一:首先,在电脑中任意的打开一个浏览器,然后在浏览器的搜索框中搜索迅捷CAD看图,在搜索的结果中鼠标点击进入下载界面中,接着点击下载安装CAD看图到电脑上就可以了. 步骤二::接下来,安装完成之后移动鼠标到CAD看图所在的位置上,再双击鼠标左键将该软

html5 中的SVG 和canvas

想到昨天看资料的时候,发现html5 中的SVG 和canvas 都可以表示图形,那它们到底有哪些区别呢?该如何正确的使用它们呢? 1.SVG:可缩放矢量图形,(Scalable Vector Graphics),SVG使用XML格式定义图像. canvas:<canvas> 标签定义图形,比如图表和其他图像;<canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 2.<canvas> 标记和 SVG 的另外一个重要的不同点是:(VML我还没有了解过,后续会进行

二维坐标轴中绘三维图形

代码部分 CRect rect; GetClientRect(rect);  pDC->SetMapMode(MM_ANISOTROPIC);  pDC->SetWindowExt(rect.Width(), rect.Height());  pDC->SetViewportExt(rect.Width(), -rect.Height());  pDC->SetViewportOrg(rect.Width()/2, rect.Height()/2); CRect rect1(CPo

Android中使用SurfaceView和Canvas来绘制动画

其实每个View中都有Canvas可以用来绘制动画,只需要在这个View中重载onDraw()方法就可以,但是SurfaceView类是一个专门用来制动动画的类. Canvas(中文叫做"画布")就和HTML5中的canvas标签一样可以在一定区域内自由绘制图形.Canvas+SurfaceView制作的动画与View Animation和Property Animation这类动画比起来更加适合大量的集中播放的动画,比如游戏画面.相机的图像显示等. 因为SurfaceView通常会在

安卓图表引擎AChartEngine(四) - 源码示例 嵌入Acitivity中的折线图

前面几篇博客中都是调用ChartFactory.get***Intent()方法,本节讲的内容调用ChartFactory.get***View()方法,这个方法调用的结果可以嵌入到任何一个Activity中,作为Activity的一部分. XYChartBuilder.java(源码分析见注释) [java] view plaincopy package org.achartengine.chartdemo.demo.chart; import java.io.File; import jav

Matlab-Octave中绘制网格图和等高线：mesh 和 surf

x=linspace(-50, 50, 50); % 在x轴上取50点y=linspace(-25, 25, 25); % 在y轴上取25点[xx,yy]=meshgrid(x, y); % xx和yy都是矩阵zz=8000-2.*xx.*xx-5.*yy.*yy; % 计算函数值,zz也是21x21的矩阵surf(xx, yy, zz); % 画出立体曲面图colorbar; %如下图,右边那个色卡 可按回车 contour(xx,yy,zz)colorbar 可按回车surfc(xx,yy,

几何画板中去除画出的线段的教程

在几何画板中作图和在黑板和纸上画图不一样,没有直接可以使用的橡皮擦或者黑板擦来将画的图擦除,但是在几何画板中如果画错了图或者不需要某个图形,也是可以不让它显示出来的,这样就不会妨碍继续作图.下面就以如何在几何画板中去除画出的线段为例给大家作详细介绍. 方法一 如果该线段没有子对象的,即没有其他图像是建立在这条线段基础上做出来的,那么这个线段就是独立存在的,去除它多作图没有任何影响的,这个时候要去掉线段的话,直接选中该线段,执行"编辑"--"剪切"命令或按Delete

ASP.NET中数据棒图，饼图，柱状图的实现

Web中绘制图形的方法大致有: 1. VML方式:功能强大,但是非常麻烦. 推荐:http://www.elook.net.cn/vml/ 2.使用控件:Dandus, Aspose.chart,ComponentOne使用方便.虽然有破解,但非开源. ComponetOne: http://blog.csdn.net/ChengKing/category/146827.aspx 3.结合OFFICE Web Components开发. 4.使用商用工控组件. 5.自己编写程序. 数据棒图实现

快速合并XMind中的导图

你知道吗,XMind有一个特别神奇的功能,它能够将两个完全不一样的导图合并在一张导图中,并且保存全部内容.这只需要通过合并工具的简单几步操作就可以完成,让你的两个或者更多的导图结合在一起. 打开你的XMind思维导图文件,或者你也可以重新绘制导图. 确保打开两个以上独立导图,可以是不同画布或是不同工作簿. 点击[工具]中的合并图选项按钮. 将会出现合并图选项窗口,在其中按工作簿展现了所有打开的导图.选择你想要进行合并的导图,导图将会合并到当前所在导图中. 选择好后点击合并.将会出现合并提示框,讲