Visual Element Scaling Pivot Position

Hi,

I'm animating a Visual Element hierarchy on screen by adjusting its transform.scale property via the Scheduler API. This causes the visual element to scale around its origin position in the top left corner. How can I adjust the pivot position around which the visual element will scale? This is in order to, for example, scale the element around its rect's center. In Unity UI this can be achieved by adjusting the RectTransform's pivot position.

Thanks,
-andy.

 

Ahh, ok great. Thanks a lot for the solution @mcoted3d.

 

Any updates on this? The empty parent solution only works when you work with pixel values.

 

For example if you want an element to be 50% the width and 50% of the height of its container, but the container is an empty that you use as pivot, then 50% of 0 is going to be 0. Being able to adjust the origin would make us not need the empty, and the problem would be fixed. This also allows for buttons to change size on hover without complications because it’s position is it’s center. In general it just makes it easier to handle positioning rotation and scaling of VisualElements without having to do all sorts of trickery.

 

Great to hear! Also, is there a productboard similar to the one for the scriptable render pipelines where we can see what is being worked on, what has been implemented and what is under consideration?

 

Any chance this will make the next package release ?

This would be soooo convenient for animating Visual Elements...

 

Bump (my last one I promise, I understand that you already have enough pressure from every side )

Currently investigating a basic custom animation tool, and it's unfortunate that we cannot (yet ) modify the pivot.

 

Should be 2021.2

https://forum.unity.com/threads/css-transform.1050740/

 

Crossing fingers to have something at least in C# side before 2021.2 in the package

The parent hack workaround won't be appreciated by my colleagues (increasing again risk of us dropping UITK)

 

Thanks for the visibility

 

@Midiphony-panda - I make a new class anytime I want to make some extension methods, so I've got the following class:

Code (CSharp):

1. using UnityEngine;
2. using UnityEngine.UIElements;
3. public static class VisualElementExtensionMethods
4. {
5.     public static void Rotate(this VisualElement item, float angleDegrees)
6.     {
7.         // Get the x/y location of the center note - these are constant unless the parent rescales; i.e., they don't change with rotation.
8.         float x0 = item.contentRect.center.x;
9.         float y0 = item.contentRect.center.y;
10.  
11.         // Convert Cartesian to Polar
12.         float r = Mathf.Sqrt(x0 * x0 + y0 * y0);
13.         float theta0 = Mathf.Atan2(y0, x0);
14.  
15.         // Calculate the location of the center of the VisualElement after rotating
16.         // Note: The rotation you want is *in addition* to the "default" polar angle from origin to the center
17.         float x = r * Mathf.Cos(theta0 + (Mathf.Deg2Rad * angleDegrees));
18.         float y = r * Mathf.Sin(theta0 + (Mathf.Deg2Rad * angleDegrees));
19.  
20.         // Actually do the requested rotation
21.         item.transform.rotation = Quaternion.Euler(0f, 0f, angleDegrees);
22.  
23.         // Finally, rotation happens about the upper-left corner of the VisualElement, so you need to shift the position
24.         // to get the rotated center to be coincident with the un-rotated center.
25.         float xDelta = x0 - x;
26.         float yDelta = y0 - y;
27.         item.transform.position = new Vector3(xDelta, yDelta, 0f);
28.     }
29. }

Now I can do stuff like myVisualElement.Rotate(90) and it'll rotate about its center. Hope this helps! Had the same problem so I figured I'd post my answer here for everyone to use. You were asking about it specifically so I figured I'd tag you in the response.

 

Thank you for the snippet and the idea

 

Is this pivot feature available in 2021.2.1f1? We have a complex hierarchy of various elements and scaling is centered to an unknown position. Sometimes, elements goes out of the screen while scaling, we need to control the position of the root. We apply the scale this way:

Code (CSharp):

1. UIDocument.rootVisualElement.transform.scale

 

It works, thanks!