基于UGUI ScrollView的可缩放拖拽功能,可以用于地图,预览图片等方面
最近的项目里有个功能要求预览图片可以放大缩小加拖拽,第一反应就是用UGUI的scrollview,但是它只有拖拽没有缩放,所以继承该脚本重写我们的功能。
原理很简单,在Update中通过两根手指的移动距离算出应该缩放的scale赋值给scrollview的content对象,实际上就是缩放content,然后拖拽就可以完全使用scrollview自带的功能,下面是完整代码:
using UnityEngine;
using System.Collections;
using UnityEngine.UI;
using UnityEngine.EventSystems;
public class DragMoveScrollView : ScrollRect
{
public float m_maxScale = 5;
public float minScale = 1f;
private Touch oldTouch1;
private Touch oldTouch2;
public bool isScenePrefabControl = true;
private int touchNum = 0;
public override void OnBeginDrag(PointerEventData eventData)
{
if (Input.touchCount > 1)
{
return;
}
base.OnBeginDrag(eventData);
}
public override void OnDrag(PointerEventData eventData)
{
if (Input.touchCount > 1)
{
touchNum = Input.touchCount;
return;
}
else if (Input.touchCount == 1 && touchNum > 1)
{
touchNum = Input.touchCount;
base.OnBeginDrag(eventData);
return;
}
base.OnDrag(eventData);
}
void Update()
{
if (base.content == null) return;
if (isScenePrefabControl)
{
//没有触摸,就是触摸点为0
if (Input.touchCount <= 0)
{
return;
}
//多点触摸, 放大缩小
Touch newTouch1 = Input.GetTouch(0);
Touch newTouch2 = Input.GetTouch(1);
//第2点刚开始接触屏幕, 只记录,不做处理
if (newTouch2.phase == TouchPhase.Began)
{
oldTouch2 = newTouch2;
oldTouch1 = newTouch1;
return;
}
//计算老的两点距离和新的两点间距离,变大要放大模型,变小要缩放模型
float oldDistance = Vector2.Distance(oldTouch1.position, oldTouch2.position);
float newDistance = Vector2.Distance(newTouch1.position, newTouch2.position);
//两个距离之差,为正表示放大手势, 为负表示缩小手势
float offset = newDistance - oldDistance;
//放大因子, 一个像素按 0.01倍来算(100可调整)
float scaleFactor = offset / 100f;
Vector3 localScale = base.content.transform.localScale;
Vector3 scale = new Vector3(localScale.x + scaleFactor,
localScale.y + scaleFactor,
localScale.z + scaleFactor);
//在什么情况下进行缩放
if ((scale.x >= minScale && scale.y >= minScale && scale.z >= minScale) && (scale.x <= m_maxScale && scale.y <= m_maxScale && scale.z <= m_maxScale))
{
base.content.transform.localScale = scale;
}
//记住最新的触摸点,下次使用
oldTouch1 = newTouch1;
oldTouch2 = newTouch2;
}
}
}