Unity 模拟放大镜局部放大UI 效果实现

UI 放大实现

RectTransformUtility.ScreenPointToLocalPointInRectangle(rectScale, eventData.position, eventData.pressEventCamera, out localPos);

使用IPointerDownHandler 获取鼠标点击时的有效负载，并将鼠标坐标转成对应的UI 坐标，rectScale 为需要放大的UI，使用eventData.pressEventCamera 确保相机为点击事件对应的相机。

originalPosX = localPos.x / originalScale;
originalPosY = localPos.y / originalScale;
zoomPosX = originalPosX * zoomScale;
zoomposY = originalPosY * zoomScale;

根据UI 原始的Scale 和放大的Scale 计算UI 放大后鼠标点击对应的位置。

offsetX = localPos.x - zoomPosX;
offsetY = localPos.y - zoomPosY;
scaleRect.localScale = new Vector3(zoomScale, zoomScale, zoomScale);
scaleRect.localPosition += new Vector3(offsetX, offsetY, 0);

计算放大后UI 位置偏移量，根据偏移量放大UI 并移动UI，最终实现UI 根据鼠标点击位置放大的效果。

至此，代码实现的是UI 整体放大，想要模拟放大镜效果可以使用圆形遮罩局部显示UI。

放大镜效果实现

复制一份UI 副本，并给该UI 副本加上圆形遮罩模拟放大镜效果。因使用了IPointerDownHandler 和IPointerUpHandler，可将遮罩和图片副本的Raycast Target 勾选取消以降低出错概率。

rectMask.position = Input.mousePosition;

根据鼠标位置更新遮罩层位置。

rectScale.localPosition = new Vector2((-rectMask.localPosition.x + rect.localPosition.x) * scaleCurrent + rectMask.rect.width * (0.5f - rectMask.pivot.x), (-rectMask.localPosition.y + rect.localPosition.y) * scaleCurrent + rectMask.rect.height * (0.5f - rectMask.pivot.y));

根据遮罩层锚点计算UI 副本的偏移。

效果