Unity 图片定点缩放功能

功能情景：

有的 AVG 项目可能需要玩家缩放图片的某一个点来仔细确认图片，比如碧蓝航线里面的放大看老婆的功能，又或者说如果直接在 Unity 的 Scene 编辑场景里面使用滚轮拉进拉远，可以看到 Unity 就是聚焦在你鼠标的位置在缩放。这里提供一个实现这种效果的思路

实现原理：

注：以下涉及 UGUI 的一些基本原理，需要对 UGUI 的属性比较熟悉才方便理解

UGUI 里面有一个 pivot 属性，这个属性决定了在图片宽高变化的时候，图片左下角（offsetMin）和右上角（offsetMax）是以怎样的比例在变化，比如 pivot = （0.2, 0.8），那么如果宽度和高度均变化 100，那么 offsetMin 应该向左移动 100 * 0.2 = 20，向下移动 100 * 0.8 = 80，也就是减去 Vector2(20, 80)。同理，右上角就该向右移动 100 * （1 - 0.2）= 80，向上移动 100 * （1 - 0.8）= 20，也就是加上 Vector2(80, 20)。

如果直接改变 UGUI 里面的 pivot 值肯定是能实现这种效果，但是如果是动态修改，那么 UGUI 还会自动根据你当前的 anchordPos 重新定位图片，表现出来的效果就是图片也跟着位移了，所以我们就只能模拟 UGUI 的这种 pivot 的计算方式，来自己计算 offsetMax 与 offsetMin 的变化，来实现同样的效果。

具体实现：

为了实现我们的目标效果，我们需要知道两个参数，一个是鼠标在整张图片上的位置转换而来的 pivot 坐标，另一个就是图片的宽高变换量 delta，最后的计算公式就该是：

var deltaMinX = pivotX * deltaSize.x;
var deltaMaxX = (1 - pivotX) * deltaSize.x;
var deltaMinY = pivotY * deltaSize.y;
var deltaMaxY = (1 - pivotY) * deltaSize.y;

rectTransform.offsetMin -= new Vector2(deltaMinX, deltaMinY);
rectTransform.offsetMax += new Vector2(deltaMaxX, deltaMaxY);

rectTransform 就是缩放目标的 RectTransform 属性。

剩下的问题就是如何计算 pivot。首先明确一点，这个 pivot 和 UGUI 的 pivot 不是同一个东西，这个只是方便我们计算的。 这个 pivot 的计算方法实际就是计算鼠标在屏幕空间上的位置 screenPoint，在图片坐标空间上的坐标的归一化值，也就是 pivotX / sizeDelta.x，pivotY / sizeDelta.y。

为了方便解释，下面图片的 anchorPosition 位置均如图所示，实际需要各位自行定义

在这里插入图片描述

当 UI 完全在屏幕空间内

var pivotX = (screenPoint.x - anchoredPosition.x) / sizeDelta.x;
var pivotY = (screenPoint.y - anchoredPosition.y) / sizeDelta.y;

在这里插入图片描述
当图片超过屏幕区域

var pivotX = (screenPoint.x - anchoredPosition.x) / sizeDelta.x; // anchorX < 0
var pivotY = (screenPoint.y - anchoredPosition.y) / sizeDelta.y; // anchorY < 0