溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Android自定義控件實(shí)現(xiàn)望遠(yuǎn)鏡效果

發(fā)布時間：2020-09-27 22:46:07 來源：腳本之家 閱讀：194 作者：李元靜 欄目：移動開發(fā)

Android自定義控件今天要講到的就是望遠(yuǎn)鏡效果，那么什么是望遠(yuǎn)鏡效果，我們不妨看看下方的動圖，看完后，相信大家就有一定的認(rèn)識了。

Android自定義控件實(shí)現(xiàn)望遠(yuǎn)鏡效果

1.著色器

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

public Shader setShader(Shader shader)

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

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

tileX用來指定當(dāng)X軸超出單張圖片大小時所使用的重復(fù)策略

tileY用來指定當(dāng)Y軸超出單張圖片大小時所使用的重復(fù)策略

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

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

Android自定義控件實(shí)現(xiàn)望遠(yuǎn)鏡效果

TileMode.REPEAT：重復(fù)原圖像來填充多余空間，其實(shí)這個模式最好理解，就是復(fù)制粘貼，X不夠的空白區(qū)域填充原圖，Y不夠的也用原圖像填充。

Android自定義控件實(shí)現(xiàn)望遠(yuǎn)鏡效果

TileMode.MIRROR：重復(fù)使用鏡像模式的圖像來填充多余空間，有可能有的小伙伴不懂MIRROR鏡像模式，其實(shí)鏡像模式就是想鏡子一樣翻轉(zhuǎn)了圖像，如下圖所示：

Android自定義控件實(shí)現(xiàn)望遠(yuǎn)鏡效果

2.望遠(yuǎn)鏡效果實(shí)現(xiàn)

原理已經(jīng)剖析清楚了，接著，我們就來實(shí)現(xiàn)開頭的望遠(yuǎn)鏡效果，首先，還是自定義控件，畢竟這一個專欄都是自定義控件，基本每篇都少不了這個步驟，代碼如下：

public class BitmapShaderView extends View {
 private Paint paint;//畫筆工具
 private Bitmap bgBitmap,bitmap;//隱藏圖像以及原圖像
 private int mX=-1,mY=-1;//捕獲手指的位置坐標(biāo)
 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);
 }
}

詳細(xì)注解，應(yīng)該可以理解了，這里就不在做過多的贅述，接下來，我們需要捕獲手指下按，移動以及離開屏幕的手指所在位置，也就是重寫onTouchEvent()函數(shù)：

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);
}

這里捕獲了移動以及按下手指的坐標(biāo)，這樣就可以定位望遠(yuǎn)鏡的位置，而當(dāng)手指抬起的時候，望遠(yuǎn)鏡效果就不見了，所以必須設(shè)置他們坐標(biāo)為-1。最后是繪圖代碼，onDraw()實(shí)現(xiàn)：

protected void onDraw(Canvas canvas) {
 super.onDraw(canvas);
 if(this.bgBitmap==null){
   this.bgBitmap=Bitmap.createBitmap(getWidth(),getHeight(),Bitmap.Config.ARGB_8888);//創(chuàng)建一個新空白位圖
  Canvas canvasBg=new Canvas(this.bgBitmap);
  //然后對背景圖拉升后，畫到上面的位圖中
  canvasBg.drawBitmap(this.bitmap,null,new Rect(0,0,getWidth(),getHeight()),this.paint);
 }
 if(this.mX!=-1 && this.mY!=-1){
  //填充模式為上面講的第二種，就是復(fù)制粘貼的填充模式，但這里不會執(zhí)行
  //因?yàn)槲覀兩厦鎻?qiáng)制設(shè)置了圖片的大小為整個屏幕，所以屏幕沒有空白區(qū)域
  this.paint.setShader(new BitmapShader(this.bgBitmap,  Shader.TileMode.REPEAT,Shader.TileMode.REPEAT));
   canvas.drawCircle(this.mX,this.mY,200,this.paint);
 }
}

這里我們首先創(chuàng)建了一個空白位圖，然后對原圖像進(jìn)行拉升后畫到這張位圖中，接著，根據(jù)設(shè)置畫筆的填充模式，這里其實(shí)沒用，是因?yàn)槲覀兝藞D像，并沒有空白區(qū)域，最后，我們根據(jù)手指坐標(biāo)，將望遠(yuǎn)鏡效果繪制到手機(jī)界面中，這樣望遠(yuǎn)鏡效果的自定義控件完美實(shí)現(xiàn)了。

GitHub源代碼下載地址：點(diǎn)擊下載

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手