专栏首页恩蓝脚本Android控件实现图片缩放功能

Android控件实现图片缩放功能

1 简介

先来一张效果图

TIM图片.gif

上图中灰色的一块是ImageView控件,ImageView中的图片进行左右上下移动,以及双指缩放。

对于android控件的缩放移动,点这里—-android控件的缩放,移动

2 使用步骤

布局layout

<?xml version="1.0" encoding="utf-8"? 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:id="@+id/root"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/mywhite"
 android:gravity="center_horizontal"
 android:fitsSystemWindows="true" 
 <ImageView
 android:background="@color/light_gery"
 android:scaleType="matrix"
 android:src="@drawable/ic_sure"
 android:id="@+id/hair_iv"
 android:layout_marginTop="50dp"
 android:layout_width="300dp"
 android:layout_height="300dp"/ 
</LinearLayout 

先看关于手势触摸的判断,需要判断用户是单指触摸还是双指,分别在OnTounch的监听事件中判断。

注:先重写onLongClick()方法,不然会影响OnTouch里面的触摸监听。

 private static final int NONE = 0;
 private static final int DRAG = 1;
 private static final int ZOOM = 2;
 private int mode = NONE;
hairIv.setOnLongClickListener(new View.OnLongClickListener() {
 @Override
 public boolean onLongClick(View v) {
 return true;
 }
 });
 hairIv.setOnTouchListener(new View.OnTouchListener() {
 @Override
 public boolean onTouch(View v, MotionEvent event) {
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动
 if (mode == DRAG) {
 // 是一个手指拖动
 Log.d(TAG, "mode = DRAG" );
 } else if (mode == ZOOM) {
 // 两个手指滑动
 Log.d(TAG, "mode = ZOOM" );
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 return true;
 }
 });

这些写上之后就可以先看一下单指,双指的触摸事件有没有被正确处理

通过Android提供的Matrix类对图像进行处理,关于Matrix的原理可以看一下Android官方文档Matrix部分,也可以找一些其他的博客,这里只看使用。

定义要用到的变量

 private Matrix matrix = new Matrix();
 private Matrix savedMatrix = new Matrix();
 // 第一个按下的手指的点
 private PointF startPoint = new PointF();
 // 两个按下的手指的触摸点的中点
 private PointF midPoint = new PointF();
 // 初始的两个手指按下的触摸点的距离
 private float oriDis = 1f;

在onTouch中完善

@Override
 public boolean onTouch(View v, MotionEvent event) {
 ImageView view = (ImageView) v;
 final int x = (int) event.getRawX();
 final int y = (int) event.getRawY();
 Log.d(TAG, "onTouch: x= " + x + "y=" + y);
 switch (event.getAction() & MotionEvent.ACTION_MASK) {
 case MotionEvent.ACTION_DOWN:
 //单点触控
 matrix.set(view.getImageMatrix());
 savedMatrix.set(matrix);
 startPoint.set(event.getX(), event.getY());
 mode = DRAG;
 break;
 case MotionEvent.ACTION_POINTER_DOWN:
 //多点触控
 oriDis = distance(event);
 if (oriDis   10f) {
 savedMatrix.set(matrix);
 midPoint = midPoint(event);
 mode = ZOOM;
 }
 break;
 case MotionEvent.ACTION_MOVE:
 // 手指滑动事件
 if (mode == DRAG) {
 // 是一个手指拖动
 matrix.set(savedMatrix);
 matrix.postTranslate(event.getX() - startPoint.x, event.getY()
  - startPoint.y);
 } else if (mode == ZOOM) {
 // 两个手指滑动
 float newDist = distance(event);
 if (newDist   10f) {
 matrix.set(savedMatrix);
 float scale = newDist / oriDis;
 matrix.postScale(scale, scale, midPoint.x, midPoint.y);
 }
 }
 break;
 case MotionEvent.ACTION_UP:
 case MotionEvent.ACTION_POINTER_UP:
 // 手指放开事件
 mode = NONE;
 break;
 }
 view.setImageMatrix(matrix);
 return true;
 }

其中用到的计算位置和距离的方法

 /**
 * 计算两个手指头之间的中心点的位置
 * x = (x1+x2)/2;
 * y = (y1+y2)/2;
 *
 * @param event 触摸事件
 * @return 返回中心点的坐标
 */
 private PointF midPoint(MotionEvent event) {
 float x = (event.getX(0) + event.getX(1)) / 2;
 float y = (event.getY(0) + event.getY(1)) / 2;
 return new PointF(x, y);
 }
 /**
 * 计算两个手指间的距离
 *
 * @param event 触摸事件
 * @return 放回两个手指之间的距离
 */
 private float distance(MotionEvent event) {
 float x = event.getX(0) - event.getX(1);
 float y = event.getY(0) - event.getY(1);
 return (float) Math.sqrt(x * x + y * y);//两点间距离公式
 }

3 源码

public class ImageActivity extends AppCompatActivity{
@BindView(R.id.hair_iv)
ImageView hairIv;
private static final int NONE = 0;
private static final int DRAG = 1;
private static final int ZOOM = 2;
private int mode = NONE;
private Matrix matrix = new Matrix();
private Matrix savedMatrix = new Matrix();
// 第一个按下的手指的点
private PointF startPoint = new PointF();
// 两个按下的手指的触摸点的中点
private PointF midPoint = new PointF();
// 初始的两个手指按下的触摸点的距离
private float oriDis = 1f;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_image);
ButterKnife.bind(this);
hairIv.setOnLongClickListener(new View.OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
return true;
}
});
hairIv.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
ImageView view = (ImageView) v;
final int x = (int) event.getRawX();
final int y = (int) event.getRawY();
Log.d(TAG, "onTouch: x= " + x + "y=" + y);
switch (event.getAction() & MotionEvent.ACTION_MASK) {
case MotionEvent.ACTION_DOWN:
//单点触控
matrix.set(view.getImageMatrix());
savedMatrix.set(matrix);
startPoint.set(event.getX(), event.getY());
mode = DRAG;
break;
case MotionEvent.ACTION_POINTER_DOWN:
//多点触控
oriDis = distance(event);
if (oriDis   10f) {
savedMatrix.set(matrix);
midPoint = midPoint(event);
mode = ZOOM;
}
break;
case MotionEvent.ACTION_MOVE:
// 手指滑动事件
if (mode == DRAG) {
// 是一个手指拖动
matrix.set(savedMatrix);
matrix.postTranslate(event.getX() - startPoint.x, event.getY()
- startPoint.y);
} else if (mode == ZOOM) {
// 两个手指滑动
float newDist = distance(event);
if (newDist   10f) {
matrix.set(savedMatrix);
float scale = newDist / oriDis;
matrix.postScale(scale, scale, midPoint.x, midPoint.y);
}
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_POINTER_UP:
// 手指放开事件
mode = NONE;
break;
}
view.setImageMatrix(matrix);
return true;
}
});
}
/**
* 计算两个手指头之间的中心点的位置
* x = (x1+x2)/2;
* y = (y1+y2)/2;
*
* @param event 触摸事件
* @return 返回中心点的坐标
*/
private PointF midPoint(MotionEvent event) {
float x = (event.getX(0) + event.getX(1)) / 2;
float y = (event.getY(0) + event.getY(1)) / 2;
return new PointF(x, y);
}
/**
* 计算两个手指间的距离
*
* @param event 触摸事件
* @return 放回两个手指之间的距离
*/
private float distance(MotionEvent event) {
float x = event.getX(0) - event.getX(1);
float y = event.getY(0) - event.getY(1);
return (float) Math.sqrt(x * x + y * y);//两点间距离公式
}
}

总结

以上所述是小编给大家介绍的Android控件实现图片缩放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对ZaLou.Cn网站的支持!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Android自定义视图实现手指移动轨迹

    贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节...

    砸漏
  • Android自定义view圆并随手指移动

    本文实例为大家分享了Android自定义view圆并随手指移动的具体代码,供大家参考,具体内容如下

    砸漏
  • Android实现手指触控图片缩放功能

    两手拉开图片变大,两手合拢图片缩小,根据两手的移动距离来判断图片放大和缩小的倍数,两手的移动距离计算方法如下:

    砸漏
  • 事件对象的使用、属性和方法

    IT故事会
  • mysql中event的用法详解

    一、基本概念 mysql5.1版本开始引进event概念。event既“时间触发器”,与triggers的事件触发不同,event类似与linux cronta...

    wangxl
  • JS获取事件对象,获取事件的源对象(Firefox,IE)

    用户1258909
  • Event(事件)的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或c...

    sam dragon
  • 事件中心 - 解耦核心业务与辅助功能

    十毛
  • Cypress web自动化16-参数化,数据驱动测试案例

    自动化测试里面参数化思想是非常重要的,同一类型的测试,只需维护不同的数据就可以了。 对每组测试数据自动生成对应的测试用例,并且每个测试用例的结果互不影响,不能因...

    上海-悠悠
  • 如何阻止冒泡&&浏览器默认行为

    很多同学对阻止事件冒泡和阻止事件默认行为容易混淆,项目中因为一些原因也需要阻止浏览器的一些默认行为,这里就简单总结一下。

    Jerremy

扫码关注云+社区

领取腾讯云代金券