android 繪圖基礎(一)


 

一、概述

  在Android中繪圖主要用兩個類 Paint,Canvas。Paint就相當與我們平時畫畫的畫筆,Canvas就相當於紙這里叫畫布

二、Paint類畫筆的基本設置

1.設置顏色 setColor(int color)

參數color有8位十六進制數組成例如:0xFFFFFFFF,對應着顏色位ARGB)

其中:例如紅色:0xFFFF0000

  • A表示透明度取值范圍0x00-0xFF
  • R表示紅色取值范圍0x00-0xFF
  • G表示綠色取值范圍0x00-0xFF
  • B表示藍色取值范圍0x00-0xFF

2.setStyle(Style style);設置填充樣式

 該函數用於設置填充樣式,對於文字幾何圖形都有效,

    style取值范圍

  • Paint.Style .FILL :將填充使用此樣式繪制的幾何和文本,忽略繪畫中與筆划相關的所有設置。 
  • Paint.Style.FILL_AND_STROKE 使用此樣式繪制的幾何和文本將同時填充和描邊,尊重繪畫中與筆划相關的字段。 
  • Paint.Style.STROKE 使用此樣式繪制的幾何和文本將被描邊,尊重繪畫上與筆划相關的字段。

3.setStrokeWidth(float width)設置畫筆寬度

   此函數用於設置畫筆寬度單位dp

關於Paint詳細api:http://www.android-doc.com/reference/android/graphics/Paint.html 

三、Canvas的使用基礎

1.畫布背景的設置

   設置畫布背景有3中方法

  • void drawColor(int color)
  • void drawARGB(int a,int r,int g,int b)
  • void drawRGB(int r,int b,int c)

 使用drawColor時參數時8位十六進制數0xFFFFFFFF對應AARRGGBB

 第二個參數分別對應ARGB,第三個同第二個只是少了tong'ming'du

 

2.drawLine(float startX, float startY, float stopX, float stopY, Paint paint)畫直線

 startX:起點X坐標, startY:起點Y坐標, stopX:終點X坐標, stopY:終點Y坐標,paint 畫筆

1 //設置畫筆
2 Paint paint=new Paint();
3 paint.setColor(Color.RED);//畫筆設置為紅色
4 paint.setStyle(Paint.Style.FILL_AND_STROKE);
5 
6 //繪制
7 canvas.drawLine(100.100,200,200,paint);

 2.drawPoint 繪制點

1 //設置畫筆 
2 Paint paint=new Paint();
3 paint.setColor(Color.RED);//畫筆設置為紅色
4 paint.setStyle(Paint.Style.FILL_AND_STROKE);
5  
6 //繪制
7 canvas.drawPaint(200,200,paint);

 

 3.RectF,Rect矩形工具類

RectF

RectF為一個矩形保存四個浮點坐標。矩形由其4條邊(左,上,右下)的坐標表示。可以直接訪問這些字段。使用width()和height()來檢索矩形的寬度和高度。注意:大多數方法都不檢查坐標是否正確排序(即左<=右和頂<=底)

 RectF構造函數:

  • public RectF();創建一個新的空RectF。所有坐標初始化為0
  • public RectF(float left, float top, float right, float bottom);創建一個具有指定坐標的新矩形。(最常用到的)
  • public RectF(RectF r);創建一個新矩形,用指定的值初始化
     
    矩形(未修改)。
  • public RectF(Rect r)

 Rect構造函數:

  • public Rect();創建一個新的空RectF。所有坐標初始化為0
  • public Rect(int left, inttop, int right, int bottom);創建一個具有指定坐標的新矩形。(最常用到的)
  • public Rect(Rect r);創建一個新矩形,用指定的值初始化
     
    矩形(未修改)。

 由構造函數看以看出RectF與Rect基本相同,不同的只是RectF保存的時float  Rect保存的是int

就一般而言要構造一個矩形結構使用一下兩種方式實現

//方法一
Rect rect=new Rect(20,20,100,100);
//方法二
Rect rect=new Rect();
rect.set(20,20,100,100);

 

 4.繪制矩形

 先看看繪制矩形的方法

  • void drawRect(float left, float top, float right, float bottom,Paint paint);
  • void drawRect(Rect r);
  • void drawRectF(RectF r);

 通過這個可以看出 繪制矩形可以直接繪制RectF或Rect構造出來的矩形結構

 例:

Paint paint=new Paint();
paint.setColor(Color.RED);
paint.setStrokeWidth(10);
paint.setAntiAlias(true);//抗鋸齒
paint.setStyle(Paint.Style.STROKE);

//直接繪制
canvas.drawRect(0, 0, 100, 100, paint);

//間接繪制
RectF r=new RectF(0, 0, 100, 100);
canvas.drawRect(r,paint);

 

 當然在繪制中海有很多方法但是都大同小異 所有繪制方法api:http://www.android-doc.com/reference/android/graphics/Canvas.html

四、路徑(Path類)

 路徑是個比較重要的概念比如在現實生活中我們畫畫都是通過一條一條線段組成的,在android繪圖中一樣也可以通過一段一段的線段組成復雜的圖形

在android中Path就表示路徑

1. 直線路徑

有到的函數

void moveTo(float x1,float x2);//在這里x1,x2為起點

void lineTo(float x1,float x2);//x1,x2為終點

void close();//如果繪制多條直線沒有形成閉環  調用此函數可以使首位相連形成閉環

...

/**
*繪制一個三角形
*/
Path path = new Path();‘

path.moveTo(100, 100);
path.lineTo(200, 100);
path.lineTo(100, 200);
path.close();//形成閉環
canvas.drawPath(path,paint);

 

2.繪制弧線路徑

public void addArc(float left, float top, float right, float bottom, float startAngle,float sweepAngle);

參數說明:
float left, float top, float right, float bottom 左上角坐標  右下角左邊 

startAngle:弧度開始角度 (360)

sweepAngle:弧度持續角度(360)順時針

例:

...
//width 屏幕寬度 height屏幕高度
Path path = new Path();
path.moveTo(width / 2, height / 2);
path.addArc(width / 4, height / 4, width / 4 * 3, height / 4 * 3, 0, 90);
path.close();
canvas.drawPath(path, paint);

 橫屏

 

五、區域

 1. 構造函數

  • public Region() //創建一個空區域
  • public Region(Region region)//輔助一個區域
  • Region(Rect r) 創建一個矩形區域(常用)
  • public Region(int left, int top, int right, int bottom) //創建一個矩形區域(常用)

2. Canvas是沒有提供對Region的繪制的:

例:

1 Paint paint=new Paint();
2 paint.setColor(Color.RED);
3 paint.setStrokeWidth(10);
4 paint.setAntiAlias(true);//抗鋸齒
5  paint.setStyle(Paint.Style.STROKE);
6 
7 Region region = new Region(width / 4, height / 4, width / 4 * 3, height / 4 * 3);

 

到這里會發現Canvas中沒有方法是對Region繪制的 所以到了這里自己要實現對Region

private void drawRegion(Region region) {
        RegionIterator iterator = new RegionIterator(region);
        Rect rect = new Rect();
        while (iterator.next(rect)) {
            canvas.drawRect(rect, paint);
        }
    }

 

3. 間接構造(區域相交)
間接構造是主要通過public Region()的共構造函數與set系列函數實現
詳細api :http://www.android-doc.com/reference/android/graphics/Region.html
主要介紹一下
Region.setPath(Path path,Region clip);根據路徑區域與某塊區域的交集構造出新區域
參數:
path 構造區域路徑
   clip 與前面的path構成的路徑取交集並將交集是設置為最終區域
因為路徑可以有很多中構造方法,可以輕而易舉的構造出非矩形圖形,因而擺脫了只能構造矩形的限制,但是這里需要指定另一個區域取交集,所以要顯示完整的路徑圖像可以創意個比path大的多的區域
如果要實現部分可以通過傳入的區域對其限制

示例:
Path path = new Path();
RectF rectF = new RectF(width / 4, height / 4, width / 4 * 3, height / 4 * 3);
path.addOval(rectF, Path.Direction.CCW);//繪制一個橢圓Path.Direction.CCW 表示逆時鍾繪制
Region region = new Region(); region.setPath(path, new Region(width / 4, height / 4, width / 4 * 3, height / 4 * 2));//取其交集 
drawRegion(region);//繪制
 
        

  藍色為相交的矩形區域  擁塞為原橢圓與矩形相交就形成下圖

 

 由此可以看出Region的主要職責不在於繪圖,而在於區域相交

 

當然有區域相交(交集)那當眼也就會有區域相並(並集)

3. 區域相並

union()函數

上代碼看效果

1 Region region=new Region(width / 4, height / 4, width / 4 * 3, height / 4 * 3);
2 region.union(new Rect(width / 4, height / 4, width / 4 * 2, height / 4 * 6));
3 
4 drawRegion(region);

 ==》

相並了之后的效果

 處了相交相並Region還提供了幾個跟價靈活的函數

系列函數:

op(Rect r,op)

op(int left, int top, int right, int bottom,op)

op(Region,op)

Op屬性:

  • Region.Op .DIFFERENCE 最終區域region1與region2不同的區域
  • Region.Op .INTERSECT  最終區域region1與region2相交的區域

  • Region.Op .REPLACE 最終區域region1與region2region2的區域

  •  

    Region.Op .REVERSE_DIFFERENCE 最終區域region1與region2不同的區域

  •  

    Region.Op .UNION 最終區域region1與region2組合在一起的區域

  •  

    Region.Op.XOR 最終區域region1與region2相交之外的區域

示例

 1         Rect rect1 = new Rect(100, 100, 400, 200);
 2         Rect rect2 = new Rect(200, 0, 300, 300);
 3         //繪制
 4         canvas.drawRect(rect1, paint);
 5         canvas.drawRect(rect2, paint);
 6         
 7         paint.setStyle(Paint.Style.FILL);
 8         //使用Op對兩個矩形進行相交
 9         Region region1 = new Region(rect1);
10         Region region2 = new Region(rect2);
11         region1.op(region2, Region.Op.INTERSECT);
12         drawRegion(region1);

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM