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