OpenGL-ES 1.0 2d abgerundetes Rechteck

7

Wie macht man ein abgerundetes Rechteck in OpenGL oder ein Polygon mit abgerundeten Ecken?

    
michael 20.03.2011, 15:45
quelle

6 Antworten

16

Verwenden von Polygonen

Wenn die Verwendung von Polygonen absolut erforderlich ist, zum Beispiel wenn Objekte mit Rundungen stark skaliert oder gezoomt werden müssen oder wenn der Umfang der Rundung gesteuert werden muss, ist es möglich, das Rechteck in mehrere Unterobjekte zu zerlegen.

Es gibt mindestens drei rechteckige Teile und vier Ecken. Die Berechnung von Eckkoordinaten ist einfach. Finde einfach einen Punkt aus dem Kreis und baue Dreiecke wie im Bild oben.

%Vor%

Es wird immer noch scharfe Kanten haben, aber mehr Punkte machen die Ecken runder. Kleine Objekte benötigen weniger Punkte als große Objekte.

Einfache Route ist GL_TRIANGLE_FAN für Ecken. Bei OpenGL ES ist es jedoch ratsam, die Anzahl der OpenGL-Aufrufe zu minimieren und einfach mehr Stützpunkte zu verwenden, da das gesamte Objekt als GL_TRIANGLE_STRIP erstellt werden kann.

Diese Annäherung kann mit jeder Form verwendet werden. Bei einem Rechteck ist der Winkel der Ecke immer 90 Grad, aber bei anderen Formen muss der Winkel von den Kanten aus berechnet werden.

Verwenden von Texturen

Ein anderer Ansatz heißt 9-Slice-Skalierung . Rechteck und Textur sind in 9 Scheiben aufgeteilt. Die tatsächliche Rundung erfolgt in der Ecke einer Textur. Die Idee ist, dass Ecken nicht skaliert werden, sondern ihre ursprüngliche Größe beibehalten. Dieser Ansatz ist ein weit verbreitetes Muster im UI-Design, das variable UI-Elemente wie Schaltflächen erlaubt. Sein Vorteil ist, dass ein Rechteck nur diese 9 Quads zum Rendern benötigt. Aber es wird schlecht aussehen, wenn auch Ecken skaliert werden müssen und vor allem, wenn die Textur eine niedrige Auflösung hat.

    
Virne 22.03.2011, 16:29
quelle
5

Etwas von einer Beule, aber ich war auf das gleiche Problem heute fest, das ist, was ich ausgegeben habe, ist es mit Desktop GL erstellt, sollte aber sehr einfach zu GLES konvertieren, alles ist ein Streifen. Es ist wahrscheinlich nicht so optimiert, wie es sein sollte, aber wenn jemand es ersticken möchte, bitte sei mein Gast;)

%Vor%

Um das abgerundete Rechteck zu zeichnen, rufen Sie einfach etwas in einer orthogonalen Ansicht auf:

%Vor%     
McBob 17.01.2012 10:00
quelle
2

Ich musste ein ähnliches Rechteck zeichnen, aber transparent - und Code oben zeichnet einige der Dreiecke überlappen. Das behoben, malloc entfernt, nur um die Lösung zu vereinfachen. Hier ist meine Version:

%Vor%     
TarmoPikaro 26.02.2014 12:34
quelle
1
%Vor%     
Timur 07.08.2014 12:51
quelle
1

Ich stieß auf einen Absturz in einigen Open-Source-Software - die Nicht-GL-Version funktionierte gut, aber im Grunde war die Absicht, ein abgerundetes Rechteck zu implementieren, aber der Entwickler war zu faul und entschied stattdessen einen Crash zu erzwingen: - (

Obwohl ich denke, @ vimes Antwort ist knapp und vollständig, habe ich viele ähnliche Beispiele gesehen, von denen mir keines Vertrauen gab und die ich für nicht naheliegend hielt, also hier ist meine für die Aufzeichnung ... die aufrufende Funktion implementiert die 4 Ecken (Code-Snippet) ...

%Vor%

... und die Funktion des Bogenabschnitts, DrawGLRoundedCorner (). Beachten Sie, dass dies voraussetzt, dass glBegin () bereits aufgerufen wurde und sowohl den Anfang als auch das Ende des Bogens darstellt. Daher müssen Sie die Scheitelpunkte nicht explizit am Ende der Seiten hinzufügen.

%Vor%

Wenn Sie ein anderes glBegin verwenden, wie zum Beispiel GL_LINE_LOOP, dann würden Sie wahrscheinlich ein nicht gefülltes abgerundetes Rechteck erhalten. Bei größeren Eckenradien kann es notwendig sein, verschiedene Anti-Aliasing-Hinweise oder ähnliches zu verwenden, um es hübscher aussehen zu lassen, aber es gibt andere Beiträge, die das betreffen.

Ich hoffe, dass es jemandem hilft.

    
T-and-M Mike 25.11.2015 12:17
quelle
1

Der folgende Code wird von meinem eigenen Projekt übernommen. Ich habe einige Kommentare hinzugefügt, die im Code erläutert werden. Wenn zeichnen ein abgerundetes Rechteck ohne Rahmen.

%Vor%

Wenn Sie den Rahmen zeichnen möchten, hier ist der Code.

%Vor%     
user6458202 09.02.2017 13:42
quelle

Tags und Links