鴻蒙系統(tǒng)的手勢(shì)操控組件代碼現(xiàn)已開源

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

開源地址：

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

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

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

01

組件效果展示

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

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

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

02

Sample 解析

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

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

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

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

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

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

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

DirectionalLayout directionalLayout = new DirectionalLayout（this）;

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

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)手勢(shì)獲取功能和圖片操控功能。

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

①手勢(shì)獲取方法

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

主要用到的手勢(shì)包含：

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

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

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

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

POINT_MOVE（手指在屏幕上移動(dòng)）

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

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

（1）PRIMARY_POINT_UP

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

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

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

if （mPinchMode == PINCH_MODE_SCALE） {

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

}

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

mPinchMode = PINCH_MODE_FREE;

}

（2）PRIMARY_POINT_DOWN

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

else if （action == TouchEvent.PRIMARY_POINT_DOWN） {

//在縮放動(dòng)畫過程中不允許啟動(dòng)滾動(dòng)模式

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

//在動(dòng)畫過程中不允許啟動(dòng)滾動(dòng)模式，停止所有動(dòng)畫

cancelAllAnimator（）;

//切換到滾動(dòng)模式

mPinchMode = PINCH_MODE_SCROLL;

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

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

}

}

（3）OTHER_POINT_DOWN

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

else if （action == TouchEvent.OTHER_POINT_DOWN） {

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

cancelAllAnimator（）;

//切換到縮放模式

mPinchMode = PINCH_MODE_SCALE;

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

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

}

（4）OTHER_POINT_UP

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

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

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

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

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

else if （action == TouchEvent.OTHER_POINT_UP） {

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

if （mPinchMode == PINCH_MODE_SCALE） {

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

if （event.getPointerCount（） 》 2） {

//如果還沒結(jié)束縮放模式，但是第一個(gè)點(diǎn)抬起了，那么讓第二個(gè)點(diǎn)和第三個(gè)點(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é)束縮放模式，但是第二個(gè)點(diǎn)抬起了，那么讓第一個(gè)點(diǎn)和第三個(gè)點(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，那么此時(shí)只剩下一個(gè)點(diǎn)，也不允許進(jìn)入單指模式，因?yàn)榇藭r(shí)可能圖片沒有在正確的位置上

}

}

（5）POINT_MOVE

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

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

else if （action == TouchEvent.POINT_MOVE） {

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

//在滾動(dòng)模式下移動(dòng)

if （mPinchMode == PINCH_MODE_SCROLL） {

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

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

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

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

//在縮放模式下移動(dòng)

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

//兩個(gè)縮放點(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、圖片縮放

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

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

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

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

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

if （！isReady（）） {

return;

}

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

float scale = scaleBase * distance;

Matrix matrix = MathUtils.matrixTake（）;

//按照?qǐng)D片縮放中心縮放，并且讓縮放中心在縮放點(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（） 方法體中我們初始化了一個(gè)縮放動(dòng)畫的對(duì)象 mScaleAnimator（），它有兩個(gè)參數(shù)分別為 mOuterMatrix（開始矩陣）和 animEnd（結(jié)束矩陣）。

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

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

private void doubleTap（float x， float y） {

...

//開始計(jì)算縮放動(dòng)畫的結(jié)果矩陣

Matrix animEnd = MathUtils.matrixTake（mOuterMatrix）;

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

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

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

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í)行的動(dòng)畫

cancelAllAnimator（）;

//啟動(dòng)矩陣動(dòng)畫

mScaleAnimator = new ScaleAnimator（mOuterMatrix， animEnd）;

mScaleAnimator.start（）;

...

}

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

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

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

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

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

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

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

圖 6：圖片移動(dòng)的最大距離

public boolean scrollBy（float xDiff， float yDiff） {

...

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

xDiff = 0;

//如果圖片左邊在移動(dòng)后超出控件左邊

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

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

if （bound.left 《 0） {

xDiff = -bound.left;

//否則無法移動(dòng)

} else {

xDiff = 0;

}

//如果圖片右邊在移動(dòng)后超出控件右邊

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

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

if （bound.right 》 displayWidth） {

xDiff = displayWidth - bound.right;

//否則無法移動(dòng)

} else {

xDiff = 0;

}

}

...

}

責(zé)任編輯：haq