2013-04-04 4 views
5

Verwendung von OpenGL ES scheint es zwei mögliche Optionen für abgerundete Rechtecke zu sein:Best Practice für Abgerundete Rechtecke in OpenGL ES

  1. manuell die Form zeichnen trig verwenden. (Dies ist, was ich zur Zeit mache.)
  2. Verwendung aa Textur oder eine Gruppe von Texturen, die in geeigneter Weise zu skalieren, wie 9-Slice Scaling

Das Problem mit der ersten Option ist, dass Anti-Aliasing kostenlos nicht kommt, und Wenn Sie die Kompatibilität mit einer Vielzahl von Geräten anstreben, können Sie nicht mit OpenGL-Antialiasing-Tipps rechnen, um tatsächlich auf der Hardware zu arbeiten. Sie bleiben also mit abgehackten, abgerundeten Rechtecken, besonders für kleine, und dem Leistungsaufwand, einen weiteren Vertex-Array zu ziehen. Ich würde gerne von dieser

die zweite Option (9-Slice oder 9-Patch) scheint die Go-to-Methode für UI gerundet Rect-Elemente zu sein, aber es gibt überraschend wenig Informationen da draußen über die Umsetzung 9- patchen in OpenGL ES.

Was ich möchte ist: eine effiziente Strategie zum Rendern von Antialiased abgerundeten Rechtecken in OpenGL ES mit einstellbaren Randbreiten, Rahmenfarben und Füllfarben. Irgendwelche Vorschläge?

+3

Für die erste Option können Sie Antialiasing arbeiten, indem Sie einen dünnen Rahmen entlang des Netzes hinzufügen. Die Scheitelpunkte auf der Außenseite des Gitters haben ein Alpha von 0 und die Scheitelpunkte innerhalb eines Alphas von 1. Wenn Sie die Farbe Ihres gerundeten Rechtecks ​​durch die Alpha-Variation modulieren, erhalten Sie AA. –

+0

Beliebige Codebeispiele oder Ressourcen für die Verwendung dieser Methode für beliebige gekrümmte Linien? – khiner

+0

Überprüfen Sie die Antworten in der http://stackoverflow.com/questions/19560575/draw-a-rounded-rectangle-using-a-single-gldrawelement-triangle-strip-call-i/19782207#19782207 Ich hoffe, es wird nützlich sein. –

Antwort

2

Was Sie wollen, ist im Wesentlichen eine Technik namens Edge Anti-Aliasing.

Es ist sehr gut in dieser Antwort beschrieben: OpenGL ES iPhone - drawing anti aliased lines

einfach die transparenten Spitzen an äussersten Grenze des Rechtecks ​​an.