2. 程式人生 > >自定義控制元件之繪圖篇（三）：區域（Range）

自定義控制元件之繪圖篇（三）：區域（Range）

阿新 • • 發佈：2019-02-19

前言：最近幾天對畫圖的研究有些緩慢，專案開始寫程式碼了，只能在晚上空閒的時候捯飭一下自己的東西，今天給大家講講區域的相關知識，已經想好後面兩篇的內容了，這幾天有時間趕緊寫出來給大家。有關介面開發的東東內容確實比較多，慢慢來吧，總有一天會不一樣。

我自己的一句警言，送給大家：

想要跟別人不一樣，你就要跟別人不一樣。----- Harvic 

相關文章：

一、構造Region

1、基本建構函式

 public Region()  //建立一個空的區域  
 public Region(Region region) //拷貝一個region的範圍  
 public Region(Rect r)  //建立一個矩形的區域  
 public Region(int left, int top, int right, int bottom) //建立一個矩形的區域  


上面的四個建構函式，第一個還要配合其它函式使用，暫時不提。
第二個建構函式是通過其它的Region來複制一個同樣的Region變數
第三個，第四個才是正規常的，根據一個矩形或矩形的左上角和右下角點構造出一個矩形區域

2、間接構造

 public void setEmpty()  //置空
 public boolean set(Region region)   
 public boolean set(Rect r)   
 public boolean set(int left, int top, int right, int bottom)   
 public boolean setPath(Path path, Region clip)//後面單獨講


這是Region所具有的一系列Set方法，我這裡全部列了出來，下面一一對其講解：
注意：無論呼叫Set系列函式的Region是不是有區域值，當呼叫Set系列函式後，原來的區域值就會被替換成Set函式裡的區域。
SetEmpty（）：從某種意義上講置空也是一個建構函式，即將原來的一個區域變數變成了一個空變數，要再利用其它的Set方法重新構造區域。
set(Region region)：利用新的區域值來替換原來的區域
set(Rect r)：利用矩形所代表的區域替換原來的區域
set(int left, int top, int right, int bottom)：同樣，根據矩形的兩個點構造出矩形區域來替換原來的區域值
setPath(Path path, Region clip)：根據路徑的區域與某區域的交集，構造出新區域，這個後面具體講解


舉個小例子，來說明一個Set系列函式的替換概念：

關於重寫新建一個類，並派生自view，並且要重寫OnDraw函式的問題我就不再講了，有問題的同學，可以參考下《android Graphics（一）：概述及基本幾何圖形繪製》，當然最後我也會給出相關的原始碼，直接看原始碼也行。

下面寫了一個函式，先把Set函式註釋起來，看看畫出來的區域的位置，然後開啟Set函式，然後再看畫出來的區域
注：裡面有個函式drawRegion(Canvas canvas,Region rgn,Paint paint),只知道它可以畫出指定的區域就可以了，具體裡面是什麼意思，後面我們再仔細講。

public class MyRegionView extends View {

	public MyRegionView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		
		//初始化畫筆
		Paint paint = new Paint();
		paint.setColor(Color.RED);
		paint.setStyle(Style.FILL);
		paint.setStrokeWidth(2);
		
		Region rgn = new Region(10,10,100,100);

//		rgn.set(100, 100, 200, 200);
		drawRegion(canvas, rgn, paint);
		
	}
	
	//這個函式不懂沒關係，下面會細講
	private void drawRegion(Canvas canvas,Region rgn,Paint paint)
	{
		RegionIterator iter = new RegionIterator(rgn);
		Rect r = new Rect();
		
		while (iter.next(r)) {
		  canvas.drawRect(r, paint);
		} 
	}

}
看下效果：
                            未開啟Set函式時                                                                                           

                       使用Set函式後，替換為新區域

3、使用SetPath（）構造不規則區域

boolean setPath (Path path, Region clip)

引數說明：
Path path：用來構造的區域的路徑
Region clip：與前面的path所構成的路徑取交集，並將兩交集設定為最終的區域

由於路徑有很多種構造方法，而且可以輕意構造出非矩形的路徑，這就擺脫了前面的建構函式只能構造矩形區域的限制。但這裡有個問題是要指定另一個區域來取共同的交集，當然如果想顯示路徑構造的區域，Region clip引數可以傳一個比Path範圍大的多的區域，取完交集之後，當然是Path引數所對應的區域嘍。機智的孩子。

下面，先構造一個橢圓路徑，然後在SetPath時，傳進去一個比Path小的矩形區域，讓它們兩個取交集

public class MyRegionView extends View {

	public MyRegionView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		//初始化Paint
		Paint paint = new Paint();
		paint.setColor(Color.RED);
		paint.setStyle(Style.FILL);
		paint.setStrokeWidth(2);
		//構造一個橢圓路徑
		Path ovalPath = new Path();
		RectF rect =  new RectF(50, 50, 200, 500);  
		ovalPath.addOval(rect, Direction.CCW);
		//SetPath時,傳入一個比橢圓區域小的矩形區域,讓其取交集
		Region rgn = new Region();
		rgn.setPath(ovalPath,new  Region(50, 50, 200, 200));
		//畫出路徑
		drawRegion(canvas, rgn, paint);
	}
	
	//這個函式不懂沒關係，下面會細講
	private void drawRegion(Canvas canvas,Region rgn,Paint paint)
	{
		RegionIterator iter = new RegionIterator(rgn);
		Rect r = new Rect();
		
		while (iter.next(r)) {
		  canvas.drawRect(r, paint);
		} 
	}
}
結果如下：

二、矩形集列舉區域——RegionIterator類

對於特定的區域，我們都可以使用多個矩形來表示其大致形狀。事實上，如果矩形足夠小，一定數量的矩形就能夠精確表示區域的形狀，也就是說，一定數量的矩形所合成的形狀，也可以代表區域的形狀。RegionIterator類，實現了獲取組成區域的矩形集的功能，其實RegionIterator類非常簡單，總共就兩個函式，一個建構函式和一個獲取下一個矩形的函式；
RegionIterator(Region region) //根據區域構建對應的矩形集
boolean next(Rect r) //獲取下一個矩形，結果儲存在引數Rect r 中

由於在Canvas中沒有直接繪製Region的函式，我們想要繪製一個區域，就只能通過利用RegionIterator構造矩形集來逼近的顯示區域。用法如下：

private void drawRegion(Canvas canvas,Region rgn,Paint paint)
{
	RegionIterator iter = new RegionIterator(rgn);
	Rect r = new Rect();
	
	while (iter.next(r)) {
	  canvas.drawRect(r, paint);
	} 
}
上面我們也都看到了它的用法，首先，根據區域構建一個矩形集，然後利用next(Rect r)來逐個獲取所有矩形，繪製出來，最終得到的就是整個區域，如果我們將上面的畫筆Style從FILL改為STROKE，重新繪製橢圓路徑，會看得更清楚。


三、區域的合併、交叉等操作

無論是區域還是矩形，都會涉及到與另一個區域的一些操作，比如取交集、取並集等，涉及到的函式有：

public final boolean union(Rect r)   
public boolean op(Rect r, Op op) {  
public boolean op(int left, int top, int right, int bottom, Op op)   
public boolean op(Region region, Op op)   
public boolean op(Rect rect, Region region, Op op)   

除了Union(Rect r)是指定合併操作以外，其它四個op（）建構函式，都是指定與另一個區域的操作。其中最重要的指定Op的引數，Op的引數有下面四個：

假設用region1  去組合region2   
public enum Op {  
        DIFFERENCE(0), //最終區域為region1 與 region2不同的區域  
        INTERSECT(1), // 最終區域為region1 與 region2相交的區域  
        UNION(2),      //最終區域為region1 與 region2組合一起的區域  
        XOR(3),        //最終區域為region1 與 region2相交之外的區域  
        REVERSE_DIFFERENCE(4), //最終區域為region2 與 region1不同的區域  
        REPLACE(5); //最終區域為為region2的區域  
 }
至於這六個引數的具體意義，後面給個具體的圖給大家顯示出來，先舉個取交集的例子。

效果圖：


先構造兩個相交叉的矩形，並畫出它們的輪廓
//構造兩個矩形
Rect rect1 = new Rect(100,100,400,200);
Rect rect2 = new Rect(200,0,300,300);

//構造一個畫筆，畫出矩形輪廓
Paint paint = new Paint();
paint.setColor(Color.RED);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(2);

canvas.drawRect(rect1, paint);
canvas.drawRect(rect2, paint);
然後利用上面的兩年rect,(rect1和rect2)來構造區域，並在rect1的基礎上取與rect2的交集
//構造兩個Region
Region region = new Region(rect1);
Region region2= new Region(rect2);

//取兩個區域的交集		
region.op(region2, Op.INTERSECT);
最後構造一個填充畫筆，將所選區域用綠色填充起來
Paint paint_fill = new Paint();
paint_fill.setColor(Color.GREEN);
paint_fill.setStyle(Style.FILL);
drawRegion(canvas, region, paint_fill);
全部程式碼為：
/**
 * created by harvic
 * 2014/9/4
 */
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Region;
import android.graphics.Paint.Style;
import android.graphics.Region.Op;
import android.graphics.RegionIterator;
import android.view.View;

public class MyRegionView extends View {

	public MyRegionView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}
	
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
		
		//構造兩個矩形
		Rect rect1 = new Rect(100,100,400,200);
		Rect rect2 = new Rect(200,0,300,300);
		
		//構造一個畫筆，畫出矩形輪廓
		Paint paint = new Paint();
		paint.setColor(Color.RED);
		paint.setStyle(Style.STROKE);
		paint.setStrokeWidth(2);
		
		canvas.drawRect(rect1, paint);
		canvas.drawRect(rect2, paint);
		
		
		
		//構造兩個Region
		Region region = new Region(rect1);
		Region region2= new Region(rect2);

		//取兩個區域的交集		
		region.op(region2, Op.INTERSECT);
		
		//再構造一個畫筆,填充Region操作結果
		Paint paint_fill = new Paint();
		paint_fill.setColor(Color.GREEN);
		paint_fill.setStyle(Style.FILL);
		drawRegion(canvas, region, paint_fill);

	}
	

private void drawRegion(Canvas canvas,Region rgn,Paint paint)
{
	RegionIterator iter = new RegionIterator(rgn);
	Rect r = new Rect();
	
	while (iter.next(r)) {
	  canvas.drawRect(r, paint);
	} 
}
}
其它引數的操作與這個類似，其實只需要改動region.op(region2, Op.INTERSECT);的Op引數值即可，下面就不再一一列舉，給出操作後的對比圖。


四、其它一些方法

Region類除了上面的一些重要的方法以外，還有一些比較容易理解的方法，我就不再一一列舉用法了，下面一併列出給大家
/**幾個判斷方法*/  
public native boolean isEmpty();//判斷該區域是否為空  
public native boolean isRect(); //是否是一個矩陣  
public native boolean isComplex();//是否是多個矩陣組合  
  
  
/**一系列的getBound方法，返回一個Region的邊界*/  
public Rect getBounds()   
public boolean getBounds(Rect r)   
public Path getBoundaryPath()   
public boolean getBoundaryPath(Path path)   
  
  
/**一系列的判斷是否包含某點 和是否相交*/  
public native boolean contains(int x, int y);//是否包含某點  
public boolean quickContains(Rect r)   //是否包含某矩形
public native boolean quickContains(int left, int top, int right,  
                                        int bottom) //是否沒有包含某矩陣形 
 public boolean quickReject(Rect r) //是否沒和該矩形相交  
 public native boolean quickReject(int left, int top, int right, int bottom); //是否沒和該矩形相交  
 public native boolean quickReject(Region rgn);  //是否沒和該矩形相交  
  
/**幾個平移變換的方法*/  
public void translate(int dx, int dy)   
public native void translate(int dx, int dy, Region dst);  
public void scale(float scale) //hide  
public native void scale(float scale, Region dst);//hide

本篇所涉及到的程式碼，我集合在了一個工程中，大家可以下載

相關推薦

自定義控制元件之繪圖篇（四）：canvas變換與操作

前言：前幾篇講解了有關canvas繪圖的一些操作，今天更深入一些，講講對畫布的操作，這篇文章不像前幾篇那麼容易理解，如果以前沒有接觸過畫布的童鞋可能比較難以理解，為什麼會這樣。我儘量多畫圖，讓大家更清晰明白。前幾天偶然看到一篇文章，寫的樸實無華，充滿正能量，我非常喜歡裡面的一

自定義控制元件之繪圖篇（三）：區域（Range）

前言：最近幾天對畫圖的研究有些緩慢，專案開始寫程式碼了，只能在晚上空閒的時候捯飭一下自己的東西，今天給大家講講區域的相關知識，已經想好後面兩篇的內容了，這幾天有時間趕緊寫出來給大家。有關介面開發的東東內容確實比較多，慢慢來吧，總有一天會不一樣。我自己的一句警言，送給大家：想要

自定義控制元件之繪圖篇：Canvas與圖層(二)

public class CLIP_TO_LAYER_SAVE_FLAG_VIEW extends View {       private Paint mPaint;       public CLIP_TO_LAYER_SAVE_FLAG_VIEW(Context context, Att

Android自定義控制元件之入門篇---整理網路上的資源

前言， 我的視訊系列 http://edu.csdn.net/course/detail/2741， 一起來學習Android… 本篇部落格主要是想要講解一下自定義控制元件如何入門，其中有好多資料資源來源自網路，綜合了網路上一些有些的博文

自定義控制元件三部曲檢視篇（五）——RecyclerView系列之二ItemDecoration

從來不跌倒不算光彩，每次跌倒後能再站起來，才是最大的榮耀。 一、新增分割線 1.1 引入ItemDecoration 在上一篇中，我們講解了RecyclerView的基本使用方法，但有個問題：為什麼Item之間沒有分割線呢？其實，給RecyclerView新

自定義控制元件之下載控制元件1（DownloadView1）

前段時間在乾貨集中營看到了兩個炫酷的下載按鈕：       可惜是隔壁 iOS 的孩子，怎麼辦，我也好喜歡，emmm，某該，只能自己模仿著實現一下了。先從第一個入手（第二個波浪效果暫時還不會）。 1 準備動作 寫過幾次自定義控制元件

自定義控制元件之 PasswordEditText（密碼輸入框）

前兩天在掘金上看到了一個驗證碼輸入框，然後自己實現了一下，以前都是繼承的 View，這次繼承了 ViewGroup，也算是嘗試了一點不同的東西。先看看最終效果： 事實上就是用將輸入的密碼用幾個文字框來顯示而已，要打造這樣一個東西我剛開始也是一頭霧水，不急，直接寫不會，我們可以採取曲線救

自定義控制元件之 Gamepad （遊戲手柄）

這段時間自己在復刻一個小時候玩過的小遊戲——魔塔，在人物操控的時候剛開始用的感覺 low low 的上下左右四個方向鍵，後來受王者農藥啟發，決定採用現在很多遊戲中的那種遊戲手柄，網上也有例子，不過最近自己對自定義控制元件很感興趣，決定自己擼一個，最後實現的效果是這樣的： 看到這樣

自定義控制元件之 SubmitBotton （提交按鈕）

在 Android 中我覺得除了實現很多功能性很強的需求之外，最吸引我的就是各種炫酷的自定義控制元件，但是自定義控制元件這個東西沒有辦法用一種固定的模式來講解，因為自定義控制元件都是根據需求來定製的。同時這也說明只要程式猿牛逼，就沒有實現不了的功能。 之前有看到一個效果： Android

自定義控制元件三部曲檢視篇（四）——RecyclerView系列之一簡單使用

絕望的時候不要那麼絕望，高興的時候不要那麼高興，是你慢慢會學會的。 ——董卿 轉了一年多，又回來繼續做Android。果然還是看到程式碼最讓我興奮……但有些事，沒經歷過，總歸還是遺憾的。在VIVO的遊戲中心，有一個特別炫酷的功能： 這個功能就是使

自定義控制元件三部曲檢視篇（三）——瀑布流容器WaterFallLayout實現

前言：只要在前行，夢想就不再遙遠 系列文章： 前面兩節講解了有關ViewGroup的onMeasure、onLayout的知識，這節我們深入性地探討一下，如何實現經常見到的瀑布流容器，本節將實現的效果圖如下： 從效果圖中可以看出這裡要完成的

android自定義控制元件之圓形進度條（帶動畫）

首先貼上圖片： 額，感覺還行吧，就是進度條的顏色醜了點，不過咱是程式設計師，不是美工，配色這種問題當然不在考慮範圍之內了 下面說重點，如何來寫一個這樣的自定義控制元件。 首先，需要有一個灰色的底圖，來作為未填充時的進度條； 然後，根據傳入的當前進度值，繪製填充時的進度圓

Android 自定義控制元件之命運之輪（抽獎轉盤）

1 思路 首先肯定是要繪製扇形的，每一個獎品為一個扇形區分開，然後在扇形中得有當前獎品的說明，最後讓這個輪盤轉起來就行了。說起來很簡單，但是在繪製的時候，特別是繪製文字的時候還有有一些細節需要注意的，也不是難點，只是要理清楚那些地方應該怎麼去畫，怎麼獲取需要繪製的座標。  

分分鐘搞定自定義控制元件之組合控制元件--自定義View入門篇

今天給大家詳細講解一下如何實現自定義組合控制元件，組合控制元件其實很簡單。大家可以自由地組合任意控制元件。好了，下面開始我們的正文。 我們要實現的效果如右圖底部所示，其實呢！大家只要把握規律，還是挺容易的。 新建一個attrs.xml屬性集檔案，即你要自定義控制元件的

自定義控制元件之側滑關閉 Activity 控制元件

隔壁 iOS 的小夥伴有一個功能就是左手向右手一個慢動作，輕輕一劃就可以關閉介面，這種操作感覺還是很絲滑的，而且這還是 iOS 系統自帶的功能，由於 Android 手機早期是有 back 鍵，home 鍵 和選單鍵（現在大部分手機都只保留一個鍵了），所以 Android 是沒有這個功能的。現在

自定義控制元件之固定Tab

在開發中我們通常用到固定的Tab，Tab的個數是可以動態配置的，但是不支援滑動，每個Tab均分佈局並且之間被一個豎線分割開，Tab底部是一條分割線。看到如下效果如下，Tab佈局、線條顏色都支援高度制定。這個Tab的難點在於首先Tab個數不固定，其次Tab豎線左右兩端沒有隻有相鄰的兩個才有，而且粗

wpf自定義控制元件之依賴屬性

  在wpf開發過程中，總會用到格式各樣的控制元件，但是原生控制元件遠遠不能滿足實際開發的需要，這時候wpf強大之處就能體現出來了。根據實際需求自定義各種不同的控制元件滿足不同的業務需求。 首先說需求吧： 一：根據某個bool值，控制一個圓形控制元件顯示或者不顯示某種顏色。 分析： 一：需

Android自定義控制元件之區域性圖片放大鏡--BiggerView

零、前言： 本文的知識點一覽 1.自定義控制元件及自定義屬性的寫法，你也將對onMesure有更深的認識 2.關於bitmap的簡單處理，及canvas區域裁剪 3.本文會實現兩個自定義控制元件:FitImageView(圖片自適應)和BiggerView(放大鏡)，前者為後者作為鋪墊。 4.最後會

自定義控制元件之輪播圖的實現

public class BannerView extends RelativeLayout { private boolean startAndclose; private List<String> images = new ArrayList

【我的Android進階之旅】自定義控制元件之使用ViewPager實現可以預覽的畫廊效果，並且自定義畫面切換的動畫效果的切換時間

我們來看下效果 在這裡，我們實現的是，一個ViewPager來顯示圖片列表。這裡一個頁面，ViewPage展示了前後的預覽，我們讓預覽頁進行Y軸的壓縮，並設定透明度為0.5f,所有我們看到gif最後，左右兩邊的圖片有點朦朧感。讓預覽頁和主頁面有主從感。我們用分