14天學會安卓開發(第十一天)Android圖形技術

查志強發表於2014-06-25
安卓Android

【原文：http://blog.csdn.net/corder_raine/article/details/8317356】

14天學會安卓開發  
作者:神祕的N (英文名  corder_raine)
聯絡方式:369428455(反饋)
交流群:284552167(示例,原文件下載)
版權為作者所有,如有轉載請註明出處
目錄                 






第十一天.Android圖形技術
11.1 Paint類與Canvas類
11.1.1 繪圖Paint類
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Paint mPaint = newPaint();
/* 設定Paint為無鋸齒 */
mPaint.setAntiAlias(true);
/* 設定Paint的顏色 */
mPaint.setColor(Color.RED);
mPaint.setColor(Color.BLUE);
/* 同樣是設定顏色 */
mPaint.setColor(Color.rgb(255, 0, 0));
/* 提取顏色 */
Color.red(0xcccccc);
Color.green(0xcccccc);
/* 設定paint的顏色和Alpha值(a,r,g,b) */
mPaint.setARGB(255, 255, 0, 0);
/* 設定paint的Alpha值 */
mPaint.setAlpha(220);        
 
 
/* 設定字型的尺寸 */
mPaint.setTextSize(14);
// 設定paint的風格為“空心”.
// 當然也可以設定為“實心”(Paint.Style.FILL)
mPaint.setStyle(Paint.Style.STROKE);
// 設定“空心”的外框的寬度。
mPaint.setStrokeWidth(5);
/* 得到Paint的一些屬性 */
Log.i(TAG, "paint的顏色：" + mPaint.getColor());
Log.i(TAG, "paint的Alpha：" + mPaint.getAlpha());
Log.i(TAG, "paint的外框的寬度：" +mPaint.getStrokeWidth());
Log.i(TAG, "paint的字型尺寸：" +mPaint.getTextSize());
/* 繪製一個矩形 */
canvas.drawRect((320 - 80) / 2, 20, (320- 80) / 2 + 80, 20 + 40, mPaint);
/* 設定風格為實心 */
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(Color.GREEN);
/* 繪製綠色實心矩形 */
canvas.drawRect(0,20,40,20+ 40,mPaint);



11.1.2 線上程中更新介面
01
02
03
04
05
06
07
08
09
10
11
12
13
publicvoid run()  {
              while(!Thread.currentThread().isInterrupted())
              {
                     try{
                            Thread.sleep(100);
                     }
                     catch(InterruptedException e){
                            Thread.currentThread().interrupt();
                     }
                     //使用postInvalidate可以直接線上程中更新介面
                     postInvalidate();//會呼叫onDraw(Canvascanvas)方法
              }
       }

** 研究案例PaintDemo

11.1.3 Canvas畫布類
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
publicvoid onDraw(Canvas canvas){
              super.onDraw(canvas);             
              /*設定畫布的顏色 */
              canvas.drawColor(Color.BLACK);          
              /*設定取消鋸齒效果 */
              mPaint.setAntiAlias(true);        
              /*設定裁剪區域 */
              canvas.clipRect(10,10, 280, 260);            
              /*線鎖定畫布 */
              canvas.save();
              /*旋轉畫布 */
              canvas.rotate(45.0f);        
              /*設定顏色及繪製矩形 */
              mPaint.setColor(Color.RED);
              canvas.drawRect(newRect(15,15,140,70), mPaint);             
              /*解除畫布的鎖定 */
              canvas.restore();       
              /*設定顏色及繪製另一個矩形 */
              mPaint.setColor(Color.GREEN);
              canvas.drawRect(newRect(150,75,260,120), mPaint);
       }

** 研究案例PaintDemo2


11.2 SurfaceView類
11.2.1 SurfaceView類
Ø  執行效率高
Ø  可以直接訪問畫布Canvas
Ø  開發手機遊戲經常用
11.2.2 SurfaceView使用要點
1.public class GameSurfaceView extendsSurfaceView  implementsSurfaceHolder.Callback,Runnable 
2.定義SurfaceHolder物件：
       SurfaceHoldermSurfaceHolder= this.getHolder();
3.新增回撥：
       mSurfaceHolder.addCallback(this);
       this.setFocusable(true);
4.在回撥方法surfaceCreated()中開啟繪圖執行緒。
5.在繪圖執行緒中繪製圖形。

11.2.3 SurfaceView回撥方法
01
02
03
04
05
06
07
08
09
10
11
12
13
// 在surface的大小發生改變時激發
       publicvoid surfaceChanged(SurfaceHolder holder, intformat, intwidth, intheight) {
       }
       //在surface建立時激發
       publicvoid surfaceCreated(SurfaceHolder holder){
              //開啟繪圖執行緒
              newThread(this).start();
       }
       //在surface銷燬時激發
       publicvoid surfaceDestroyed(SurfaceHolder holder){
              //停止迴圈
              mbLoop=false;
       }


11.2.3 繪圖執行緒
// 繪圖迴圈
01
02
03
04
05
06
07
08
09
10
11
12
13
14
publicvoid run(){
             while(mbLoop){
                    try{
                           Thread.sleep(200);
                    }
                    catch(Exception e){
 
                    }
                    synchronized(mSurfaceHolder ){
                           draw();
                    }
 
             }
      }


11.2.4 繪圖方法
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
publicvoid draw() {
       //鎖定畫布，得到canvas
       Canvascanvas= mSurfaceHolder.lockCanvas();
       if(mSurfaceHolder==null|| canvas == null){
              return;
       }
       //繪圖
       PaintmPaint = newPaint();
       mPaint.setColor(Color.BLACK);
       //繪製矩形--清屏作用
       canvas.drawRect(0,0,320,480, mPaint);
       mPaint.setColor(Color.BLUE);
       //繪製矩形
       canvas.drawCircle((320-25) / 2, y, 50, mPaint);
       //繪製後解鎖，繪製後必須解鎖才能顯示
       mSurfaceHolder.unlockCanvasAndPost(canvas);
}

** 研究完整案例GameSurfaceViewDemo 

11.3 繪製幾何形狀
11.3.1 繪製幾何形狀
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 定義矩形物件 */
       Rectrect1 = new Rect();
       /*設定矩形大小 */
       rect1.left= 5; rect1.top = 5; rect1.bottom = 25; rect1.right = 45;
       mPaint.setColor(Color.BLUE);
       /*繪製矩形 */
       canvas.drawRect(rect1,mPaint);                   
       /*繪製矩形 */
       canvas.drawRect(50,5, 90, 25, mPaint);
 
       /*繪製圓形(圓心x,圓心y,半徑r,p) */
       canvas.drawCircle(40,70, 30, mPaint);
 
       /*定義橢圓物件 */
       RectFrectf1 = new RectF();
       /*設定橢圓大小 */
       rectf1.left= 80; rectf1.top = 30; rectf1.right = 120; rectf1.bottom = 70;
       /*繪製橢圓 */
       canvas.drawOval(rectf1,mPaint);
 
/* 繪製多邊形 */
       Pathpath1 = new Path();                 
       /*設定多邊形的點*/
       path1.moveTo(150+5,80-50);
       path1.lineTo(150+45,80-50);
       path1.lineTo(150+30,120-50);
       path1.lineTo(150+20,120-50);
       /*使這些點構成封閉的多邊形 */
       path1.close();
 
       mPaint.setColor(Color.GRAY);
       /*繪製這個多邊形 */
       canvas.drawPath(path1,mPaint);                  
       mPaint.setColor(Color.RED);
       mPaint.setStrokeWidth(3);
       /*繪製直線 */
       canvas.drawLine(5,110,315,110, mPaint);


** 研究完整案例PaintDemo3        
11.3.2 ShapeDrawable繪製幾何圖形
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* 例項化ShapeDrawable物件並說明是繪製一個矩形 */
               ShapeDrawable mShapeDrawable = new ShapeDrawable(new RectShape());            
              //得到畫筆paint物件並設定其顏色
              mShapeDrawable.getPaint().setColor(Color.RED);
              Rectbounds = new Rect(5, 250, 55, 280);       
              /*設定影象顯示的區域 */
              mShapeDrawable.setBounds(bounds);           
              mShapeDrawable.draw(canvas);/* 繪製影象 */
 
              /*例項化ShapeDrawable物件並說明是繪製一個橢圓 */
              mShapeDrawable= new ShapeDrawable(new OvalShape());      
              //得到畫筆paint物件並設定其顏色
              mShapeDrawable.getPaint().setColor(Color.GREEN);         
              /*設定影象顯示的區域 */
              mShapeDrawable.setBounds(70,250, 150, 280);           
              /*繪製影象 */
              mShapeDrawable.draw(canvas);      
 
 
Path path1 = new Path();
       /*設定多邊形的點*/
       path1.moveTo(150+5,80+80-50);
       path1.lineTo(150+45,80+80-50);
       path1.lineTo(150+30,80+120-50);
       path1.lineTo(150+20,80+120-50);
       /*使這些點構成封閉的多邊形 */
       path1.close();       
       //PathShape後面兩個引數分別是寬度和高度
       mShapeDrawable= new ShapeDrawable(new PathShape(path1,150,150));
       //得到畫筆paint物件並設定其顏色
       mShapeDrawable.getPaint().setColor(Color.BLUE);            
       /*設定影象顯示的區域 */
       mShapeDrawable.setBounds(100,170, 200, 280);         
       /*繪製影象 */
       mShapeDrawable.draw(canvas);

** 研究案例PaintDemo3中GameView2.java


11.4 圖形繪製與旋轉縮放
11.4.1 繪製影象1
01
02
03
04
05
06
07
08
09
10
/*從資原始檔中裝載圖片 */
     //getResources()->得到Resources
     //getDrawable()->得到資源中的Drawable物件，引數為資源索引ID
     //getBitmap()->得到Bitmap
      Bitmap mBitQQ = ((BitmapDrawable)getResources().getDrawable(R.drawable.qq)).getBitmap();
 
     /*清屏效果 */
     canvas.drawColor(Color.GRAY);
     /*在螢幕(0,0)處繪製圖片mBitQQ */
     GameView.drawImage(canvas,mBitQQ,0,0);


       **drawImage()參考後面   
11.4.2 繪製影象2
        * @param            x螢幕上的x座標      
        * @param          y螢幕上的y座標
        * @param          w要繪製的圖片的寬度    
        * @param          h要繪製的圖片的高度
        * @param          bx圖片上的x座標
        * @param          by圖片上的y座標
01
02
03
04
05
06
07
08
09
10
publicstaticvoiddrawImage(Canvas canvas, Bitmap blt, intx, inty, intw, inth,intbx, intby)  {
             Rectsrc = newRect();// 圖片
             Rectdst = newRect();// 螢幕          
             src.left= bx; src.top = by; src.right = bx + w;
             src.bottom= by + h;          
             dst.left= x; dst.top = y; dst.right = x + w;
             dst.bottom= y + h;
             canvas.drawBitmap(blt,src, dst, null);          
             src=null; dst = null;
      }

11.4.3 繪製影象3       
      /**
        * 繪製一個Bitmap
        * @param canvas      畫布
        * @param bitmap     圖片
        * @param x        螢幕上的x座標
        * @param y        螢幕上的y座標
        */
1
2
3
4
5
publicstaticvoiddrawImage(Canvas canvas, Bitmap bitmap, intx, inty)
      {
             /*繪製影象 */
             canvas.drawBitmap(bitmap,x, y, null);
      }

** 還需要使用執行緒更新介面
** 研究案例PaintDemo5 

11.4.5 影象旋轉
01
02
03
04
05
06
07
08
09
10
11
12
13
14
publicvoid onDraw(Canvas canvas){
              super.onDraw(canvas);
              MatrixmMatrix = newMatrix();            
              /*重置mMatrix */
              mMatrix.reset();         
              /*設定旋轉 */
              mMatrix.setRotate(角度);
 
              /*按mMatrix得旋轉構建新的Bitmap */
              BitmapmBitQQ2 = Bitmap.createBitmap(mBitQQ, 0, 0, BitQQwidth,BitQQheight, mMatrix,true);
              /*繪製旋轉之後的圖片 */
              GameView.drawImage(canvas,mBitQQ2, (320-BitQQwidth)/2,10);  
              mBitQQ2=null;
       }

** 研究MatrixDemo 
11.4.6 影象縮放
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
publicvoid onDraw(Canvas canvas) {
              super.onDraw(canvas);
 
              /*重置mMatrix */
              mMatrix.reset();         
              /*設定縮放 */
              mMatrix.postScale(Scale,Scale);
 
              /*按mMatrix得旋轉構建新的Bitmap */
              BitmapmBitQQ2 = Bitmap.createBitmap(mBitQQ, 0, 0, BitQQwidth,BitQQheight, mMatrix,true);
              /*繪製旋轉之後的圖片 */
              GameView.drawImage(canvas,mBitQQ2, (320-BitQQwidth)/2,10);
 
              mBitQQ2=null;
       }

** 研究MatrixScaleDemo

11.5 用Shader類進行渲染
Ø  BitmapShader：              Bitmap渲染
Ø  LinearGradient：            線性漸變渲染
Ø  ComposeShader：           混合渲染
Ø  RadialGradient：            環形漸變渲染
Ø  SweepGradient：            梯度渲染
** 研究案例ShaderDemo 



示例下載

相關文章