今天教大家做一個,圖片四角任意定位自定義控制元件
讓我們先來看看效果gif:

當然,需求只是滿足我個人專案,肯定會有不足的地方
首先,在開發這個自定義控制元件之前,我們必須先得搞清楚最重要的兩點,需求與實現思路,讓我們來探討下:
需求:
1.有圖片背景存在,並且這個圖片背景可隨時更換,不固定
2.圖上有四個角,且四個角可任意拖動
3.點選拖動任意四角其中一角會出現一個放大鏡,放開則放大鏡消失
實現思路:
1.由於我們專案後面流程還需要旋轉,跟其他一切繁瑣的操作,剛好imageview可以滿足,所以我選擇自定義imageview
2.在imageview上,畫出四個點,通過onTouchEvent控制點的移動
3.也是同理,通過onTouchEvent來判斷放大鏡的顯示與隱藏
好了,接下來就是大家最痛苦的自定義view開發環節了,屬實開心
第一步,我們自定義我們需要的屬性

定義一些我們需要的屬性,比如,是否顯示放大鏡,線的寬度,顏色

定義一些畫筆
第二步:
在ondraw方法中繪製出我們需要的東西,(四個點,四條線,以及一個放大鏡),不過在此之前,我們需要得到一些關鍵性資訊,比如圖片的縮放比,跟圖片的實際顯示位置,方便我們做計算

寫出兩個方法

得到圖片資訊
接下來,在onDrawCropPoint方法中

繪製三個部件
1.繪製選區線

有些人要問了,這個mCropPoints是什麼了?我下面跟你講
由於我們專案是需要從外部傳入四角引數,來進行人像或物體定位裁剪,所以我從外部會傳入mCropPoints資料進來
那有些同學會說, 我沒有mCropPoints的引數傳進來,可咋辦呢?別怕,我們可以自己寫一個根據圖片寬高最大化的mCropPoints,然後在程式碼中呼叫即可

這樣我們就得到了一個最大化的point[]了

寫一個方法,使得我們在程式碼可以呼叫
2.繪製錨點,就是四個按鈕

先判斷 mCropPoints是否為null,接著迴圈四次(四個點)根據point的位置,每個位置,兩個圓

內圈與外圈
3.繪製放大鏡(其實並沒有放大,只是一個增加定位準確度的效果,因為使用者移動錨點的時候,手指頭會擋住按鈕,無法準確定位,需要做放大鏡功能可以私聊我,下個版本可以增加)

外圈灰色+內圈影象+十字準心

先判斷是否有mMagnifierDrawable,若為null,則去建立一個,用來顯示放大鏡
備註:X,Y是onTouchEvent的引數,我將其作為變數來計算
radius是放大鏡的半徑

上圖總結概括一下,建立一個 橢圓形,用來展示放大鏡
好了,到目前為止,我們的影象都已經畫好了,接下來是移動四個錨點了

一步步分解
1.手指按下

如果點選位置小於我設定的半徑,則相當於,我點選了最近點的錨點,將該點取出

2.手指移動,(由於程式碼過多,分段裁剪)



3.手指拿起,將mDraggingPoint設定為null,由於為null則放大鏡判斷不顯示
大家辛苦了,至此,我們的四角任意定位控制元件,已經完成了
最後在我們的XML中引用我們的自定義控制元件,然後在程式碼中註冊,執行即可看到效果

設為最大化
此為簡易版,僅供自定義不熟練的同學觀看,大牛請繞道,我們下期再會!!!
荊軻刺秦王,毛腿肩上扛
需要demo的同學留個郵箱哈~~~