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="<strong>顯示canvas區域以及clip方法的使用"</strong> />  
  
    <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="<strong>save方法和restore方法的使用"</strong> />  
    <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="<strong>自定義View，獲得了一個Canvas對象和繪圖區域</strong>" />  
    <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、主工程文件 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理解起來還是比較糾結的，尤其是它的幾個方法真是讓人頭疼， 希望你能夠自己編寫相應的代碼

  理解透徹，才真正的有所收獲。