Android中绘(画)图Canvas的简析

除了使用已经有的图片之外，Android应用常常需要在运行时动态生成图片，比如一个手机游戏，游戏界面看上去丰富多彩，而且可以随着用户动作而动态改变，这就需要借助于Android的绘图支持了。

Android绘图继承View组件，并且重写他的onDraw(Canvas canvas)方法即可。重写onDraw(Canvas canvas)方法时涉及一个绘图API：Canvas，Canvas代表了依附于指定View的画布，他提供的如下方法绘制各种图形：

Android中绘(画)图Canvas的简析_第1张图片

Canvas提供的上面方法还涉及一个API：Paint，Paint代表了Canvas上的画笔，因此Paint类主要用于设置绘制风格，包括画笔颜色，画笔粗细，填充风格等，Paint提供了如下方法：

Android中绘(画)图Canvas的简析_第2张图片

在Canvas提供的绘制方法中还用到了一个API：Path，Path代表任意多条直线连接而成的任意图形，当Canvas根据Path绘制时，他可以绘制出任意的形状。

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的绘图方法为：

    //存在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 intsave()

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

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

public void restore()

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

drawXXX()方法族

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

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

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

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

public voidtranslate(float dx, float dy)

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

若dx <0 ，沿x轴向左平移； dx >0 沿x轴向右平移

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

public voidrotate(float degrees)

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

public voidscale(float sx,float sy,float px,float py)

说明：对Canvas执行缩放变换

public voidskew(float sx,float sy)

说明：对Canvas执行倾斜变换

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

Android中绘(画)图Canvas的简析_第3张图片

1、布局文件 main.xml：

采用了两个ImageView来显示bitmap绘图对象，然后采用了一个自定义View绘图

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <View        android:layout_width="fill_parent"        android:layout_height="2dip"        android:layout_marginTop="2dip"        android:background="#800080" >    </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:layout_marginTop="2dip"        android:background="#800080" >    </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:layout_marginTop="2dip"        android:background="#800080" >    </View>    <TextView        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:text="自定义View，获得了一个Canvas对象和绘图区域" />    <com.example.canvastest.MyView        android:id="@+id/myView"        android:layout_width="fill_parent"        android:layout_height="200px" /></LinearLayout>

2、自定义View , MyView.java

package com.example.canvastest;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.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.ic_launcher);  canvas.drawBitmap(iconbit, 40, 40, paint); }}

3、主工程文件 MainActivity.java

package com.example.canvastest;import android.app.Activity;import android.graphics.Bitmap;import android.graphics.Bitmap.Config;import android.graphics.BitmapFactory;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.drawable.BitmapDrawable;import android.graphics.drawable.Drawable;import android.os.Bundle;import android.widget.ImageView;/* * paint画笔 * Canvas画布 * Bitmap画，作品 */public class MainActivity extends Activity {// 画笔对象 paintprivate Paint paint = new Paint(); // 记得要为paint设置颜色，否则 看不到效果private ImageView imgClip; // 绘图区域以及clip方法private ImageView imgSave; // save方法以及restore/** Called when the activity is first created. */@Overridepublic 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() {// 将ic_launcher图像转换为Bitmap对象Bitmap iconbit = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher);// 创建一个的Bitmap对象，400、200为wid和heiBitmap bitmap = Bitmap.createBitmap(400, 200, Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);// 设置颜色来显示画图区域，画布区域为红色canvas.drawColor(Color.RED);// 设置画笔颜色为黑色paint.setColor(Color.BLACK);canvas.drawText("原先的画图区域--红色部分", 120, 60, paint);// 画bitmap对象canvas.drawBitmap(iconbit, 20, 20, paint);// 剪裁一个区域，当前的操作对象为Rect裁剪的区域// 左上右下两个坐标点来控制矩形区域（20,120）（300,180）Rect rect = new Rect(20, 120, 300, 180);// 当前的画图区域为Rect裁剪的区域，而不是我们之前赋值的bitmapcanvas.clipRect(rect);canvas.drawColor(Color.YELLOW);// 设置画笔颜色为黑色paint.setColor(Color.BLACK);// （30,140）140>120，否则字显示不出来// x默认是字符串的左边在屏幕的位置，如果设置了paint.setTextAlign(Paint.Align.CENTER);那就是字符的中心，y是指定这个字符baseline在屏幕上的位置。canvas.drawText("裁剪clip后画图区域-黄色部分", 30, 140, paint);// 将Bitmap对象转换为Drawable图像资源// Drawable drawable = new BitmapDrawable(bitmap) ;// img.setBackgroundDrawable(drawable) ;// 显示，同上，把画好的作品显示出来imgClip.setImageBitmap(bitmap);}private void save_drawCanvas() {// 将ic_launcher图像转换为Bitmap对象Bitmap iconbit = BitmapFactory.decodeResource(getResources(),R.drawable.ic_launcher);// 创建一个的Bitmap对象Bitmap bitmap = Bitmap.createBitmap(400, 200, Config.ARGB_8888);Canvas canvas = new Canvas(bitmap);paint.setColor(Color.GREEN);paint.setTextSize(20); // 设置字体大小// 这之前的操作被保存下来了canvas.drawRect(10, 10, 100, 100, paint);//这个没有显示出来canvas.drawText("我没有旋转", 50, 50, paint);// 保存canvas之前的操作,在sava()和restore之间的操作不会对canvas之前的操作进行影响canvas.save();// 顺时针旋转30度canvas.rotate(30);canvas.drawColor(Color.BLUE);canvas.drawBitmap(iconbit, 40, 20, paint);canvas.drawRect(100, 20, 120, 60, paint);// canvas.translate(20,20);canvas.drawText("我是旋转的", 120, 40, paint);// 复原之前save()之前的属性,并且将save()方法之后的roate(),translate()以及clipXXX()方法的操作清空canvas.restore();// 平移(20,20)个像素// canvas.translate(20,20);canvas.drawRect(80, 10, 110, 50, paint);//作品显示出这个canvas.drawText("我没有旋转", 115, 40, paint);// 将Bitmap对象转换为Drawable图像资// 为ImageView设置图像// imgSave.setImageBitmap(bitmap);Drawable drawable = new BitmapDrawable(bitmap);imgSave.setBackgroundDrawable(drawable);}}

下面的程序示范了如何在Android应用中绘制基本的几何图形，程序关键在于一个自定义View组件，程序重写该View组件的onDraw(Canvas canvas)方法，接下来在该Canvas上绘制了大量几何图形。

1.main.xml文件

<?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"><org.crazyit.image.MyView  android:layout_width="wrap_content" android:layout_height="wrap_content"/></LinearLayout>

2.MyView.java文件

package org.crazyit.image;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.LinearGradient;import android.graphics.Paint;import android.graphics.Path;import android.graphics.RectF;import android.graphics.Shader;import android.util.AttributeSet;import android.view.View;public class MyView extends View{public MyView(Context context, AttributeSet set){super(context, set);}@Override// 重写该方法，进行绘图protected void onDraw(Canvas canvas){super.onDraw(canvas);// 把整张画布绘制成白色canvas.drawColor(Color.WHITE);Paint paint = new Paint();// 去锯齿paint.setAntiAlias(true);paint.setColor(Color.BLUE);paint.setStyle(Paint.Style.STROKE);paint.setStrokeWidth(3);// 绘制圆形canvas.drawCircle(40, 40, 30, paint);// 绘制正方形canvas.drawRect(10, 80, 70, 140, paint);// 绘制矩形canvas.drawRect(10, 150, 70, 190, paint);RectF re1 = new RectF(10, 200, 70, 230);// 绘制圆角矩形canvas.drawRoundRect(re1, 15, 15, paint);RectF re11 = new RectF(10, 240, 70, 270);// 绘制椭圆canvas.drawOval(re11, paint);// 定义一个Path对象，封闭成一个三角形。Path path1 = new Path();path1.moveTo(10, 340);path1.lineTo(70, 340);path1.lineTo(40, 290);path1.close();// 根据Path进行绘制，绘制三角形canvas.drawPath(path1, paint);// 定义一个Path对象，封闭成一个五角形。Path path2 = new Path();path2.moveTo(26, 360);path2.lineTo(54, 360);path2.lineTo(70, 392);path2.lineTo(40, 420);path2.lineTo(10, 392);path2.close();// 根据Path进行绘制，绘制五角形canvas.drawPath(path2, paint);// ----------设置填充风格后绘制----------paint.setStyle(Paint.Style.FILL);paint.setColor(Color.RED);canvas.drawCircle(120, 40, 30, paint);//绘制正方形canvas.drawRect(90, 80, 150, 140, paint);//绘制矩形canvas.drawRect(90, 150, 150, 190, paint);RectF re2 = new RectF(90, 200, 150, 230);//绘制圆角矩形canvas.drawRoundRect(re2, 15, 15, paint);RectF re21 = new RectF(90, 240, 150, 270);// 绘制椭圆canvas.drawOval(re21, paint);Path path3 = new Path();path3.moveTo(90, 340);path3.lineTo(150, 340);path3.lineTo(120, 290);path3.close();//绘制三角形canvas.drawPath(path3, paint);Path path4 = new Path();path4.moveTo(106, 360);path4.lineTo(134, 360);path4.lineTo(150, 392);path4.lineTo(120, 420);path4.lineTo(90, 392);path4.close();//绘制五角形canvas.drawPath(path4, paint);// ----------设置渐变器后绘制----------// 为Paint设置渐变器Shader mShader = new LinearGradient(0, 0, 40, 60, new int[] {Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW }, null , Shader.TileMode.REPEAT);paint.setShader(mShader);//设置阴影paint.setShadowLayer(45 , 10 , 10 , Color.GRAY);// 绘制圆形canvas.drawCircle(200, 40, 30, paint);// 绘制正方形canvas.drawRect(170, 80, 230, 140, paint);// 绘制矩形canvas.drawRect(170, 150, 230, 190, paint);RectF re3 = new RectF(170, 200, 230, 230);// 绘制圆角矩形canvas.drawRoundRect(re3, 15, 15, paint);RectF re31 = new RectF(170, 240, 230, 270);// 绘制椭圆canvas.drawOval(re31, paint);Path path5 = new Path();path5.moveTo(170, 340);path5.lineTo(230, 340);path5.lineTo(200, 290);path5.close();// 根据Path进行绘制，绘制三角形canvas.drawPath(path5, paint);Path path6 = new Path();path6.moveTo(186, 360);path6.lineTo(214, 360);path6.lineTo(230, 392);path6.lineTo(200, 420);path6.lineTo(170, 392);path6.close();// 根据Path进行绘制，绘制五角形canvas.drawPath(path6, paint);// ----------设置字符大小后绘制----------paint.setTextSize(24);paint.setShader(null);// 绘制7个字符串canvas.drawText(getResources().getString(R.string.circle), 240, 50,paint);canvas.drawText(getResources().getString(R.string.square), 240, 120,paint);canvas.drawText(getResources().getString(R.string.rect), 240, 175,paint);canvas.drawText(getResources().getString(R.string.round_rect), 230,220, paint);canvas.drawText(getResources().getString(R.string.oval), 240,260, paint);canvas.drawText(getResources().getString(R.string.triangle), 240, 325,paint);canvas.drawText(getResources().getString(R.string.pentagon), 240, 390,paint);}}

3.主Activity.java文件

package org.crazyit.image;import android.app.Activity;import android.os.Bundle;public class CanvasTest extends Activity{@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.main);}}

运行结果如下：

Android中绘(画)图Canvas的简析_第4张图片

Canvas方法分析:

更多相关文章

随机推荐