Android自定義控制元件今天要講到的就是望遠鏡效果，那麼什麼是望遠鏡效果，我們不妨看看下方的動圖，看完後，相信大家就有一定的認識了。

1.著色器

對於這種效果來說，其實實現起來挺簡單的，但我們將會用到在三維軟體中的著色器Shader，它是用來給空白圖形上色的。用過PS的人，相信大家都知道里面有一個印章工具，印章的樣式可以是影象，顏色，漸變色等。在Android裡面，Shader的效果其實與他類似。

public Shader setShader(Shader shader)

上面是Shader的專用函式，也是畫筆Paint中的函式，我們今天要用到的是BitmapShader，也即是圖片來填充，它的基本用法如下：

public BitmapShader(Bitmap bitmap,TileMode tileX,TileMode tileY)

tileX用來指定當X軸超出單張圖片大小時所使用的重複策略

tileY用來指定當Y軸超出單張圖片大小時所使用的重複策略

而這兩個值的取值有三種，分別是：

TileMode.CLAMP：用邊緣色彩來填充多餘空間，CLAMP就是以X軸填充X邊緣顏色，以Y軸填充Y軸邊緣顏色，而XY非圖片相交區域以填充Y軸的顏色繼續填充。（這裡估計博主故意把貓右邊緣填充了黑色，Y邊緣填充了紅色，框起來的地方是原圖）

TileMode.REPEAT：重複原影象來填充多餘空間，其實這個模式最好理解，就是複製貼上，X不夠的空白區域填充原圖，Y不夠的也用原影象填充。

TileMode.MIRROR：重複使用映象模式的影象來填充多餘空間，有可能有的小夥伴不懂MIRROR映象模式，其實映象模式就是想鏡子一樣翻轉了影象，如下圖所示：

2.望遠鏡效果實現

原理已經剖析清楚了，接著，我們就來實現開頭的望遠鏡效果，首先，還是自定義控制元件，畢竟這一個專欄都是自定義控制元件，基本每篇都少不了這個步驟，程式碼如下：

public class BitmapShaderView extends View {
 private Paint paint;//畫筆工具
 private Bitmap bgBitmap,bitmap;//隱藏影象以及原影象
 private int mX=-1,mY=-1;//捕獲手指的位置座標
 public BitmapShaderView(Context context) {
  super(context);
 }
 
 public BitmapShaderView(Context context,@Nullable AttributeSet attrs) {
  super(context,attrs);
  this.paint=new Paint();//初始化畫筆工具
  this.bitmap= BitmapFactory.decodeResource(getResources(),R.drawable.background);//獲取原影象
 }
 
 public BitmapShaderView(Context context,@Nullable AttributeSet attrs,int defStyleAttr) {
  super(context,attrs,defStyleAttr);
 }
}

詳細註解，應該可以理解了，這裡就不在做過多的贅述，接下來，我們需要捕獲手指下按，移動以及離開螢幕的手指所在位置，也就是重寫onTouchEvent()函式：

public boolean onTouchEvent(MotionEvent event) {
 switch (event.getAction()){
  case MotionEvent.ACTION_DOWN://手指按下事件
   this.mX=(int)event.getX();
   this.mY=(int)event.getY();
   postInvalidate();//重繪
   return true;
  case MotionEvent.ACTION_MOVE://手指移動事件
   this.mX=(int)event.getX();
   this.mY=(int)event.getY();
   break;
  case MotionEvent.ACTION_UP://手指抬起
  case MotionEvent.ACTION_CANCEL://手指離開事件
   this.mX=-1;
   this.mY=-1;
   break;
 
 }
 postInvalidate();//重繪
 return super.onTouchEvent(event);
}

這裡捕獲了移動以及按下手指的座標，這樣就可以定位望遠鏡的位置，而當手指抬起的時候，望遠鏡效果就不見了，所以必須設定他們座標為-1。最後是繪圖程式碼，onDraw()實現：

protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if(this.bgBitmap==null){
   this.bgBitmap=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);//建立一個新空白點陣圖
  Canvas canvasBg=new Canvas(this.bgBitmap);
  //然後對背景圖拉昇後，畫到上面的點陣圖中
  canvasBg.drawBitmap(this.bitmap,null,new Rect(0,getWidth(),getHeight()),this.paint);
 }
 if(this.mX!=-1 && this.mY!=-1){
  //填充模式為上面講的第二種，就是複製貼上的填充模式，但這裡不會執行
  //因為我們上面強制設定了圖片的大小為整個螢幕，所以螢幕沒有空白區域
  this.paint.setShader(new BitmapShader(this.bgBitmap,Shader.TileMode.REPEAT,Shader.TileMode.REPEAT));
   canvas.drawCircle(this.mX,this.mY,200,this.paint);
 }
}

這裡我們首先建立了一個空白點陣圖，然後對原影象進行拉昇後畫到這張點陣圖中，接著，根據設定畫筆的填充模式，這裡其實沒用，是因為我們拉昇了影象，並沒有空白區域，最後，我們根據手指座標，將望遠鏡效果繪製到手機介面中，這樣望遠鏡效果的自定義控制元件完美實現了。

GitHub原始碼下載地址：點選下載

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。