Skip to content

Instantly share code, notes, and snippets.

@unity3dcollege
Created September 15, 2017 21:37
Show Gist options
  • Save unity3dcollege/f971cee86b6eb09ad4dafc49050f693c to your computer and use it in GitHub Desktop.
Save unity3dcollege/f971cee86b6eb09ad4dafc49050f693c to your computer and use it in GitHub Desktop.
using UnityEngine;
using UnityEngine.EventSystems;
public class UIZoomImage : MonoBehaviour, IScrollHandler
{
private Vector3 initialScale;
[SerializeField]
private float zoomSpeed = 0.1f;
[SerializeField]
private float maxZoom = 10f;
private void Awake()
{
initialScale = transform.localScale;
}
public void OnScroll(PointerEventData eventData)
{
var delta = Vector3.one * (eventData.scrollDelta.y * zoomSpeed);
var desiredScale = transform.localScale + delta;
desiredScale = ClampDesiredScale(desiredScale);
transform.localScale = desiredScale;
}
private Vector3 ClampDesiredScale(Vector3 desiredScale)
{
desiredScale = Vector3.Max(initialScale, desiredScale);
desiredScale = Vector3.Min(initialScale * maxZoom, desiredScale);
return desiredScale;
}
}
@psociety
Copy link

psociety commented Sep 18, 2024

If you want to take current mouse position into account, you have to modify OnScroll method like:

using UnityEngine;
using UnityEngine.EventSystems;

namespace Peque.UI {
    public class UIZoomImage : MonoBehaviour, IScrollHandler {
        private Vector3 initialScale;
        private Vector3 initialPosition;

        [SerializeField]
        private float zoomSpeed = 0.1f;
        [SerializeField]
        private float maxZoom = 10f;

        private RectTransform rectTransform;

        private void Awake() {
            initialScale = transform.localScale;
            initialPosition = transform.position;
            rectTransform = GetComponent<RectTransform>();
        }

        public void OnScroll(PointerEventData eventData) {
            Vector2 mousePosition = eventData.position;
            
            // Convert the mouse position to local coordinates relative to the image
            Vector2 localPoint;
            RectTransformUtility.ScreenPointToLocalPointInRectangle(rectTransform, mousePosition, eventData.pressEventCamera, out localPoint);

            var delta = Vector3.one * (eventData.scrollDelta.y * zoomSpeed);
            var desiredScale = transform.localScale + delta;
            
            desiredScale = ClampDesiredScale(desiredScale);
            Vector3 scaleChange = desiredScale - transform.localScale;

            // Adjust the position to zoom towards the mouse position
            Vector3 positionAdjustment = new Vector3(localPoint.x * scaleChange.x, localPoint.y * scaleChange.y, 0f);
            rectTransform.localPosition -= positionAdjustment;

            transform.localScale = desiredScale;
        }

        private Vector3 ClampDesiredScale(Vector3 desiredScale) {
            desiredScale = Vector3.Max(initialScale, desiredScale);
            desiredScale = Vector3.Min(initialScale * maxZoom, desiredScale);
            return desiredScale;
        }
    }
}

That way it will zoom where the mouse is rather than just at the center of the container.
Also make sure that Scroll Rect component doesn't have Movement Type to Elastic, otherwise the component will fuck around the offset adjustment. It should be Unrestricted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment