基于安卓平臺的手勢操控組件 PinchImageView-ohos，實(shí)現(xiàn)鴻蒙的功能化遷移和重構(gòu)。代碼已經(jīng)開源，歡迎各位開發(fā)者提出寶貴意見。

開源地址：

https://gitee.com/isrc_ohos/pinch-image-view-ohos

PinchImageView-ohos 是一個支持多點(diǎn)觸控的 ImageView 手勢操控組件，通過識別單指雙擊、雙指捏合、單指滑動等手勢指令，實(shí)現(xiàn)圖片的放大、縮小、滑動等效果。

該組件功能豐富且使用簡單，被廣泛應(yīng)用于各類圖片預(yù)覽類應(yīng)用。

01

組件效果展示

①雙指相向或相對捏合，實(shí)現(xiàn)圖片的縮放變化。

②單指雙擊實(shí)現(xiàn)圖片的放大縮小。

③單指雙擊后單指移動，實(shí)現(xiàn)圖片的放大后平移。

02

Sample 解析

Sample 部分主要負(fù)責(zé)整體顯示布局的搭建。首先為 PinchImageView-ohos 組件設(shè)置顯示圖片，然后將組件對象添加到顯示布局中。

下面將詳細(xì)介紹組件的使用方法：

步驟 1：創(chuàng)建整體的顯示布局。

步驟 2：導(dǎo)入相關(guān)類并實(shí)例化 PinchImageView-ohos 組件對象。

步驟 3：設(shè)置顯示圖片。

步驟 4：將 PinchImageView-ohos 組件對象添加到整體顯示布局中。

//步驟1 創(chuàng)建整體的顯示布局

DirectionalLayout directionalLayout = new DirectionalLayout（this）;

//步驟2 導(dǎo)入相關(guān)類并實(shí)例化對象

PinchImageViewnew pinchImageView = new PinchImageViewnew（this）;

//步驟3 設(shè)置顯示圖片

pinchImageView.setPixelMap（this， ResourceTable.Media_1111）;

//步驟4 將pinchImageView添加到整體顯示布局中

directionalLayout.addComponent（pinchImageView）;

setUIContent（directionalLayout）;

03

Library 解析

Library 主要為 PinchImageView-ohos 組件實(shí)現(xiàn)手勢獲取功能和圖片操控功能。

開發(fā)者通過設(shè)置監(jiān)聽器來捕捉各類手勢，根據(jù)不同的手勢執(zhí)行不同的圖片操控方法，從而顯示不同的圖片操控效果，如放大、縮小、移動。

①手勢獲取方法

手勢獲取對實(shí)現(xiàn) PinchImageView-ohos 組件的功能尤為重要，此處主要通過 onTouchEvent（） 方法來捕捉對應(yīng)的手勢。

主要用到的手勢包含：

PRIMARY_POINT_UP（最后一根手指從屏幕上抬起）

PRIMARY_POINT_DOWN（第一根手指觸摸屏幕）

OTHER_POINT_DOWN（當(dāng)一根或多根手指已經(jīng)觸摸屏幕時，另一個手指觸摸屏幕 ）

OTHER_POINT_UP（一些手指從屏幕上抬起，而一些手指仍留在屏幕上 ）

POINT_MOVE（手指在屏幕上移動）

通過監(jiān)控各類手勢的操作順序和觸碰時間等條件，達(dá)到識別捏合、滑動、單擊、雙擊等復(fù)雜手勢的效果。

onTouchEvent（） 函數(shù)首先通過 TouchEvent.getAction（） 方法獲取當(dāng)前的手勢，當(dāng)手勢為：

（1）PRIMARY_POINT_UP

需要判斷圖片之前是否處于縮放模式（此時圖片處于縮放狀態(tài)）。如果是縮放模式，則觸發(fā)結(jié)束縮放動畫，后將手勢狀態(tài)置于自由模式。

//最后一個點(diǎn)抬起或者取消，結(jié)束所有模式if （action == TouchEvent.PRIMARY_POINT_UP || action == TouchEvent.CANCEL） {

//如果之前是縮放模式，還需要結(jié)束縮放動畫

if （mPinchMode == PINCH_MODE_SCALE） {

scaleEnd（）;//縮放結(jié)束

}

//手勢狀態(tài)置于自由模式

mPinchMode = PINCH_MODE_FREE;

}

（2）PRIMARY_POINT_DOWN

需要判斷圖片是否在縮放動畫中，若不在，圖片將切換到滾動模式（此時圖片處于可自由移動狀態(tài)），并保存觸發(fā)點(diǎn)的位置，用于（5）中的計算。

else if （action == TouchEvent.PRIMARY_POINT_DOWN） {

//在縮放動畫過程中不允許啟動滾動模式

if （?。╩ScaleAnimator ！= null && mScaleAnimator.isRunning（））） {

//在動畫過程中不允許啟動滾動模式，停止所有動畫

cancelAllAnimator（）;

//切換到滾動模式

mPinchMode = PINCH_MODE_SCROLL;

//保存觸發(fā)點(diǎn)的位置用于（5）中的計算

mLastMovePoint.modify（event.getPointerPosition（0）.getX（）， event.getPointerPosition（0）.getY（））;

}

}

（3）OTHER_POINT_DOWN

需要將圖片模式切換到縮放模式，并保存兩個觸發(fā)點(diǎn)的位置，用于（5）中的計算。

else if （action == TouchEvent.OTHER_POINT_DOWN） {

//在動畫過程中不允許啟動縮放模式，停止所有動畫

cancelAllAnimator（）;

//切換到縮放模式

mPinchMode = PINCH_MODE_SCALE;

//保存縮放的兩個觸發(fā)點(diǎn)的位置，用于（5）中的計算

saveScaleContext（event.getPointerPosition（0）.getX（）， event.getPointerPosition（0）.getY（）， event.getPointerPosition（1）.getX（）， event.getPointerPosition（1）.getY（））;

}

（4）OTHER_POINT_UP

需要判斷手指抬起后圖片是否處于縮放模式。如果處于縮放模式下，判斷識別到的手指是否超過兩個。

在剩余手指超過兩個（縮放模式未結(jié)束）的情況下，第一個觸摸的手指抬起，那么讓第二個觸摸的手指和第三個觸摸的手指所在的點(diǎn)作為縮放控制點(diǎn)。

在剩余手指超過兩個（縮放模式未結(jié)束）的情況下，第二個觸摸的手指抬起，那么讓第一個觸摸的手指和第三個觸摸的手指所在的點(diǎn)作為縮放控制點(diǎn)。

如果處于縮放模式下，判斷識別到的手指只有一個。此時不能允許它切換到滾動模式，因?yàn)閳D片可能沒有在初始的位置上。

手指抬起后圖片未處于縮放模式時（屏幕上僅剩余一個手指），開啟滾動模式，并記錄開始滾動的點(diǎn)。

else if （action == TouchEvent.OTHER_POINT_UP） {

//多個手指情況下抬起一個手指，此時需要是縮放模式才觸發(fā)

if （mPinchMode == PINCH_MODE_SCALE） {

//抬起的點(diǎn)如果大于2，那么縮放模式還有效，但是有可能初始點(diǎn)變了，重新測量初始點(diǎn)

if （event.getPointerCount（） 》 2） {

//如果還沒結(jié)束縮放模式，但是第一個點(diǎn)抬起了，那么讓第二個點(diǎn)和第三個點(diǎn)作為縮放控制點(diǎn)

if （event.getAction（） 》》 8 == 0） {

event.getPointerPosition（1）.getX（）;

saveScaleContext（event.getPointerPosition（1）.getX（）， event.getPointerPosition（1）.getY（）， event.getPointerPosition（2）.getX（）， event.getPointerPosition（2）.getY（））;

//如果還沒結(jié)束縮放模式，但是第二個點(diǎn)抬起了，那么讓第一個點(diǎn)和第三個點(diǎn)作為縮放控制點(diǎn)

} else if （event.getAction（） 》》 8 == 1） {

saveScaleContext（event.getPointerPosition（0）.getX（）， event.getPointerPosition（0）.getY（）， event.getPointerPosition（2）.getX（）， event.getPointerPosition（2）.getY（））;

}

}

//如果抬起的點(diǎn)等于2，那么此時只剩下一個點(diǎn)，也不允許進(jìn)入單指模式，因?yàn)榇藭r可能圖片沒有在正確的位置上

}

}

（5）POINT_MOVE

需要判斷當(dāng)前圖片的模式。當(dāng)為滾動模式時，執(zhí)行 scrollBy（） 方法來實(shí)現(xiàn)圖片的移動效果；當(dāng)它為縮放模式時，計算兩個縮放點(diǎn)的距離和縮放點(diǎn)的中心，并執(zhí)行 scale（） 方法實(shí)現(xiàn)圖片的縮放效果。

scrollBy（） 方法和 scale（） 方法的具體邏輯在圖片操控方法中有詳細(xì)介紹，此處就不做過多贅述。

else if （action == TouchEvent.POINT_MOVE） {

if （！（mScaleAnimator ！= null && mScaleAnimator.isRunning（））） {

//在滾動模式下移動

if （mPinchMode == PINCH_MODE_SCROLL） {

//每次移動產(chǎn)生一個差值累積到圖片位置上

scrollBy（event.getPointerPosition（0）.getX（） - mLastMovePoint.position［0］， event.getPointerPosition（0）.getY（） - mLastMovePoint.position［1］）;

//記錄新的移動點(diǎn)

mLastMovePoint.modify（event.getPointerPosition（0）.getX（）， event.getPointerPosition（0）.getY（））;

//在縮放模式下移動

} else if （mPinchMode == PINCH_MODE_SCALE && event.getPointerCount（） 》 1） {

//兩個縮放點(diǎn)間的距離

float distance = MathUtils.getDistance（event.getPointerPosition（0）.getX（）， event.getPointerPosition（0）.getY（）， event.getPointerPosition（1）.getX（）， event.getPointerPosition（1）.getY（））;

//保存縮放點(diǎn)中心

float［］ lineCenter = MathUtils.getCenterPoint（event.getPointerPosition（0）.getX（）， event.getPointerPosition（0）.getY（）， event.getPointerPosition（1）.getX（）， event.getPointerPosition（1）.getY（））;

mLastMovePoint.modify（lineCenter［0］， lineCenter［1］）;

//處理縮放

scale（mScaleCenter， mScaleBase， distance， mLastMovePoint）;

}

}

}

②圖片操控方法

1、圖片縮放

雙指捏合：顧名思義是表示兩根手指向相反方向移動的操作，該操作可實(shí)現(xiàn)圖片放大縮小的效果。雙指捏合完成圖片縮放的功能是由 scale（） 方法實(shí)現(xiàn)的。

在 scale（） 方法體中需要設(shè)置各種縮放參數(shù)：scaleBase 是縮放系數(shù)、scaleCenter 代表圖片縮放中點(diǎn)、distance 指兩指間距離、lineCenter 是兩指中點(diǎn)。

scaleBase 和 distance 相乘會得到縮放比例，圖片依舊縮放比例進(jìn)行變化。

在縮放過程中，圖片縮放中點(diǎn) scaleCenter 會跟隨兩指中點(diǎn) lineCenter 移動，實(shí)現(xiàn)以兩指中點(diǎn)為中心對圖片進(jìn)行放大縮小的效果，縮放效果如圖 4 所示。圖 4：圖片雙指縮放

private void scale（Point scaleCenter， float scaleBase， float distance， Point lineCenter） {

if （！isReady（）） {

return;

}

//計算圖片從fit center狀態(tài)到目標(biāo)狀態(tài)的縮放比例

float scale = scaleBase * distance;

Matrix matrix = MathUtils.matrixTake（）;

//按照圖片縮放中心縮放，并且讓縮放中心在縮放點(diǎn)中點(diǎn)上

matrix.postScale（scale， scale， scaleCenter.position［0］， scaleCenter.position［1］）;

//讓圖片的縮放中點(diǎn)跟隨手指縮放中點(diǎn)

matrix.postTranslate（lineCenter.position［0］ - scaleCenter.position［0］， lineCenter.position［1］ - scaleCenter.position［1］）;

//應(yīng)用變換

mOuterMatrix.setMatrix（matrix）;

MathUtils.matrixGiven（matrix）;

dispatchOuterMatrixChanged（）;

//重繪

invalidate（）;

}

單指雙擊：表示用單根手指雙擊屏幕的操作，該操作可實(shí)現(xiàn)圖片放大縮小的效果，單指雙擊完成圖片縮放的功能是由 doubleTap（） 方法實(shí)現(xiàn)的。

在 doubleTap（） 方法體中我們初始化了一個縮放動畫的對象 mScaleAnimator（），它有兩個參數(shù)分別為 mOuterMatrix（開始矩陣）和 animEnd（結(jié)束矩陣）。

開始矩陣表示圖片原來的位置與大??；結(jié)束矩陣表示圖片縮放后的位置與大小，是根據(jù)放大比例和雙擊點(diǎn)位置確定的。

確定圖片的開始和結(jié)束矩陣后，啟動縮放動畫，便可以實(shí)現(xiàn)縮放效果，如圖 5 所示：

private void doubleTap（float x， float y） {

...

//開始計算縮放動畫的結(jié)果矩陣

Matrix animEnd = MathUtils.matrixTake（mOuterMatrix）;

//計算還需縮放的倍數(shù)

animEnd.postScale（nextScale / currentScale， nextScale / currentScale， x， y）;

//將放大點(diǎn)移動到控件中心

animEnd.postTranslate（displayWidth / 2f - x， displayHeight / 2f - y）;

RectFloat testBound = MathUtils.rectFTake（0，0，mp.getImageInfo（）.size.width，mp.getImageInfo（）.size.height）;

...

//清理當(dāng)前可能正在執(zhí)行的動畫

cancelAllAnimator（）;

//啟動矩陣動畫

mScaleAnimator = new ScaleAnimator（mOuterMatrix， animEnd）;

mScaleAnimator.start（）;

...

}

2、圖片在縮放狀態(tài)下移動

單指滑動表示手指在屏幕上完成矢量平移，是圖片移動的唯一方式。該功能是通過 scrollBy（） 方法實(shí)現(xiàn)的。

以實(shí)現(xiàn)圖片左右移動為例，在 scrollBy（） 方法中，需要判斷縮放狀態(tài)下圖片位移的最大距離，有以下幾種不同的情況：

圖片移動后，左側(cè)邊緣超出控件的左側(cè)邊緣，圖片無法移動。

圖片移動后，右側(cè)邊緣超出控件的右側(cè)邊緣，圖片無法移動。

圖片移動后，兩側(cè)都未超出控件邊緣的情況下，將以手指觸碰點(diǎn)作為控制點(diǎn)，對圖片進(jìn)行水平移動。

圖片上下平移的情況與左右平移類似，這里不做贅述，圖片移動效果如圖 6 所示：

圖 6：圖片移動的最大距離

public boolean scrollBy（float xDiff， float yDiff） {

...

if （bound.right - bound.left 《 displayWidth） {

xDiff = 0;

//如果圖片左邊在移動后超出控件左邊

} else if （bound.left + xDiff 》 0） {

//如果在移動之前是沒超出的，計算應(yīng)該移動的距離

if （bound.left 《 0） {

xDiff = -bound.left;

//否則無法移動

} else {

xDiff = 0;

}

//如果圖片右邊在移動后超出控件右邊

} else if （bound.right + xDiff 《 displayWidth） {

//如果在移動之前是沒超出的，計算應(yīng)該移動的距離

if （bound.right 》 displayWidth） {

xDiff = displayWidth - bound.right;

//否則無法移動

} else {

xDiff = 0;

}

}

...

}

責(zé)任編輯：haq