Androdi-学习----- 图片的放大缩小(1)
最近在做图库的时候,遇到了图片放大缩小的问题,其实在今后的开发中图片的放大缩小移动的问题是很常见的.
ok 现在来详细探究一下放大缩小究竟要如何去实现, 实现的原理又是怎样
实现的方法其实很简单, 主要用到了一个对象Matrix 图片的缩放移动矩阵对象
Matirx 对象他是一个 3*3 的二位数组, 具体关于该对象的详细描述,后面再说,
先来谈谈如何利用该对象进行放大缩小和移动
大前提,你要想突破随你放大缩小移动, 就得让图片的缩放类型为 Matrix:
this
.setScaleType(ImageView.ScaleType.
MATRIX
);
或在xml 文件中 加入 android:scaleType
=
"matrix"
第一步 :
private
Matrix
matrix
=
new
Matrix();// 先new 一个缩放大矩阵
matrix
=
this
.getImageMatrix(); 获取当前图片的缩放矩阵
第二部:处理该矩阵
1.移动:
matrix
.postTranslate(dx, dy); 表示想x轴移动dx 像素, y轴上移动dy像素
2.放大缩小:
matrix
.postScale(scaleX, scaleY, x, y); //表示
scaleX 表示x方向上的缩放比例
// scaleY 表示Y方向的缩放比例
// 表示缩放说围绕的点
上面两个方法是可以叠加的, 就是你使用了
postTranslate 和
postScale 两者之间不会冲突
ok 上面只是把我们想要缩放处理的矩阵处理好了, 接下来样让图片说缩放和移动
家下来要做的就是把我们设置好的矩阵值 set到ImageView中
this
.setImageMatrix(
matrix
)
ok 缩放移动的 基本的实现方式就是上面讲的, 但是在实际工作共不可能这么简单,
我们对图片处理时,需要配合手势的 来进行放大缩小移动.
而且移动不能太快,太慢,要完全根据你的手指移动比例 或 移动距离来计算,那就不是上面说的获取Matrix然后在设置相关值,在set会去那几行代码可以解决的
很多情况下我们是有通过自定义 ImageView 来更加方便的实现放大缩小移动操作的
下面我自己写的放大缩小的 部分源码
自定义ImageView
public class MyImageView extends ImageView {
// 最大的缩放比
private float maxSacle = 4f;
// 最小的缩放比
private float minScale = 0.25f;
/**
* 构造方法
*/
public MyImageView(Context context) {
super(context);
init();
}
/**
* 构造方法 该View 若写在xml 中则调用从方法
*/
public MyImageView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
this.getImageMatrix();
}
/**
* 初始化方法 , 初始化一些必要信息
*/
public void init() {
// 设置缩放方式为 MATRIX
this.setScaleType(ImageView.ScaleType.MATRIX);
this.setImageMatrix(new Matrix());// 设置 Matrix 防止 ImageView自己缩放
}
private final float[] mMatrixValues = new float[9];
public float getScale() {
// TODO getScale 获取 Scale 暂时使用直接返回 x上的缩放比例 其实到最后进行缩放 的实收 xy 的比例都是一样的
matrix.getValues(mMatrixValues);
float scale = mMatrixValues[matrix.MSCALE_X];
return scale;
}
private Matrix matrix = new Matrix();// 处理 Matrix 的中间项 改项一直在改变
private Matrix baseMatrix = new Matrix();// 保持最初是的状态不变
private final Matrix displayMatrix = new Matrix();// 在重画 显示是使用这个
// 注入进ImageView的是这个值
/**
* 缩放处理的方法 通过手势 触控 计算出来的缩放比例 在穿过来之前 和 之前的Scale想乘了得到了相对于图片本身的放大倍数
* 在手势缩放时使用该方法
*
* @param scale
* 相对于图片本身的放大倍数
*
* @param x
* 缩放 围绕点的坐标x
* @param y
* 缩放 围绕点的坐标y
*/
public void zoomSlowLy(float scale, float x, float y) {
Log.i("scale", "scale*currentScale -- " + scale);
// case1
// 计算缩放比是否符合要求
if (scale > maxSacle) {
scale = maxSacle;
}
if (scale < minScale) {
scale = minScale;
}
// 放入 Matrix 中变换比例 不能使我们计算好的, Matrix 他自己会去计算
// 所以 为了 是 超出缩放范围的 也能正常的进行缩放 就把 之前 乘的getScale 在除回来
// 这样 当 newScale > maxSacle 是 scale 就能等于 maxSacle / getScale();
float purScale = getScale();
scale = scale / purScale;
Log.i("scale", "purScale -- " + purScale);
Log.i("scale", "scale / purScale -- " + scale);
matrix.postScale(scale, scale, x, y);// matrix 矩阵变换 处理缩放
// 把变换完成后的 matrix 在注入回 ImageView中
this.setImageMatrix(getImageViewMatrix());
// TODO 处理图片 是的缩放后的图片能够正常显示在屏幕中央
// center(true, true);
}
/**
* 将图片 垂直 或 水平 居中
*
* @param horizontal
* @param vertical
*/
protected void center(boolean horizontal, boolean vertical) {
if (bitmap == null) {// 如果图片为空直接返回
return;
}
Matrix m = getImageViewMatrix();// 获得当前Matrix;
// 建立与图片适配的矩形
RectF rect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());
m.mapRect(rect); // 与当前的matrix 想匹配
// 匹配后的矩形 的 top button left right 分别表示上边 的Y坐标 ,底边的Y坐标 左边的X坐标 右边的X坐标
float height = rect.height();// 匹配后的 矩形的高度
float width = rect.width();// 匹配后 矩形的宽度
float dx = 0f;
float dy = 0f;
if (vertical) {
int viewHeight = getHeight();// 这个事获取 该View的高度,由于使用的fillparaent
// 所以次数是 屏幕高度
if (height < viewHeight) {
dy = (viewHeight - height) / 2 - rect.top;
} else if (rect.top > 0) {
dy = -rect.top;
} else if (rect.bottom < viewHeight) {
dy = viewHeight - rect.bottom;
}
}
if (horizontal) {
int viewWidth = getWidth();
if (width < viewWidth) {
dx = (viewWidth - width) / 2 - rect.left;
} else if (rect.left > 0) {
dx = -rect.left;
} else if (rect.right < viewWidth) {
dx = viewWidth - rect.right;
}
}
matrix.postTranslate(dx, dy);
setImageMatrix(getImageViewMatrix());
}
/**
* 该方法是直接 让该图片准确的去放大多少倍
* 在手势 缩放的过程中不适用该方法, 用该方法的话 体验不好,缩放的太快了
*
* @param scale
* 相对当前已购的缩放倍数 上 在 缩放 scale倍
* @param x
* @param y
*/
public void zoomTure(float scale, float x, float y) {
float curScale = getScale();
float newScale = scale * curScale;
Log.i("scale", "getScale(); -- " + getScale());
Log.i("scale", "scale -- " + scale);
Log.i("scale", "scale*currentScale -- " + newScale);
if (newScale > maxSacle) {
newScale = maxSacle;
}
if (newScale < minScale) {
newScale = minScale;
}
float sureScale = newScale / curScale;
Log.i("scale", "newScale / curScale -- " + scale);
matrix.postScale(sureScale, sureScale, x, y);// matrix 矩阵变换 处理缩放
// 把变换完成后的 matrix 在注入回 ImageView中
this.setImageMatrix(getImageViewMatrix());
// TODO 处理图片 是的缩放后的图片能够正常显示在屏幕中央
}
public void setImageMatrix(Matrix m) {
super.setImageMatrix(m);
this.matrix.set(m);
Log.i("Matrix", "" + this.getImageMatrix());
}
/**
* 获取当前 的 一个 matrix值 为了保持matrix 一直可以自己变化, 所以不能认为的随意改变matrix值,所以引入了
* baseMatrix baseMatrix 作为处理 matrix 在整个的放大缩小过程中是一直在变动的
*
* @return
*/
protected Matrix getImageViewMatrix() {
displayMatrix.set(baseMatrix);
displayMatrix.postConcat(matrix);
return displayMatrix;
}
// 改ImageView 中的图片
private Bitmap bitmap;
/**
* 重写 setImageBitmap 方法
*/
@Override
public void setImageBitmap(Bitmap bm) {
super.setImageBitmap(bm);
bitmap = bm;
// 计算 图片载入是 的缩放比例
// TODO 如果图片之前经过BitmapFactor 缩放处理过此处可能需要注意下
float scale = calcueLoadScale();
// 处理缩放
zoomTure(scale, 0, 0);// 这个时候 图片应该在最顶端
// 把图片移动到屏幕中央
layoutToCenter();
}
/**
* 计算图片在载入时 的缩放比例
*
* @return 缩放比例
*/
private float calcueLoadScale() {
float scaleWidth = MyResource.screenWidth / (float) bitmap.getWidth();
float scaleHeight = MyResource.screenHeight
/ (float) bitmap.getHeight();
float scale = Math.min(scaleWidth, scaleHeight);
minScale = scale / 2;// 重新设置图片的缩放比例
return scale;
}
/**
* 将图片放置在屏幕中央. 使用该方法的前提是 当前图片的 左上角 的坐标为 0,0
*/
public void layoutToCenter() {
float width = (float) bitmap.getWidth() * getScale();
float height = (float) bitmap.getHeight() * getScale();
float fill_width = MyResource.screenWidth - width;
float fill_height = MyResource.screenHeight - height;
// 需要到移动的 x 和y 上的距离
float tran_width = 0f;
float tran_height = 0f;
if (fill_width > 0)
tran_width = fill_width / 2;
if (fill_height > 0)
tran_height = fill_height / 2;
matrix.postTranslate(tran_width, tran_height);// 设置移动图片 的 Matrix矩阵
setImageMatrix(getImageViewMatrix());// 将设置好的 matrix 注入Imageview 中
}
/**
* 移动 图片
*
* @param dx
* x轴的移动距离
* @param dy
* y轴的移动距离
*/
public void move(float dx, float dy) {
matrix.postTranslate(dx, dy);
setImageMatrix(getImageViewMatrix());// 将设置好的 matrix 注入Imageview 中
}
}
缩放移动的的时间监听
public class MyTouchListener implements OnTouchListener {
private MyImageView myImageView;
private float currentScale;
private Matrix currentMatrix = new Matrix();
private Matrix matrix = new Matrix();
// 第一个按下的点 滑动 的开始点
private PointF startPointF = new PointF();
// 两点触控式时 两个点之间的初始距离
private float startDistace;
// 两点触控时 的 两点之间中间点
private PointF midPointF = new PointF();
/** 记录是拖拉照片模式还是放大缩小照片模式 */
private int mode = 0;// 初始状态
/** 拖拉照片模式 */
private static final int MODE_DRAG = 1;
/** 放大缩小照片模式 */
private static final int MODE_ZOOM = 2;
@Override
public boolean onTouch(View v, MotionEvent event) {
if (v instanceof MyImageView) {
myImageView = (MyImageView) v;
/** 通过与运算保留最后八位 MotionEvent.ACTION_MASK = 255 */
switch (event.getAction() & MotionEvent.ACTION_MASK) {
// 手指压下屏幕
case MotionEvent.ACTION_DOWN:
mode = MODE_DRAG;
currentMatrix.set(myImageView.getImageMatrix());
// 记录ImageView当前的移动位置
startPointF.set(event.getX(), event.getY());
break;
// 手指在屏幕上移动，改事件会被不断触发
case MotionEvent.ACTION_MOVE:
// 拖拉图片
if (mode == MODE_DRAG) {
float dx = event.getX() - startPointF.x; // 得到x轴的移动距离
float dy = event.getY() - startPointF.y; // 得到y轴的移动距离
// 在没有移动之前的位置上进行移动
matrix.set(currentMatrix); // 在不使用拖动效果较好
// // currentMatrix的更新会有一个延时
// // 如果在image 中使用 想缩放那样的方法这回导致 拖动距离很大, 那是成比例的一直 拖动
matrix.postTranslate(dx, dy);
myImageView.setImageMatrix(matrix);
}
// 放大缩小图片
else if (mode == MODE_ZOOM) {
float endDis = distance(event);// 结束距离
if (endDis > 10f) { // 两个手指并拢在一起的时候像素大于10
float scale = endDis / startDistace;// 得到缩放倍数=
// myImageView 处理缩放事件scale * currentScale得到的是相对于图片本身的缩放倍数
myImageView.zoomSlowLy(scale * currentScale,
midPointF.x, midPointF.y);
}
}
break;
// 手指离开屏幕
case MotionEvent.ACTION_UP:
// 当触点离开屏幕，但是屏幕上还有触点(手指)
case MotionEvent.ACTION_POINTER_UP:
mode = 0;
break;
// 当屏幕上已经有触点(手指)，再有一个触点压下屏幕
case MotionEvent.ACTION_POINTER_DOWN:
mode = MODE_ZOOM;
/** 计算两个手指间的距离 */
startDistace = distance(event);
/** 计算两个手指间的中间点 */
if (startDistace > 10f) { // 两个手指并拢在一起的时候像素大于10
midPointF = mid(event);
// 记录当前ImageView的缩放倍数
currentScale = myImageView.getScale();
}
break;
}
}
return true;
}
/** 计算两个手指间的距离 */
private float distance(MotionEvent event) {
float dx = event.getX(1) - event.getX(0);
float dy = event.getY(1) - event.getY(0);
/** 使用勾股定理返回两点之间的距离 */
return FloatMath.sqrt(dx * dx + dy * dy);
}
/** 计算两个手指间的中间点 */
private PointF mid(MotionEvent event) {
float midX = (event.getX(1) + event.getX(0)) / 2;
float midY = (event.getY(1) + event.getY(0)) / 2;
return new PointF(midX, midY);
}
}
一些效果图片:
1.最开始 图片载入时
图片 缩小时
图片放大时
图片移动
