讓我們先來(lái)看看效果gif:
首先,在開(kāi)發(fā)這個(gè)自定義控件之前懂扼,我們必須先得搞清楚最重要的兩點(diǎn),需求與實(shí)現(xiàn)思路右蒲,讓我們來(lái)探討下:
需求:
1.有圖片背景存在阀湿,并且這個(gè)圖片背景可隨時(shí)更換,不固定
2.圖上有四個(gè)角瑰妄,且四個(gè)角可任意拖動(dòng)
3.點(diǎn)擊拖動(dòng)任意四角其中一角會(huì)出現(xiàn)一個(gè)放大鏡陷嘴,放開(kāi)則放大鏡消失
實(shí)現(xiàn)思路:
1.由于我們項(xiàng)目后面流程還需要旋轉(zhuǎn),跟其他一切繁瑣的操作间坐,剛好imageview可以滿足灾挨,所以我選擇自定義imageview
2.在imageview上,畫(huà)出四個(gè)點(diǎn)竹宋,通過(guò)onTouchEvent控制點(diǎn)的移動(dòng)
3.也是同理劳澄,通過(guò)onTouchEvent來(lái)判斷放大鏡的顯示與隱藏
好了,接下來(lái)就是大家最痛苦的自定義view開(kāi)發(fā)環(huán)節(jié)了蜈七,屬實(shí)開(kāi)心
第一步秒拔,我們自定義我們需要的屬性
第二步:
在ondraw方法中繪制出我們需要的東西,(四個(gè)點(diǎn)庵芭,四條線妹懒,以及一個(gè)放大鏡),不過(guò)在此之前双吆,我們需要得到一些關(guān)鍵性信息眨唬,比如圖片的縮放比,跟圖片的實(shí)際顯示位置伊诵,方便我們做計(jì)算
接下來(lái)单绑,在onDrawCropPoint方法中
1.繪制選區(qū)線
由于我們項(xiàng)目是需要從外部傳入四角參數(shù)搂橙,來(lái)進(jìn)行人像或物體定位裁剪,所以我從外部會(huì)傳入mCropPoints數(shù)據(jù)進(jìn)來(lái)
那有些同學(xué)會(huì)說(shuō)笛坦, 我沒(méi)有mCropPoints的參數(shù)傳進(jìn)來(lái)区转,可咋辦呢?別怕版扩,我們可以自己寫(xiě)一個(gè)根據(jù)圖片寬高最大化的mCropPoints废离,然后在代碼中調(diào)用即可
2.繪制錨點(diǎn)礁芦,就是四個(gè)按鈕
3.繪制放大鏡(其實(shí)并沒(méi)有放大肖方,只是一個(gè)增加定位準(zhǔn)確度的效果,因?yàn)橛脩粢苿?dòng)錨點(diǎn)的時(shí)候未状,手指頭會(huì)擋住按鈕俯画,無(wú)法準(zhǔn)確定位,需要做放大鏡功能可以私聊我司草,下個(gè)版本可以增加)
備注:X,Y是onTouchEvent的參數(shù)猜憎,我將其作為變量來(lái)計(jì)算
radius是放大鏡的半徑
好了拉宗,到目前為止,我們的圖像都已經(jīng)畫(huà)好了,接下來(lái)是移動(dòng)四個(gè)錨點(diǎn)了
1.手指按下
2.手指移動(dòng)姐浮,(由于代碼過(guò)多谷遂,分段裁剪)
3.手指拿起,將mDraggingPoint設(shè)置為null卖鲤,由于為null則放大鏡判斷不顯示
大家辛苦了肾扰,至此,我們的四角任意定位控件蛋逾,已經(jīng)完成了
最后在我們的XML中引用我們的自定義控件集晚,然后在代碼中注冊(cè),運(yùn)行即可看到效果
此為簡(jiǎn)易版区匣,僅供自定義不熟練的同學(xué)觀看偷拔,大牛請(qǐng)繞道,我們下期再會(huì)?鞴场A隆!
荊軻刺秦王姑丑,毛腿肩上扛
需要demo的同學(xué)留個(gè)郵箱哈~~~