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 副本的偏移。