項目源碼：ZoomImage

圖片的縮放和移動其實就是view的onTouch和onDrawa()方法的使用.

首先我們來分析下具體的處理操作

1.首先是原圖顯示在界面的時候，我們要讓圖片居中，以及當圖片大于屏幕寬高時對圖片進行壓縮。

2.當兩個手機放在屏幕的時候計算出兩個手機的中心位置，然后判斷中心位置的變化，來判斷圖片是放大還是縮小

3.設定做大的放大倍數為4倍，當擴大到4倍的時候，則不再繼續擴大

4.當擴大的時候的時候由2根手指變成一根，這時候我們判斷為是滑動狀態

? ?4.1 水平滑動的時候：

? ? ? ? ? 當圖片從左向右滑動的時候計算滑動的位移值+擴大圖片的水平位移值不能大于0，大于0則不刷新頁面

? ? ? ? ? 當圖片從右向左滑動的時候計算滑動的位移值+屏幕的寬度不能大于當前圖片的寬度（擴大后圖片的寬度）

? ?4.2 豎直方向滑動的時候：

? ? ? ? ? 從水平方向滑動中總結就可以了

下面貼代碼看一下

1.首先是原圖顯示在界面的時候，我們要讓圖片居中，以及當圖片大于屏幕寬高時對圖片進行壓縮。

/*** 對圖片進行初始化操作，包括讓圖片居中，以及當圖片大于屏幕寬高時對圖片進行壓縮。* * @param canvas*/private void initBitmap(Canvas canvas) {if (sourceBitmap != null) {matrix.reset();int bitmapWidth = sourceBitmap.getWidth();int bitmapHeight = sourceBitmap.getHeight();if (bitmapWidth > width || bitmapHeight > height) {if (bitmapWidth - width > bitmapHeight - height) {// 當圖片寬度大于屏幕寬度時，將圖片等比例壓縮，使它可以完全顯示出來float ratio = width / (bitmapWidth * 1.0f);matrix.postScale(ratio, ratio);float translateY = (height - (bitmapHeight * ratio)) / 2f;// 在縱坐標方向上進行偏移，以保證圖片居中顯示matrix.postTranslate(0, translateY);totalTranslateY = translateY;totalRatio = initRatio = ratio;} else {// 當圖片高度大于屏幕高度時，將圖片等比例壓縮，使它可以完全顯示出來float ratio = height / (bitmapHeight * 1.0f);matrix.postScale(ratio, ratio);float translateX = (width - (bitmapWidth * ratio)) / 2f;// 在橫坐標方向上進行偏移，以保證圖片居中顯示matrix.postTranslate(translateX, 0);totalTranslateX = translateX;totalRatio = initRatio = ratio;}currentBitmapWidth = bitmapWidth * initRatio;currentBitmapHeight = bitmapHeight * initRatio;} else {// 當圖片的寬高都小于屏幕寬高時，直接讓圖片居中顯示float translateX = (width - sourceBitmap.getWidth()) / 2f;float translateY = (height - sourceBitmap.getHeight()) / 2f;matrix.postTranslate(translateX, translateY);totalTranslateX = translateX;totalTranslateY = translateY;totalRatio = initRatio = 1f;currentBitmapWidth = bitmapWidth;currentBitmapHeight = bitmapHeight;}canvas.drawBitmap(sourceBitmap, matrix, null);}}

2.當兩個手機放在屏幕的時候計算出兩個手機的中心位置，然后判斷中心位置的變化，來判斷圖片是放大還是縮小

public boolean onTouchEvent(MotionEvent event) {switch (event.getActionMasked()) {case MotionEvent.ACTION_MOVE:if (event.getPointerCount() == 2) {// 有兩個手指按在屏幕上移動時，為縮放狀態centerPointBetweenFingers(event);double fingerDis = distanceBetweenFingers(event);if (fingerDis > lastFingerDis) {currentStatus = STATUS_ZOOM_OUT;} else {currentStatus = STATUS_ZOOM_IN;}// 進行縮放倍數檢查，最大只允許將圖片放大4倍，最小可以縮小到初始化比例if ((currentStatus == STATUS_ZOOM_OUT && totalRatio < 4 * initRatio)|| (currentStatus == STATUS_ZOOM_IN && totalRatio > initRatio)) {scaledRatio = (float) (fingerDis / lastFingerDis);totalRatio = totalRatio * scaledRatio;if (totalRatio > 4 * initRatio) {totalRatio = 4 * initRatio;} else if (totalRatio < initRatio) {totalRatio = initRatio;}// 調用onDraw()方法繪制圖片invalidate();lastFingerDis = fingerDis;}}}}
3.設定做大的放大倍數為4倍，當擴大到4倍的時候，則不再繼續擴大

/*** 對圖片進行縮放處理。* * @param canvas*/private void zoom(Canvas canvas) {matrix.reset();// 將圖片按總縮放比例進行縮放matrix.postScale(totalRatio, totalRatio);float scaledWidth = sourceBitmap.getWidth() * totalRatio;float scaledHeight = sourceBitmap.getHeight() * totalRatio;float translateX = 0f;float translateY = 0f;// 如果當前圖片寬度小于屏幕寬度，則按屏幕中心的橫坐標進行水平縮放。否則按兩指的中心點的橫坐標進行水平縮放if (currentBitmapWidth < width) {translateX = (width - scaledWidth) / 2f;} else {Log.e("====","====scaledRatio:"+scaledRatio+"==centerPointX:"+centerPointX+"==scaledRatio:"+scaledRatio);translateX = totalTranslateX * scaledRatio + centerPointX * (1 - scaledRatio);// 進行邊界檢查，保證圖片縮放后在水平方向上不會偏移出屏幕if (translateX > 0) {translateX = 0;} else if (width - translateX > scaledWidth) {translateX = width - scaledWidth;}}// 如果當前圖片高度小于屏幕高度，則按屏幕中心的縱坐標進行垂直縮放。否則按兩指的中心點的縱坐標進行垂直縮放if (currentBitmapHeight < height) {translateY = (height - scaledHeight) / 2f;} else {translateY = totalTranslateY * scaledRatio + centerPointY * (1 - scaledRatio);// 進行邊界檢查，保證圖片縮放后在垂直方向上不會偏移出屏幕if (translateY > 0) {translateY = 0;} else if (height - translateY > scaledHeight) {translateY = height - scaledHeight;}}// 縮放后對圖片進行偏移，以保證縮放后中心點位置不變matrix.postTranslate(translateX, translateY);totalTranslateX = translateX;totalTranslateY = translateY;currentBitmapWidth = scaledWidth;currentBitmapHeight = scaledHeight;canvas.drawBitmap(sourceBitmap, matrix, null);}
4.當擴大的時候的時候由2根手指變成一根，這時候我們判斷為是滑動狀態
? ?4.1 水平滑動的時候：
? ? ? ? ? 當圖片從左向右滑動的時候計算滑動的位移值+擴大圖片的水平位移值不能大于0，大于0則不刷新頁面
? ? ? ? ? 當圖片從右向左滑動的時候計算滑動的位移值+屏幕的寬度不能大于當前圖片的寬度（擴大后圖片的寬度）

case MotionEvent.ACTION_MOVE:if (event.getPointerCount() == 1) {// 只有單指按在屏幕上移動時，為拖動狀態float xMove = event.getX();float yMove = event.getY();if (lastXMove == -1 && lastYMove == -1) {lastXMove = xMove;lastYMove = yMove;}currentStatus = STATUS_MOVE;movedDistanceX = xMove - lastXMove;movedDistanceY = yMove - lastYMove;// 進行邊界檢查，不允許將圖片拖出邊界Log.e("====","====width:"+(width )+"==tranx:"+(totalTranslateX + movedDistanceX)+"==totalTranslateX："+totalTranslateX+"==movedDistanceX:"+movedDistanceX+"===currentBitmapWidth:"+currentBitmapWidth);if (totalTranslateX + movedDistanceX > 0) {// Log.e("====","====one:"+(totalTranslateX + movedDistanceX));movedDistanceX = 0;} else if (width - (totalTranslateX + movedDistanceX) > currentBitmapWidth) {movedDistanceX = 0;}if (totalTranslateY + movedDistanceY > 0) {movedDistanceY = 0;} else if (height - (totalTranslateY + movedDistanceY) > currentBitmapHeight) {movedDistanceY = 0;}// 調用onDraw()方法繪制圖片invalidate();lastXMove = xMove;lastYMove = yMove;}移動處理的時候：

/*** 對圖片進行平移處理* * @param canvas*/private void move(Canvas canvas) {matrix.reset();// 根據手指移動的距離計算出總偏移值float translateX = totalTranslateX + movedDistanceX;float translateY = totalTranslateY + movedDistanceY;// 先按照已有的縮放比例對圖片進行縮放matrix.postScale(totalRatio, totalRatio);// 再根據移動距離進行偏移matrix.postTranslate(translateX, translateY);totalTranslateX = translateX;totalTranslateY = translateY;canvas.drawBitmap(sourceBitmap, matrix, null);}

總結

以上是生活随笔為你收集整理的图片缩放和移动原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。