Wrpping my head around canvas,Wraping my head around Canvas placement


I’m having difficulties wrapping my head around this one:

I’m trying to get the following layout:


Where the red triangles are buttons and should always preserve aspect ratio, that is they should always be right-angled triangles.

In between the triangles, i want a list of buttons, so its not just a fancy border, it’s a UI element.

So basically the list of buttons on the sides should be exactly as wide, as the list of buttons are high on top and bottom.

However, using canvas allows only to have proportional heights and width, to screen height and with. So changing the aspect ratio would yield something like this:

See how the corners don’t match up anymore with the triangle tips?

What’s more, the triangles themselves should obviously scale up and down, depending on screen resolution.

So Question:

How can I achieve a layout, where the height of the rows, matches the width of the column, but keeping that number variable, according to screen size.

Any help appreciated.

Try changing the UI Scale Mode of your Canvas Scaler to “Scale With Screen Size” and see if that helps you achieve the desired effect, like so:

Ok, so i found no easy answer. what I ended up doing is the following:

The Panels containing the buttons on the side, as well as the triangles, get scaled naturally using RectTransform.

The Panels on top and bottom I have to scale myself, using the following code:

private void Rescale(){

		ratio = parentRect.rect.width / parentRect.rect.height;

		if (bottom) rect.anchorMax = new Vector2 (rect.anchorMax.x, ratio * offsetX);
		if (top) rect.anchorMin = new Vector2 (rect.anchorMin.x, 1-ratio * offsetX);

		rect.offsetMin = new Vector2(0f, 0f);
		rect.offsetMax = new Vector2(0f, 0f);

	void Update(){
		var newRatio = parentRect.rect.width / parentRect.rect.height;
		if (newRatio != ratio) {
			Rescale ();
			ratio = newRatio;

It’s not the best solution, as it has some problems.
First, It doesn’t seem to be fully accurate. Looking very closely, the lines are sometimes a little off.

Setting the canvas-scaler to use only width or height helps a little.

Second, the triangles stop resizing at some point. It’s right-angle triangles, so their ration is 2:1. If the Screen exceeds this ratio, the scaling of the triangle becomes somewhat unpredictable. I tried to limit my Rescale() function to max on a ration of 2:1 but it didn’t really help, because the scaling doesn’t just stop at that ratio. Maybe someone can still give me a hint, on how unity scales objects.
So far this solution works for me.