图片缩放和移动原理

项目源码：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);
}