Functional scenario:
Some AVG projects may require the player to zoom in on a certain point of the image to carefully confirm the image, such as the function of zooming in to see the wife in Azur Lane, or if you use the scroll wheel to zoom in and out directly in Unity's Scene editing scene, you can see In Unity, you focus on the position of your mouse and zoom. Here is an idea to achieve this effect
Implementation principle:
Note: The following involves some basic principles of UGUI. You need to be familiar with the properties of UGUI to understand it easily.
There is a pivot attribute in UGUI. This attribute determines the proportion at which the lower left corner (offsetMin) and the upper right corner (offsetMax) of the image change when the width and height of the image change. For example, pivot = (0.2, 0.8), then if Both the width and height change by 100, then offsetMin should move 100 * 0.2 = 20 to the left and 100 * 0.8 = 80 down, which is to subtract Vector2(20, 80). In the same way, the upper right corner should be moved to the right by 100 * (1 - 0.2) = 80, and moved upward by 100 * (1 - 0.8) = 20, which is to add Vector2(80, 20).
If you directly change the pivot value in UGUI, you can definitely achieve this effect, but if it is dynamically modified, then UGUI will automatically reposition the image according to your current anchorPos, and the effect will be that the image will also be displaced, so we will You can only simulate the pivot calculation method of UGUI to calculate the changes in offsetMax and offsetMin yourself to achieve the same effect.
Implementation:
In order to achieve our target effect, we need to know two parameters. One is the pivot coordinate converted from the position of the mouse on the entire picture, and the other is the width and height transformation amount delta of the picture. The final calculation formula should be:
var deltaMinX = pivotX * deltaSize.x;
var deltaMaxX = (1 - pivotX) * deltaSize.x;
var deltaMinY = pivotY * deltaSize.y;
var deltaMaxY = (1 - pivotY) * deltaSize.y;
rectTransform.offsetMin -= new Vector2(deltaMinX, deltaMinY);
rectTransform.offsetMax += new Vector2(deltaMaxX, deltaMaxY);
rectTransform is the RectTransform property of the scaling target.
The remaining question is how to calculate pivot. First of all, make it clear that this pivot and the pivot of UGUI are not the same thing. This is just to facilitate our calculation. The calculation method of this pivot is actually to calculate the position of the mouse in screen space, screenPoint, and the normalized value of the coordinates in the picture coordinate space, that is, pivotX / sizeDelta.x, pivotY / sizeDelta.y.
For the convenience of explanation, the anchorPosition positions in the pictures below are as shown in the figure. In fact, you need to define them by yourself.
When the UI is completely within screen space
var pivotX = (screenPoint.x - anchoredPosition.x) / sizeDelta.x;
var pivotY = (screenPoint.y - anchoredPosition.y) / sizeDelta.y;
When the picture exceeds the screen area
var pivotX = (screenPoint.x - anchoredPosition.x) / sizeDelta.x; // anchorX < 0
var pivotY = (screenPoint.y - anchoredPosition.y) / sizeDelta.y; // anchorY < 0