Canvas学习

原文地址:  http://blog.sina.com.cn/s/blog_61ef49250100qw9x.html

 

今晚瞎折腾，闲着没事画了个机器人——android，浪费了一个晚上的时间。画这丫还真不容易，为那些坐标，差点砸了键盘，好在最后画出个有模有样的，心稍安。

   下面来看看画这么个机器人需要些什么东西：主要是Canvas类(android.graphics.Canvas)。Canvas类就是表示一块画布，你可以在上面画你想画的东西。当然，你还可以设置画布的属性，如画布的颜色/尺寸等。Canvas提供了如下一些方法：

 

    Canvas():创建一个空的画布，可以使用setBitmap()方法来设置绘制的具体画布；

 

    Canvas(Bitmap bitmap):以bitmap对象创建一个画布，则将内容都绘制在bitmap上，bitmap不得为null;

 

    Canvas(GL gl):在绘制3D效果时使用，与OpenGL有关；

 

    drawColor:设置画布的背景色；

 

    setBitmap:设置具体的画布；

 

    clipRect:设置显示区域，即设置裁剪区；

 

    isOpaque:检测是否支持透明；

 

    rotate:旋转画布；

 

  下面我们就用Canvas来画一个机器人——android,oh my love!一看就知道，机器人的外形是由矩形/圆/圆弧/线条组成的，因此要知道怎么用Canvas画矩形/圆/圆弧和线条。可惜阿，上面几个方法基本都没用上。

 

    canvas.drawRect(RectF,Paint)方法用于画矩形，第一个参数为图形显示区域，第二个参数为画笔，设置好图形显示区域Rect和画笔Paint后，即可画图；

 

    canvas.drawRoundRect(RectF, float, float, Paint) 方法用于画圆角矩形，第一个参数为图形显示区域，第二个参数和第三个参数分别是水平圆角半径和垂直圆角半径。

 

    canvas.drawLine(startX, startY, stopX, stopY, paint)：前四个参数的类型均为float，最后一个参数类型为Paint。表示用画笔paint从点（startX,startY）到点（stopX,stopY）画一条直线；

 

    canvas.drawArc(oval, startAngle, sweepAngle, useCenter, paint)：第一个参数oval为RectF类型，即圆弧显示区域，startAngle和sweepAngle均为float类型，分别表示圆弧起始角度和圆弧度数,3点钟方向为0度，useCenter设置是否显示圆心，boolean类型，paint为画笔；

 

    canvas.drawCircle(float,float, float, Paint)方法用于画圆，前两个参数代表圆心坐标，第三个参数为圆半径，第四个参数是画笔；

 

   清楚这些函数的用法之后，我们是否就噼里啪啦地敲代码了呢？别急，我们来搞个设计。既然这些函数都是用来画图的，也就是说它们有共性——画。所有我们应该设计一个接口interface，对于这次任务，只需要一个成员方法就足够了。对于每一个图形，是只用一个方法画，还是将画图封装成类呢？我建议是封装成类。因为说不定你明天就会嫌弃它不会动，想它动起来，或者你过两天又希望在机器人的每个部位加点什么。所以我将每一个图形封装成类，都实现一个名叫drawGraphics的接口。最后，要记得给UI创建一个线程哦。

 

   就这样我开始动手做了，但是很快就发现问题了。什么问题？在定位的时候，也就是设置每个图形的显示区域时，我自以为这里的Rect跟Java的Rectangle是一样的，但我错了。原来这厮跟MFC中的RECT结构才是一家人，害我折腾了许久。

 

    Rect（int left,int top,int right,int bottom）

 

    left

              矩形左上角X坐标值

    top

              矩形左上角Y坐标值

    right

              矩形右下角X坐标值

    bottom

              矩形右下角Y坐标值

 

   下面借用一张图说明（忘了哪个博客找来的(*^__^*) 嘻嘻……），如Rect(150, 75, 260, 120) 一目了然吧。

 

 

 

 

    还有一点非常重要的是，屏幕最上方的状态栏和标题栏总占去来50的高度，同时坐标原点下移到标题栏下方，即如果你的手机屏幕分辨率为（320X480），编程时如果没有设置去除状态栏和标题栏，你只能操控的范围只有（320X430），而且坐标原点下移。记住咯

//drawGraphics.java
package  com.scgm.android.drawable;
import android.graphics.Canvas;
 
 
public interface  drawGraphics {
public void  draw(Canvas canvas);
}


 
package  com.scgm.android.drawable;

import android.content.Context;
import  android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;

 

public classGameView  extends View  implements  Runnable{

        //声明Paint对象
       private  Paint mPaint= null;
       privatedrawGraphics drawGraphics= null;
 
      
       public GameView(Context context) {
            super(context);
           // TODOAuto-generated constructor stub
           //构建对象
           mPaint= new Paint();
           //开启线程
           new  Thread(this).start();
       }

       public void  onDraw(Canvas canvas) {
           super.onDraw(canvas);
           //设置画布为黑色背景
           //canvas.drawColor(Color.BLACK);
           //消除锯齿
           mPaint.setAntiAlias(true);
          //设置图形为空心
           mPaint.setStyle(Paint.Style.STROKE);
           //绘制空心几何图形
           drawGraphics=  new  DrawCircle();
           drawGraphics.draw(canvas);
           drawGraphics=  new  DrawLine();
           drawGraphics.draw(canvas);
           drawGraphics= newDrawRect();
           drawGraphics.draw(canvas);
       }
 
        
          @Override
          public void run() {
               // TODOAuto-generated method stub
               while(!Thread.currentThread().isInterrupted()) {
                    try{
                          Thread.sleep(1000);
                    } catch(InterruptedException e) {
                      // TODO: handle exception
                      Thread.currentThread().interrupt();
                    }
                     //使用postInvalidate 可以直接在线程中更新界面
                      postInvalidate(); 
               }
         }
 
}

//DrawRect.java
package com.scgm.android.drawable;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;

 
 
public class DrawRect  implements  drawGraphics{
 
       private  Paint paint=  null;
 
       public DrawRect(){
       paint= new  Paint();
}
 
      
         @Override
         public void  draw(Canvas canvas) {
             // TODOAuto-generated method stub
             //定义圆角矩形对象
             RectF rectF1 = newRectF(120,170,370,500);
             RectF rectF2 = newRectF(40,150,90,400);
             RectF rectF3 = newRectF(390,150,440,400);
             RectF rectF4 = newRectF(140,520,200,650);
             RectF rectF5 = newRectF(290,520,350,650);
             paint.setAntiAlias(true);
             //设置画笔颜色为BLUE
             paint.setColor(Color.GREEN);
             //在画布上绘制圆角矩形/圆弧/直线
             canvas.drawRoundRect(rectF1, 20, 20, paint);
             canvas.drawRoundRect(rectF2, 20, 20, paint);
             canvas.drawRoundRect(rectF3, 20, 20, paint);
             canvas.drawRoundRect(rectF4, 20, 20, paint);
             canvas.drawRoundRect(rectF5, 20, 20, paint);
        }
}

//DrawLine.java
package  com.scgm.android.drawable;

import android.graphics.Canvas;
import  android.graphics.Color;
import android.graphics.Paint;
 
 
public class DrawLine  implements  drawGraphics{
 
       private Paint paint=  null;
 
       public  DrawLine(){
           paint=  new  Paint();
       }
      
        @Override
        publicvoiddraw(Canvas canvas) {
            // TODOAuto-generated method stub
            paint.setAntiAlias(true);
            //绘制直线
            paint.setColor(Color.GREEN);
            //设置线条粗细
            paint.setStrokeWidth(12);
            canvas.drawLine(120,40,170,90, paint);
            canvas.drawLine(320,90,370,40, paint);
       }
}

//DrawCircle.java
package com.scgm.android.drawable;

import android.graphics.Canvas;
import  android.graphics.Color;
import  android.graphics.Paint;
import android.graphics.RectF;
 
 
public class DrawCircle  implements  drawGraphics{
 
        private  Paint paint=  null;
        private  Paint paint_eye=  null;
 
        public  DrawCircle(){
        paint= new  Paint();
        paint_eye= new  Paint();
}
      
        @Override
        public  void draw(Canvas canvas) {
             // TODOAuto-generated method stub
             //绘制圆形(圆心x，圆心y，半径r，画笔p)
             paint_eye.setAntiAlias(true);
             paint.setAntiAlias(true);
             RectF rectF = newRectF(120,60,370,240);
             paint_eye.setColor(Color.WHITE);
             paint.setColor(Color.GREEN);
             canvas.drawCircle(190, 110, 18, paint_eye);
             canvas.drawCircle(300, 110, 18, paint_eye);
             canvas.drawArc(rectF, 180, 180,true, paint);
        }
}

//GameStart.java
package  com.scgm.android.drawable;

import  android.app.Activity;
import android.os.Bundle; 

public class GameStart  extends  Activity {
 
      private  GameView mGameView=  null; 
 
    
      @Override
      public  void  onCreate(Bundle  savedInstanceState) { 
          super.onCreate(savedInstanceState);
          this.mGameView= newGameView(this);
          setContentView(mGameView);
      }
}

 

效果图如下：
运行效果图：