Jump to content
Unity Insider Forum

Canvas images positionieren und skalen


Recommended Posts

Hey Leute,

 

der Zeit schreibe ich eine kleine Android App, die eine Gallerie enthalten soll.

Es werden Images der Reihenach instanziert und mit einem Bild versehen.

Doch leider habe ich Probleme mit der Positionierung und der Skalierung der Bilder innerhalb des Canvas.

Hier erstmal mein Code:

 

//Resize der Bilder bei Screen Rotate
private void ResizePictures()
{
	int picPerRow;
	float picWidth, picHeight;
	float borderValue = 0.98f;

	picPerRow = 5;
	picWidth = Screen.width / 5;
	picHeight = Screen.width / 5;

	int rowCounter = 0, picCounter = 0;
	//Start Position des ersten Bild ermitteln
	Vector2 curPos = new Vector2(picWidth / 2, Screen.height - (picHeight / 2));
	for (int i = 0; i < planes.Count; i++)
	{
		planes[i].GetComponent<RectTransform>().position = curPos;
		planes[i].GetComponent<RectTransform>().sizeDelta = new Vector2(picWidth * borderValue, picHeight * borderValue);
		picCounter += 1;
		if (picCounter >= picPerRow)
		{
			rowCounter += 1;
			picCounter = 0;
			curPos.x = picWidth / 2;
			curPos.y -= picHeight;
		}
		else
		{
			curPos.x += picWidth;
		}
	}
}

//Spawn Methode der Bilder
private void SetPictures()
{
	int picPerRow;
	float picWidth, picHeight;
	float borderValue = 0.98f;
	picPerRow = 5;
	picWidth = Screen.width / 5;
	picHeight = Screen.width / 5;

	int rowCounter = 0, picCounter = 0;
	//Start Position des ersten Bild ermitteln
	Vector2 curPos = new Vector2(picWidth / 2, Screen.height - (picHeight / 2));
	for (int i = 0; i < pictureCount; i++)
	{
		planeGO = GameObject.Instantiate(planePrefab, curPos, Quaternion.identity) as GameObject;
		planeGO.GetComponent<RectTransform>().sizeDelta = new Vector2(picWidth * borderValue, picHeight * borderValue);
		picCounter += 1;
		if (picCounter >= picPerRow)
		{
			rowCounter += 1;
			picCounter = 0;
			curPos.x = picWidth / 2;
			curPos.y -= picHeight;
		}
		else
		{
			curPos.x += picWidth;
		}

		Texture2D texture = LoadPNG(@"/some/path/pic" + i + ".jpg");
		Sprite s = Sprite.Create(texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0, 0));
		planeGO.transform.parent = GameObject.Find("Pictures").transform;
		planeGO.transform.SetAsFirstSibling();
		planeGO.name = "pic" + i;
		planeGO.GetComponent<Image>().sprite = s;		  
	}  
}

 

Es sollen immer 5 Bilder nebeneinander angezeigt werden, prinzipell klappt das auch.

Doch wo es happert ist die start "curPos" und die picSize.

Diese sind nie richtig und so fängt die Bildergallerie immer an falschen Positionen an und die Bilder habe die falsche Grö0e.

Anstatt Screen.Width habe ich auch schon die Canvas RectTransform deltaSize probiert aber auch ohne erfolg.

Meine Canvas ist wie folgt eingestellt:

gkwtaqr3.png

 

 

Jetzt schon mal Vielen Dank für eure Hilfe! :)

 

Darkkingdom

Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 2 weeks later...

Hey Sascha danke für deine Antwort!

 

Entschuldige die späte Antwort ich hatte die letzte Zeit leider mit einem anderen Projekt zu tun.

Preserve Aspect habe ich leider schon probiert und bringt mir leider nicht das gewünschte Ergebnis :(

Vielleicht zur Visualisierung erstmal eine Grafik wie das Endergebnis denn aussehen soll:

 

76u4bf3h.png

Link zu diesem Kommentar
Auf anderen Seiten teilen

Inwiefern bringt es denn nicht das gewünschte Ergebnis? Du erstellst einfach Image-GameObjects in genau der gezeigten Größe und Anordnung. Durch Preserve Aspect werden die Bilder so groß wie möglich in den dadurch gegebenen Rahmen gerendert, ohne, dass sie verzerrt werden.

 

Ja da hast du recht, allerdings ist das Problem bei zb. Hochkantbildern werden diese dann natürlich nur auf der Y Achse an die Größe angepasst. Die X Achse des Bildes ist dann allerdings im Verhältnis kleiner (So wars bei mir zumindest).

Was leider nicht der Quadratischen Ansicht entspricht die ich mir wünsche.

Aber trotzdem guter Tipp merk ich mir :)

 

Wie wäre es denn mit einem GridLayoutGroup auf einem Parent Object der Images und einem ContentSizeFitter auf den Image Objekten?

 

Das wars super :)

Am besten ist es doch Unity sein Canvas gescale selbst zu überlassen^^

 

 

Danke nochmal an euch beide!

 

Darkkingdom

Link zu diesem Kommentar
Auf anderen Seiten teilen

Hmm... bei mir funkt's nicht so ganz. Magst du einmal Screenshots posten? Einen mit Preserve Aspect, in dem man den RectTransform und das darin liegende Bild sieht, und ein weiteres mit Content Size Fitter?

 

Klar :)

Allerdings habe ich den ContentSize Fitter nicht genutzt.

Durch die Grid Layout Group und deren CellSize + Spacing konnte ich alles einstellen was ich wollte.

Also einmal ohne Preserve Aspect:

 

elads4wc.png

 

Und einmal mit:

 

j3r9cpxq.png

Link zu diesem Kommentar
Auf anderen Seiten teilen

  • 1 year later...

Archiviert

Dieses Thema ist jetzt archiviert und für weitere Antworten gesperrt.

×
×
  • Neu erstellen...