WaBis

walter.bislins.ch

JSG: Pfade zum Zeichnen von Flächen

Um eine Fläche mit Farbe füllen zu können, muss die Kontur der Fläche vorliegen. Diese könnte als Polygon definiert werden, was für gerundete geometrische Figuren wie das nebenstehende aber zu kompliziert wäre. Konturen können daher aus den bestehenden Grafik-Elementen zu einem Pfad zusammengesetzt werden, der dann gefüllt werden kann. Das generelle Vorgehen ist:

  1. Pfad öffnen mit OpenPath()
  2. Kontur aus Grafikelementen zusammensetzen
  3. Attribute setzen
  4. Pfad zeichnen/füllen mit Path()

Solange ein Pfad offen ist, wird die Geometrie von Zeichenfunktionen nicht gezeichnet, sondern im Pfad zu einer Kontur zusammengesetzt. Der Pfad ist ein interner Speicher für geometrische Daten. Ist die Kontur komplett, kann der Pfad mit der Funktion Path() gezeichnet/gefüllt werden.

 Pfad Funktionen

Beispiel oben rechts

var jsg = NewGraph2D( { Width: 300, Height: 200 } );
jsg.SetLineAttr( '#CCC', 1 );
jsg.Grid( 20, 20 );

jsg.OpenPath();
jsg.ArcPt( 40, 60, 80, 20, 40 );
jsg.LineTo( 260, 20 );
jsg.LineTo( 260, 40 );
jsg.ArcTo( 260, 160, -60 );
jsg.LineTo( 260, 180 );
jsg.LineTo( 80, 180 );
jsg.ArcTo( 40, 140, 40 );
jsg.SetAreaAttr( 'yellow', 'red', 2 );
jsg.Path( 7 );

In diesem Beispiel wird die Kontur über 3 verschiedene Zeichenfunktionen aufgebaut und im Pfad gespeichert. Mit dem Aufruf in der letzten Zeile wird dieser Pfad geschlossen (Mode = 4), gefüllt (Mode = 2) und die Kontur gezeichnet (Mode = 1). Das Argument Mode = 7 kommt zustande, indem die 3 Werte addiert werden (7 = 1 + 2 + 4), siehe Funktion Path().

Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Dienstag, 2. Februar 2016
von wabis