NGUI的双点触摸缩放UI(模拟Camera变焦)

  在很多的Unity游戏开发中，会使用NGUI来做界面的开发。现在很多游戏的界面上会有小地图，当小地图的内容比较多，就需要能缩放，放大能看具体信息，缩小能看大概内容。但由于这地图是用NGUI做的，不是场景的东西，无法使用Camera进行变焦来达到缩放的效果。
  要实现这个功能，我们要解决两个问题，一如何模拟Camera的变焦缩放，二是如何实现双指操作，在这里，我分两个部分来说明。

一、模拟Camera变焦

  可以看到上面的左右两图，这里使用的是正交投影，当设置Camera的size(orthographicSize)时，实际上是控制了显示区域的大小，当size变小时，能看到的东西是变少了，但由于屏幕的尺寸是不变的，所以我们看到图片的左下角预览，场景中的UISprite变大了。相反，当size变大时，能看到的东西变多了，而由于屏幕尺寸不变，预览中的UISprite变小。所以，我们要在UI上模拟这种效果，其实改变UI的localSize就可以了。
  但是，设置Camera的size时，显示区域的缩放，是改屏幕中心点来缩放的。可以看到上面两张图，Camera的size变小时，预览中的UISprite变大了，但是图片中的红点，还是对齐着屏幕中心点。要达到这种效果，其实不用去在意UI的锚点，简单的方法的改变UI的localSize后，再对UI做偏移操作，使图片红点再次对齐屏幕中心点。步骤如下：
  1.计算出当前UI的实际显示size1(即当前localSize乘以UI原size)
  2.计算出屏幕中心点相对于UI中心点的坐标pos1
  3.计算出pos1与显示size1的比例ratio
  4.缩放
  5.计算出缩放后新的UI显示size2，乘以ratio即为相对于UI中心点的pos2
  6.对UI做偏移（pos1-pos2）
  以下为实现的核心代码：

    void CaculateScale(float delta){Vector3 scale = mTrans.localScale;Vector3 position = mTrans.position;radio.x = -position.x / curSize.x;radio.y = -position.y / curSize.y;///scale.x += delta;scale.y += delta;if (scale.x > maxScale){scale.x = maxScale;scale.y = maxScale;}else if (scale.x < minScale){scale.x = minScale;scale.y = minScale;}//保持是屏幕中心点的缩放Vector2 size = new Vector2(widget.width * scale.x, widget.height * scale.y);position.x =  -size.x * radio.x;position.y =  -size.y * radio.y;curSize = size;mTrans.position = position;///mTrans.localScale = scale;CaculatePosition();}
二、实现双点触摸

NGUI在3.6版本后，陆续增加了多点触摸的实现，在UICamera的注释中，就有多触点的说明，如下：

/// * OnHover (isOver) is sent when the mouse hovers over a collider or moves away.
/// * OnPress (isDown) is sent when a mouse button gets pressed on the collider.
/// * OnSelect (selected) is sent when a mouse button is first pressed on an object. Repeated presses won't result in an OnSelect(true).
/// * OnClick () is sent when a mouse is pressed and released on the same object.
///   UICamera.currentTouchID tells you which button was clicked.
/// * OnDoubleClick () is sent when the click happens twice within a fourth of a second.
///   UICamera.currentTouchID tells you which button was clicked.

    从注释我们可以知道UICamera.currentTouchID，可以获取到当前屏幕操作事件函数是哪个TouchID触发的，这个TouchID，在手机上时，就是手指的触摸ID即FingerID，具体的描述可以参考这里。现在我们可以用UICamera.currentTouchID来区分是哪个手指来触发UICamera事件函数的。
    要实现双点的触摸操作，那就要用到UICamera的OnPress与OnDrag事件函数，OnPress用来计数多少手指按下，OnDrag来计算两点之间的滑动距离。在这里，要注意下两点间距离的计算，我们可以用UICamera.lastTouchPosition来获取当前手指触摸点的屏幕坐标，但这个坐标不能直接使用，要转换到UICamera的世界坐标，可以用ScreenToWorldPoint()来转换。这样，我们的思路就很清晰了，以下为实现的核心代码：
    void OnPress(bool isPressed){if (isPressed){int touchID = UICamera.currentTouchID;if (touchID < 0){touchID = 0;}if (touchID < 2){isPress[touchID] = true;posArray[touchID] = UICamera.mainCamera.ScreenToWorldPoint(UICamera.lastTouchPosition);preDis = Vector2.Distance(posArray[0], posArray[1]);}}else{if (UICamera.activeTouches.Count < 2){isPress[0] = false;isPress[1] = false;return;}}}void OnDrag(Vector2 delta){int touchID = UICamera.currentTouchID;if (touchID < 0){touchID = 0;}if (touchID >= posArray.Length){return;}posArray[touchID] = UICamera.mainCamera.ScreenToWorldPoint(UICamera.lastTouchPosition);if (isPress[0] && isPress[1]){// 两点之间的距离。float curDis = Vector2.Distance(posArray[0], posArray[1]);OnScale(curDis - preDis);preDis = curDis;}}
    至此，我们就可以实现UI的双点触摸缩放了，当然，我们还能添加更多点的触摸操作。