Zoom and pan an image

I am trying to apply zoom and pan functionality to an image. I used the script from here. But the zoom acts weird sometimes and the minZoom variable seems to have no effect since I can zoom out the image to infinity without limits. Also I cannot pan vertically, as the vertical bar doesn't allow me to go down (see picture below).



Is there a better solution than putting the image inside a Scroll View?

 

I tried to use a different approach and pan/zoom the camera instead of the image following this tutorial. But, as I have to use the Screen Space Camera mode for all of the UI so that the rest of the UI (like the back arrow button) to be culled so that it doesn't pan/zoom with the image, the image follows the camera in its changes in position and scale exactly because the Screen Space Camera mode is active.
Is there a way for the image to not follow the camera's movements even if it's inside a canvas that uses the Screen Space Camera mode?

 

OK, I solved it by modifying the script to move the image game object instead of the camera. Here's the modified script I attached to the image game object:

Code (CSharp):

1.  
2. using System.Collections;
3. using System.Collections.Generic;
4. using UnityEngine;
5.  
6. public class PanZoom : MonoBehaviour {
7.     Vector3 touchStart;
8.     public float zoomOutMin = 1;
9.     public float zoomOutMax = 8;
10.    
11.     // Update is called once per frame
12.     void Update () {
13.         if(Input.GetMouseButtonDown(0)){
14.             touchStart = Camera.main.ScreenToWorldPoint(Input.mousePosition);
15.         }
16.         if(Input.touchCount == 2){
17.             Touch touchZero = Input.GetTouch(0);
18.             Touch touchOne = Input.GetTouch(1);
19.  
20.             Vector2 touchZeroPrevPos = touchZero.position - touchZero.deltaPosition;
21.             Vector2 touchOnePrevPos = touchOne.position - touchOne.deltaPosition;
22.  
23.             float prevMagnitude = (touchZeroPrevPos - touchOnePrevPos).magnitude;
24.             float currentMagnitude = (touchZero.position - touchOne.position).magnitude;
25.  
26.             float difference = currentMagnitude - prevMagnitude;
27.  
28.             zoom(difference * 0.01f);
29.         }else if(Input.GetMouseButton(0)){
30.             Vector3 direction = touchStart - Camera.main.ScreenToWorldPoint(Input.mousePosition);
31.             gameObject.transform.position -= direction;
32.         }
33.         zoom(Input.GetAxis("Mouse ScrollWheel"));
34.     }
35.  
36.     void zoom(float increment){
37.         float factor = Mathf.Clamp(gameObject.transform.localScale.x + increment, zoomOutMin, zoomOutMax);
38.         gameObject.transform.localScale = new Vector3(factor, factor, 0);
39.     }
40. }

 

i want to add pan option .. and i want to make the image clickable so that it opens in a full screen mode in landscape..
currently i just added this script to the image and it can just zoom but not pan.
can you please suggest me how to do so

 

Thanks a lot for this, it worked instantly

 

You should probably make a maskable parent and simply move the image upwards/downwards, that would be the panning.