Android之玩轉(zhuǎn)View（六）：Canvas基礎使用和Region模式

請尊重原創(chuàng)炮温，轉(zhuǎn)載請注明出處【tianyl】的博客

關于的Android之玩轉(zhuǎn)View目錄

前言

之前說了Android中的Paint火脉，當然，在Android的圖像繪制中柒啤，除了Paint這個重要的工具類之后，還有一個同樣重要的工具類Canvas

從字面意思上理解畸颅，Paint是畫筆担巩，而Canvas則是畫布，一般來講没炒，我們使用Canvas都是通過onDraw方法里的參數(shù)傳入的涛癌，當然我們也可以自己new一個這樣的對象

1 Canvas的基礎使用

一般Canvas的使用，需要我們準備Paint對象和Canvas對象

Paint對象處理顏色送火，粗細拳话，效果等
Canvas對象處理具體繪制的形狀（根據(jù)面向?qū)ο蟮乃枷耄瑢⒗L制方式封裝到了Canvas中）

Canvas可以繪制的形狀非常多种吸，包含點弃衍、線、面（圖片坚俗，矩形等）

1.1

如下镜盯，就是一個畫出一條直線的例子

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
canvas.drawLine(100, 100, 400, 400, paint);

1.2

畫圓角矩形

Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(10);
RectF r = new RectF(100, 100, 400, 500);
canvas.drawRoundRect(r, 30, 30, paint);

canvas可繪制的形狀還有很多岸裙，這里就不一一演示了

2 Region

上面介紹了Canvas中比較基礎用法，接著再說說Canvas中一個比較有意思的用法——Region

2.1 Region的基本用法

Region的字面意思是區(qū)域的意思速缆，要字面解釋這個類的效果比較難降允，下面通過一個例子說明

//初始化畫筆
Paint paint = new Paint();
paint.setStyle(Paint.Style.STROKE);
//初始化圓角矩形路徑
RectF r = new RectF(100, 100, 600, 800);
Path path = new Path();
float radii[] = {10,10,10,10,10,10,50,60};
path.addRoundRect(r, radii, Path.Direction.CCW);

//創(chuàng)建一塊矩形的區(qū)域
Region region = new Region(100, 100, 600, 800);
//創(chuàng)建一個新的區(qū)域，它是上述區(qū)域和矩形的交集
Region region1 = new Region();
region1.setPath(path, region);

//區(qū)域不能直接繪制艺糜，需要使用迭代器
RegionIterator iterator = new RegionIterator(region1);

Rect rect = new Rect();
while (iterator.next(rect)) {
    canvas.drawRect(rect, paint);
}

效果如下

下面來對這段代碼進行解釋

首先初始化畫筆和圓角矩形
創(chuàng)建一個矩形區(qū)域
獲取矩形區(qū)域和圓角矩形區(qū)域的交集
繪制這個新獲得的區(qū)域

關于區(qū)域的繪制剧董，有點微積分的思想破停，它是首先將這個區(qū)域分割出一個足夠大的矩形，然后不斷的分割出相對較小的矩形進行繪制

所以我們看到的就是最中間的矩形最大犁嗅，邊緣因為有圓角晤碘，所以矩形相對較小园爷，最終達到圖中的效果，這就可以實現(xiàn)多張圖片疊加的效果

2.2 Region的模式

說到模式求厕，是不是就想到了Xfermode的18種模式扰楼？其實Region也有類似的模式弦赖，只不過這里沒有18種，只有6種

下面就通過一組圖片說明這些模式的含義

首先沼沈，我們準備兩張圖片列另，左邊是src旦装，右邊是dst

然后我們將這兩張圖片進行重疊，原圖如下

然后使用Op中的6種模式繪制出來拷姿，效果如下（顏色統(tǒng)一用綠色，線是額外畫出來的响巢，真實效果不存在此線）

代碼如下

//初始化2個矩形
Rect rect1 = new Rect(200,200,500,500);
Rect rect2 = new Rect(300,300,600,600);
//設置畫筆畫出提示用的邊框線
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(2);
//繪制二個邊框
canvas.drawRect(rect1, paint);
paint.setColor(Color.BLUE);
canvas.drawRect(rect2, paint);
//構(gòu)造兩個Region
Region region1 = new Region(rect1);
Region region2= new Region(rect2);
region1.op(region2, Region.Op.REPLACE);
//修改畫筆屬性，填充內(nèi)部
paint.setStyle(Paint.Style.FILL);
//繪制出對應的效果
 RegionIterator it = new RegionIterator(region1);
Rect rect = new Rect();
while (it.next(rect)) {
    canvas.drawRect(rect, paint);
}

補集（DIFFERENCE）
交集（INTERSECT）

并集（UNION）
異或集（XOR）

反轉(zhuǎn)補集（REVERSE_DIFFERENCE）

替換（REPLACE）

3 結(jié)尾

關于Canvas的內(nèi)容還有很多伏穆，因為篇幅原因只能放后面補充了

最后編輯于：2019.04.16 23:13:42

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者