Explicitly setting Global Position of Scroll View Corners

Hey all,

I’m pretty new to scroll view’s in general and thought I’d present my use case here. Essentially what I want (screenshots below) is a scroll view that occupies a space based off 4 anchors. Is there a way to explicitly define the global position of the corners of a scroll view and just keep setting that every time the aspect ratio changes? The anchors I am talking about are parented to different elements. Here are some screenshots of what I want to happen (the red dots are the anchors I have in scene):


Thanks in advance!

I assume that the parent of the scroll view element is the the light grey area ie the top half of the screen. If you set the anchor of the scroll view element to something like 0.2, 0.2, 0.8, 0.8, or other values that you calculate when the canvas is resized, then it would be similar to your diagrams. Alternatively, you might also try and set the width and height based on the parent’s width and height.

The issue with that is twofold.

For one, it doesnt appear to me (by fiddling with it for a couple hours) that the scroll view content viewport scales in the same way as other elements. I could be very wrong on this though so please let me know. I’ve just had some troubles with it.

The second issue with doing .2 and .8 though is that the bottom element with the on off switch and the top element with the numbers do not always inhabit exactly 20 percent of their side of the frame so what I actually need are entities that are parented to the tops and bottoms of those respectively.

Is there a method to directly set the screen coordinates of the 4 corners of an element? With that I could just set the viewport content to fill whatever the scroll view has been stretched to.

I’m not sure about your other questions but for this one I’d say that if you know the positions of the 4 corners and you know the width and height of the parent, then you should be able to calculate the normalised anchor values of the scroll view.

I don’t know what the exact answer here and it depends on how it’s been setup and configured.

If the scroll view is split anchored, I believe the way to adjust the size is to change the margins:
https://developer.playcanvas.com/en/api/pc.ElementComponent.html#margin

If it’s not split anchored, you could try setting the corners:
https://developer.playcanvas.com/en/api/pc.ElementComponent.html#canvasCorners

@yaustar Are those canvas corners normalized from -1 to 1 in screen space? For example, could I get the global screen space position (anchorEntity.getPosition()) of my anchors and then split the scroll view by setting its corners to the anchors? If so, that’s exactly what I’m looking for.

I’m not sure offhand, should be easy to check with console log though. I think it might be absolute pixel positions of the screen

1 Like

I’ll get on it to check when I get a chance to sit down and work on this again. If it is absolute pixel positions of the screen, can you convert from global position to pixel position in order to set it?

You have screenCorners as well which I believe to be the position on the PlayCanvas Screen component https://developer.playcanvas.com/en/api/pc.ElementComponent.html#screenCorners

1 Like

I fiddled with this for awhile and wasn’t able to convert any of the corners to something I thought was a very robust solution (though it is possible) so I fell back onto the original method that @Kulodo133 mentioned of making the scrollview be anchored between 0.2 and 0.8. This took a redesign of the other elements to clamp them into 5ths of the parent entity but it should have been like that from the start.

Thanks to you both for the help!

1 Like