WaBis

walter.bislins.ch

JSG: Linien Funktionen

Mit den Linien Funktionen können gerade Linien oder beliebige Polygone gezeichnet werden. Zum Zeichnen von Flächen können die Linien und Polygone mit Hilfe des Pfades (siehe Pfad Funktionen) zu Konturen zusammengesetzt werden, welche danach mit der Funktion Path() gefüllt werden können.

Mit welcher Farbe und Strichdicke eine Linie oder Fläche gezeichnet werden soll, muss vorher über Attribut Funktionen eingestellt werden.

PenUp() Hebt den virtuellen Zeichenstift an
MoveTo() Bewegt den Zeichenstift ohne zu zeichnen
LineTo() Zeichnet eine Gerade von der letzten Position
Line() Zeichnet eine Linie
NewPoly() Initialisiert Poly neu
CopyPoly() Erzeugt eine Kopie von Poly
AddPointToPoly() Erweitert Poly um einen Punkt
AddVectToPoly() Erweitert Poly um einen JsgVect2 Vektor
DrawPoly() Zeichnet Poly mit der Funktion Polygon()
DrawPolyArrow() Zeichnet Poly mit der Funktion PolygonArrow()
DrawPolyMarker() Zeichnet Poly mit der Funktion Marker()
Polygon() Zeichnet oder füllt ein Polygon
PolygonList() Zeichnet oder füllt alle Polygone einer Polygon-Liste
BezierCurve() Zeichnet eine Bezier-Kurve zwischen zwei Punkten
BezierCurveTo() Zeichnet eine Bezier-Kurve vom letzten Punkt aus
SplineCurve() Zeichnet eine Spline-Kurve durch einen Anzahl von Punkten
MakeBezierPolygon() Erzeugt ein Bezier-Polygon aus Stützpunkten
MakeSplineCurve() Erzeugt ein Spline-Polygon aus Stützpunkten
Arrow() Zeichnet eine Linie mit Pfeilen oder anderen Symbolen
PolygonArrow() Zeichnet ein Polygon mit Pfeilen oder anderen Symbolen an den Endpunkten
ClipPolygon() Clippt ein Polygon an einem Rechteckbereich
ClipPolygonArea() Clippt eine Polygon-Fläche an einem Rechteckbereich

JsGraph.PenUp()

JsGraph.PenUp( )

Diese Funktion macht nur in Kombination mit der Funktion LineTo() Sinn. PenUp vereinfacht Programmschleifen, in denen mittels wiederholtem Aufruf der Funktion LineTo() eine komplizierte Kurve zusammengesetzt wird. Wenn vor der Schleife PenUp aufgerufen wird, so hat der erste Aufruf von LineTo() in der Schleife dieselbe Wirkung wie MoveTo().

Der aktuelle Zustand des Pen kann über das Property PenDown ausgelesen werden.

 Grundlagen: Der Zeichenstift (Pen)

JsGraph.MoveTo()

JsGraph.MoveTo( x, y )
JsGraph.MoveTo( p )

x, y: Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
p: JsgVect2
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
Return this: JsGraph

Positioniert den Zeichenstift (Pen) bei den Koordinaten (x, y) und setzt den Zeichenstift ab (PenDown = true). Die letzte Position des Pens kann über die Properties LastX, LastY ausgelesen werden.

Wenn der Pfad offen ist (siehe OpenPath()) wird mit MoveTo ein neuer Startpunkt für den nächsten Pfad-Abschnitt festgelegt. Beim Schliessen eines Pfades mit ClosePath() wird eine Linie vom letzten Punkt im Pfad zum letzten mit MoveTo erzeugten Punkt im Pfad eingefügt.

Hinweis: Verwende womöglich die Funktionen NewPoly(), AddPointToPoly(), AddVectToPoly() und DrawPoly() anstelle von MoveTo(), LineTo(). DrawPoly() ist wesentlich effizienter!

JsGraph.LineTo()

JsGraph.LineTo( x, y )
JsGraph.LineTo( p )

x, y: Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
p: JsgVect2
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
Return this: JsGraph

Zeichnet eine gerade Linie von der letzten Pen-Position zu den Koordinaten (x, y) und setzt den Pen an dieser Position ab.

Wenn vor dem Aufruf von LineTo die Funktion PenUp() gerufen wurde, wird keine Linie gezeichnet, sondern nur der Pen an die Position (x, y) bewegt und abgesetzt (entspricht MoveTo()).

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Linie wird im Pfad gespeichert.

Hinweis: Verwende womöglich die Funktionen NewPoly(), AddPointToPoly(), AddVectToPoly() und DrawPoly() anstelle von MoveTo(), LineTo(). DrawPoly() ist wesentlich effizienter!

JsGraph.Line()

JsGraph.Line( x1, y1, x2, y2, append )
JsGraph.Line( p1, p2, append )

x1, y1, x2, y2: Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
p1, p2: JsgVect2
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
append: Boolean; Optional; Default = false
true → verbindet den ersten Punkt der Linie mit dem letzten Punkt im Pfad
Return this: JsGraph

Zeichnet eine gerade Linie vom Punkt (x1, y1) zum Punkt (x2, y2) und setzt den Pen bei (x2, y2) ab.

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Linie wird im Pfad gespeichert. Wenn dabei append = true ist, wird vom letzten Punkt im Pfad eine Linie zum ersten Punkt von Line eingefügt.

JsGraph.NewPoly()

JsGraph.NewPoly( )

Return this: jsGraph

Initialisiert Poly neu, um ein neues Polygon aufzubauen. Poly ist ein internes JsgPolygon, welches mit AddPointToPoly() und AddVectToPoly() mit Punkten gefüllt werden kann. Das Polygon kann danach mit DrawPoly(), DrawPolyArrow() oder/oder DrawPolyMarker() mit den aktuellen Attributen gezeichnet werden.

Das Verwenden von Poly ist effizienter als eine Kombination von MoveTo(), LineTo().

g.NewPoly();
for (var x = 0; x < x_max; x += x_inc) {
  g.AddPointToPoly( x, f(x) );
}
g.DrawPoly( mode );
g.DrawPolyMarker( mode );

Auf Poly kann zugegriffen werden, um es z.B. mit den Funktionen JsgPolygon.Roll() und JsgPolygon.Invert() zu manipulieren.

JsGraph.CopyPoly()

JsGraph.CopyPoly( to, reuseArrays )

to: JsgPolygon or undefined; Optional; Default = undefined
Objekt, in welches Poly kopiert werden soll
reuseArrays: Boolean; Optional; Default = true
Wenn true werden die Arrays von to nicht neu erstellt, sondern weiterverwendet
return: JsgPolygon
Kopie von Poly oder to

Kopiert Poly in das Objekt to. Wird to nicht angegeben, wir ein neues JsgPolygon Objekt erzeugt und darin eine Kopie von Poly zurückgegeben.

Wenn to angegeben wird, kann mit reuseArrays festgelegt werden, ob deren Arrays wiederverwendet (true) oder neu erstellt werden sollen (false). Werden sie wiederverwendet und sind kleiner als die zu kopierenden Arrays, werden sie entsprechend vergrössert. In diesem Fall haben sie am Ende die Grösse to.X.length = to.Size. Werden sie wiederverwendet, sind aber grösser als die zu kopierenden Arrays, so bleibt diese Grösse erhalten. Es muss mit to.Size ermittelt werden, wieviele Elemente effektiv kopiert worden und gültig sind!

Note: der Member JsgPolygon.Size enthält die Anzahl gültiger Punkte der Arrays JsgPolygon.X und JsgPolygon.Y. Die Arrays können grösser als JsgPolygon.Size sein!

JsgPolygon = {
  X: Array of number;
  Y: Array of number;
  Size: integer;
}

JsGraph.AddPointToPoly()

JsGraph.AddPointToPoly( x, y )

x, y: Number
Koordinaten des Punktes im Koordinatensystem, welches bei DrawPoly() zur Anwendung kommt.
Return this: JsGraph

Fügt einen Punkt am Ende von Poly an. Das Poly ist ein internes JsgPolygon, welches mit NewPoly() initialisiert und mit DrawPoly() gezeichnet werden kann.

Anwendung siehe NewPoly().

JsGraph.AddVectToPoly()

JsGraph.AddVectToPoly( p )

p: JsgVect2
Koordinaten des Punktes im Koordinatensystem, welches bei DrawPoly() zur Anwendung kommt.
Return this: JsGraph

Fügt einen Vektor am Ende von Poly an. Das Poly ist ein internes JsgPolygon, welches mit NewPoly() initialisiert und mit DrawPoly() gezeichnet werden kann.

Anwendung siehe NewPoly().

JsGraph.DrawPoly()

JsGraph.DrawPoly( mode )

mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert, siehe Funktion Polygon()

Zeichnet das Poly mit der Funktion Polygon(). Poly ist ein internes JsgPolygon, welches mit NewPoly() initialisiert und mit AddPointToPoly() und AddVectToPoly() mit Punkten gefüllt werden kann.

Der Parameter mode wird unverändert an die Funktion Polygon() weiter gereicht.

Anwendung siehe NewPoly().

JsGraph.DrawPolyArrow()

JsGraph.DrawPolyArrow( variant, lineMode, arrowMode )

variant: Integer(1..15); Optional; Default = 1
Bitmaske die angibt, an welchem Ende der Linie ein Pfeil gezeichnet werden soll. 1 zeichnet den Pfeil am Ende der Linie, 2 am Anfang und 3 an beiden Enden. Wenn Bit 4 gesetzt ist, wird das Polygon selbst nicht gezeichnet. Bit 8 verkürzt die Linie an den Enden mit Pfeilen um 1/2 Pixel.
lineMode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Linien-Modi steuert
arrowMode: Integer(1..3); Optional; Default = 3
Bitmaske, die verschiedene Pfeil-Modi steuert

Zeichnet Poly mit der Funktion PolygonArrow(). Das Poly ist ein internes JsgPolygon, welches mit NewPoly() initialisiert und mit AddPointToPoly() und AddVectToPoly() mit Punkten gefüllt werden kann.

Die Parameter variant, lineMode und arrowMode werden unverändert an die Funktion PolygonArrow() weiter gereicht.

JsGraph.DrawPolyMarker()

JsGraph.DrawPolyMarker( mode, mat )

mode: Integer(1..3); Optional; Default = 3
Bitmaske, die verschiedene Modi steuert
mat: JsgMat2; Optional; Default = undefined
Matrix, mit welcher der Marker vor dem Zeichnen transformiert wird. Dies ist in der Regel eine Rotations-Matrix. Sie wird intern zum Zeichnen von Pfeilen mittels Marker verwendet.

Zeichnet Poly mit der Funktion Marker(). Poly ist ein internes JsgPolygon, welches mit NewPoly() initialisiert und mit AddPointToPoly() und AddVectToPoly() mit Punkten gefüllt werden kann.

Die Parameter mode und mat werden unverändert an die Funktion Marker() weiter gereicht.

Wenn mat undefiniert ist, wird der Marker vor dem Zeichnen nicht zusätzlich transformiert.

JsGraph.Polygon()

JsGraph.Polygon( xArray, yArray, mode, size )
JsGraph.Polygon( poly, mode )

xArray, yArray: Array[ ] of Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
poly: JsgPolygon
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert
size: Integer(>0); Optional; Default = xArray.length
Optional Anzahl zu Zeichnende Punkte
Return this: JsGraph
mode Beschreibung
1 Polygonzug zeichnen
2 Polygon füllen
4 Polygon schliessen, indem eine Linie vom Endpunkt zum Anfangspunkt angehängt wird
8 Polygon an bisherigen Pfad anhängen

Zeichnet und/oder füllt ein Polygon. Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von mode zusammengesetzt werden. Wenn also zum Beispiel das Polygon geschlossen und gefüllt werden soll und gleichzeitig auch die Kontur der Fläche gezeichnet werden soll, so muss mode = 1 + 2 + 4 gesetzt werden.

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern das Polygon wird im Pfad gespeichert. Durch setzen des Bit 8 in mode kann erreicht werden, dass eine Linie vom Ende des bisher gespeicherten Pfades zum Anfang des Polygons im Pfad eingefügt wird, also das Polygon an den bisherigen Pfad angefügt wird, ohne eine neue Kontur zu beginnen.

Wenn nicht alle Punkte von (xArray, yArray) gezeichnet werden sollen, kann mit size angegeben werden, wieviele Punkte gezeichnet werden sollen. Dies ist nützlich, wenn Arrays wiederverwendet werden, jedoch deren Grösse nicht identisch mit dem Füllstand ist. In diesem Fall kann mit size der Füllstand angegeben werden.

JsGraph.PolygonList()

JsGraph.PolygonList( polyList, mode )
JsGraph.PolygonList( poly, mode )

polyList: JsgPolygonList
eine Liste von Polygonen
poly: JsgPolygon
ein einzelnes Polygon
mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert
Return this: JsGraph

Zeichnet und/oder füllt eine Liste von Polygonen. Die Polygone werden an die Funktion Polygon() weitergereicht. Siehe Beschreibung dort.

Die Funktion ClipPolygon() liegert als Resultat eine JsgPolygonList, welche mit dieser Funktion gezeichnet werden kann.

JsGraph.BezierCurve()

JsGraph.BezierCurve( sx, sy, cx1, cy1, cx2, cy2, ex, ey, mode, nSegments )
JsGraph.BezierCurve( sp, cp1, cp2, ep, mode, nSegments )
JsGraph.BezierCurve( poly, mode, startIx, nSegmenrs )

sx, sy: Number
Koordinaten des Startpunktes im mit SelectTrans() gewählten Koordinatensystem
sp: JsgVect2
Koordinaten des Startpunktes im mit SelectTrans() gewählten Koordinatensystem
cx1, cy1: Number
Kontrollpunkt für (sx,sy)
cp1: JsgVect2
Kontrollpunkt für sp
cx2, cy2: Number
Kontrollpunkt für (ex,ey)
cp2: JsgVect2
Kontrollpunkt für ep
ex, ey: Number
Endpunkt
ep: JsgVect2
Endpunkt
poly: JsgPolygon
Polygon, welches die vier Punkte der Kurve enthält
startIx: Integer(>=0); Optional; Default = 0
Offset der angibt, ab welchem Punkt in poly 4 Koordinaten für die Bezier-Kurve verwendet werden sollen
mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert
nSegments: Integer(>=2); Optional
Wenn definiert bestimmt die Anzahl Segmente für die Bezier-Kurve
Return this: JsGraph
mode Beschreibung
1 Bezier-Kurve (Umriss) zeichnen
2 Bezier-Kurve füllen
4 Bezier-Kurve schliessen, indem eine Linie vom Endpunkt zum Anfangspunkt angehängt wird
8 Bezier-Kurve an bisherigen Pfad anhängen

Zeichnet und/oder füllt eine Bezier-Kurve. Eine Bezier-Kurve ist eine geschwungene Kurve zwischen den beiden Punkten (sx,sy) und (ex,ey) bzw. sp und ep. Mit den beiden Kontrollpunkten kann der Verlauf der Kurve zwischen Start- und Endpunkt bestimmt werden.

Bei der Variante mit poly werden 4 aufeinanderfolgende Punkte von poly als Start-, Kontroll- und Endpunkte verwendet. startIx gibt an, an welcher Stelle in poly der Startpunkt ist. Die Funktion SplineCurve() verwendet diese Aufrufvariante, da ein Spline eine Sequenz von Bezier-Kurven ist und alle Punkte der Sequenz in einem Polygon zwischengespeichert werden.

Wenn nSegments abgegeben wird, wird die Bezier-Kurve durch ein Polygon entsprechender Grösse angenähert. Es wird nicht die native Canvas-Funktion bezierCurveTo() verwendet. Siehe auch DisableNativeBezier und NumBezierSegments.

Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von mode zusammengesetzt werden. Wenn also zum Beispiel die Bezier-Kurve geschlossen und gefüllt werden soll und gleichzeitig auch die Kontur der Fläche gezeichnet werden soll, so muss mode = 1 + 2 + 4 gesetzt werden.

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Bezier-Kurve wird im Pfad gespeichert. Durch setzen des Bit 8 in mode kann erreicht werden, dass eine Linie vom Ende des bisher gespeicherten Pfades zum Anfang der Bezier-Kurve im Pfad eingefügt wird, also die Bezier-Kurve an den bisherigen Pfad angefügt wird, ohne eine neue Kontur zu beginnen.

Eine längere Bezier-Kurve kann durch anhängen weiterer Bezier-Kurve-Segemente mit BezierCurveTo() gezeichnet werden.

Clipping: Wenn Polygone viel grösser als der sichtbare Bereich sind, kann das Rendern sehr langsam werden. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

Rendering: Wenn möglich werden Bezier-Kurven mit den nativen Canvas-Funktionen gezeichnet. Dies kann mit DisableNativeBezier deaktiviert werden. In diesem Fall oder beim Clippen von Bezier-Elementen werden diese als Polygon gerendert, wobei die Anzahl Segmente mit NumBezierSegments eingestellt werden kann. Das Rendern als Polygon kann auch durch Angabe von nSements erzwungen werden.

JsGraph.BezierCurveTo()

JsGraph.BezierCurveTo( cx1, cy1, cx2, cy2, ex, ey, mode )
JsGraph.BezierCurveTo( cp1, cp2, ep, mode )
JsGraph.BezierCurveTo( poly, mode )

cx1, cy1: Number
Kontrollpunkt für (LastX,LastY)
cp1: JsgVect2
Kontrollpunkt für (LastX,LastY)
cx2, cy2: Number
Kontrollpunkt für (ex,ey)
cp2: JsgVect2
Kontrollpunkt für ep
ex, ey: Number
Endpunkt
ep: JsgVect2
Endpunkt
poly: JsgPolygon
Polygon, welches die drei Punkte der Kurve enthält
mode: Integer(1..7); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert
Return this: JsGraph
mode Beschreibung
1 Bezier-Kurve (Umriss) zeichnen
2 Bezier-Kurve füllen
4 Bezier-Kurve schliessen, indem eine Linie vom Endpunkt zum Anfangspunkt angehängt wird

Zeichnet und/oder füllt eine Bezier-Kurve vom letzten Punkt (LastX,LastY) aus. Eine Bezier-Kurve ist eine geschwungene Kurve zwischen den beiden Punkten (LastX,LastY) und (ex,ey) bzw. ep. Mit den beiden Kontrollpunkten kann der Verlauf der Kurve zwischen Start- und Endpunkt bestimmt werden. Siehe auch BezierCurve().

Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von mode zusammengesetzt werden. Wenn also zum Beispiel die Bezier-Kurve geschlossen und gefüllt werden soll und gleichzeitig auch die Kontur der Fläche gezeichnet werden soll, so muss mode = 1 + 2 + 4 gesetzt werden.

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Bezier-Kurve wird im Pfad gespeichert.

Rendering: Wenn möglich werden Bezier-Kurven mit den nativen Canvas-Funktionen gezeichnet. Dies kann mit DisableNativeBezier deaktiviert werden. In diesem Fall oder beim Clippen von Bezier-Elementen werden diese als Polygon gerendert, wobei die Anzahl Segmente mit NumBezierSegments eingestellt werden kann.

JsGraph.SplineCurve()

JsGraph.SplineCurve( xArray, yArray, tension, mode, size )
JsGraph.SplineCurve( poly, tension, mode )

xArray, yArray: Array[ ] of Number
Koordinaten der Stützpunkte im mit SelectTrans() gewählten Koordinatensystem
poly: JsgPolygon
Koordinaten der Stützpunkte im mit SelectTrans() gewählten Koordinatensystem
tension: Number; Optional; Default = 0.5
Beeinflusst den Verlauf des Splines durch die Stützpunkte
mode: Integer(1..63); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert
size: Integer(>0); Optional; Default = xArray.length
Optional Anzahl zu Zeichnende Punkte
Return WorkPoly: JsgPolygon
mode Beschreibung
1 Spline-Kontur zeichnen
2 Spline-Kontur füllen
4 geschlossenen Spline durch die Stützpunkte zeichnen
8 Spline an bisherigen Pfad anhängen
16 Erstes Segment nicht zeichnen wenn Spline nicht geschlossen ist
32 Letztes Segment nicht zeichnen, wenn Spline nicht geschlossen ist
64 gesetzt → Endpunkte sind Spline-Kontrolpunkte; nicht gesetzt → Endpunkte sind Bezier-Kontrolpunkte

Zeichnet und/oder füllt eine Spline-Kurve. Eine Spline-Kurve ist eine geschwungene Kurve, die durch alle Punkte in (xArray, yArray) bzw. poly geht. Zwischen je zwei Punkten wird eine kubische Bezier-Kurve berechnet und gezeichnet. Die Stützpunkte der Bezier-Kurven und somit der Spline-Verlauf kann mit dem Parameter tension beeinflusst werden. Der beste Wert für eine straffe Kurve mit möglichst wenig Kanten ist tension = 0.5. Auf der Test-Seite Jsg Test: SplineCurve kannst du den Einfluss von tension ausprobieren.

Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von mode zusammengesetzt werden. Wenn also zum Beispiel die Spline-Kurve geschlossen und gefüllt werden soll und gleichzeitig auch die Kontur der Fläche gezeichnet werden soll, so muss mode = 1 + 2 + 4 gesetzt werden. Wenn die Bits 1 und 2 nicht gesetzt werden, wird die Kurve nicht gezeichnet, jedoch die berechneten Bezier-Segmente werden im Rückgabewert WorkPoly zurückgegeben. Das WorkPoly kann dann mit BezierCurve() segmentweise gezeichnet, wobei z.B. jedem Segment eine andere Farbe zugeordnet werden könnte.

Bei offenen Splines wird der Kontrollpunkt des ersten und letzten Stützpunktes gleich dem entsprechenden Punkt gesetzt. Das bedeutet, dass die Richtung der Kurve an diesen Punkten nicht separat beeinflusst werden kann, sondern von den benachbarten Punkten abhängig ist. Wenn man die Richtung an diesen Stützpunkten festlegen will, kann man am Anfang und/oder am Ende des Splines einen zusätzlichen Stützpunkt einfügen. Mit den Flags 16 und 32 kann man das so zusätzlich berechnete erste und letzte Segment des Splines beim Zeichnen auslassen. So kann man einen Spline erstellen, bei dem die Richtung des ersten und letzten gezeichneten Stützpunktes durch die beiden zusätzlichen nicht gezeichneten Segmente beeinflussen kann. Man kann auch nur am Anfang oder nur am Ende einen zusätzlichen Stützpunkt festlegen. Der Start-/End-Kontrolpunkt kann entweder ein Bezier-Kontrolpunkt sein (Flag 64 ist nicht gesetzt) oder ein Spline-Kontrolpunkt (Flag 64 ist gesetzt). Der letzte Fall entspricht einem normalen Spline, bei dem das erste und letzte Segment nicht gezeichnet werden, falls das entsprechende Flag 16 bzw. 32 gesetzt ist. Im WorkPoly sind diese Segmente jedoch enthalten.

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Spline-Kurve wird im Pfad gespeichert. Durch setzen des Bit 8 in mode kann erreicht werden, dass eine Linie vom Ende des bisher gespeicherten Pfades zum Anfang der Bezier-Kurve im Pfad eingefügt wird, also die Spline-Kurve an den bisherigen Pfad angefügt wird, ohne eine neue Kontur zu beginnen.

Rendering: Wenn möglich werden Bezier-Kurven mit den nativen Canvas-Funktionen gezeichnet. Dies kann mit DisableNativeBezier deaktiviert werden. In diesem Fall oder beim Clippen von Bezier-Elementen werden diese als Polygon gerendert, wobei die Anzahl Segmente mit NumBezierSegments eingestellt werden kann.

JsGraph.MakeBezierPolygon()

JsGraph.MakeBezierPolygon( sx, sy, cx1, cy1, cx2, cy2, ex, ey, nSegments, add, polyRet )
JsGraph.MakeBezierPolygon( poly, startIx, nSegments, add, polyRet )
JsGraph.MakeBezierPolygon( s, c1, c2, e, nSegments, add, polyRet )

sx..ey: Number
Start-/Kontroll-/Endpunkt im mit SelectTrans() gewählten Koordinatensystem
poly: JsgPolygon
Polygon, welches in den ersten vier Punkten Start-, Kontroll- und Endpunk enthält
s, c1, c2, e: JsgVect2
Start-, Kontroll- und Endpunkt
startIx: Integer(>=0); Optional; Default = 0
Welcher Punkt von poly als Startpunkt des Bezier Polygons verwendet werden soll
nSegments: Integer(>0); Optional; Default = NumBezierSegments
Anzahl Segmente für die Bezier-Kurve
add: Boolean; Optional; Default = false
Falls true werden die Bezier Punkte an polyRet bzw. WorkPoly2 angehängt.
polyRet: JsgPolygon; Optional
externes Polygon in welchen die Bezier Punkte gespeichert werden sollen
Return polyRet or WorkPoly2: JsgPolygon
Berechnetes Polygon

Berechnet ein Polygon, welches die gewünschte Bezier-Kurve darstellt. Die Werte werden im mit SelectTrans() gewählten Koordinatensystem zurückgegeben. Die Anzahl Polygon-Punkte kann mit nSegments eingestellt werden: Anzahl Punkte = nSegments + 1. Wird nSegments nicht angegeben, wird der Wert von NumBezierSegments verwendet.

Das berechnete Polygon wird in polyRet oder im internen Poly-Objekt WorkPoly2 gespeichert.

var controlPoints = GetBezierPoints(...);
var bezierPoly = jsg.MakeBezierPolygon( controlPoints );
jsg.Polygon( bezierPoly );

JsGraph.MakeSplineCurve()

JsGraph.MakeSplineCurve( xArray, yArray, tension, mode, size, nSegements, polyRet )
JsGraph.MakeSplineCurve( poly, tension, mode, nSegments, polyRet )

xArray, yArray: Array[ ] of Number
Koordinaten der Stützpunkte im mit SelectTrans() gewählten Koordinatensystem
poly: JsgPolygon
Koordinaten der Stützpunkte im mit SelectTrans() gewählten Koordinatensystem
tension: Number; Optional; Default = 0.5
Beeinflusst den Verlauf des Splines durch die Stützpunkte
mode: Integer(1..63); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert
size: Integer(>0); Optional; Default = xArray.length
Optional Anzahl zu Zeichnende Punkte
nSegments: Integer(>0); Optional; Default = NumBezierSegments
Anzahl Segmente für die Bezier-Kurve
polyRet: JsgPolygon; Optional
externes Polygon in welchen die Bezier Punkte gespeichert werden sollen
Return polyRet or WorkPoly: JsgPolygon
mode Beschreibung
4 geschlossenen Spline durch die Stützpunkte zeichnen
16 Erstes Segment nicht zeichnen wenn Spline nicht geschlossen ist
32 Letztes Segment nicht zeichnen, wenn Spline nicht geschlossen ist
64 gesetzt → Endpunkte sind Spline-Kontrolpunkte; nicht gesetzt → Endpunkte sind Bezier-Kontrolpunkte

Berechnet ein Polygon, welches die gewünschte Spline-Kurve darstellt. Die Werte werden im mit SelectTrans() gewählten Koordinatensystem zurückgegeben. Die Anzahl Polygon-Punkte kann mit nSegments eingestellt werden: Anzahl Punkte = nSegments + 1. Wird nSegments nicht angegeben, wird der Wert von NumBezierSegments verwendet.

Das berechnete Polygon wird in polyRet oder im internen Poly-Objekt WorkPoly2 gespeichert.

Für mehr Informationen siehe SplineCurve().

JsGraph.Arrow()

JsGraph.Arrow( x1, y1, x2, y2, variant, mode, sym1, sym2 )
JsGraph.Arrow( p1, p2, variant, mode, sym1, sym2 )

x1, y1, x2, y2: Number
Koordinaten des Pfeils (erster Punkt ist Startpunkt des Pfeils) im mit SelectTrans() gewählten Koordinatensystem
p1, p2: JsgVect2
Koordinaten des Pfeils (erster Punkt ist Startpunkt des Pfeils) im mit SelectTrans() gewählten Koordinatensystem
variant: Integer(1..15); Optional; Default = 1
Bitmaske die angibt, an welchem Ende der Linie ein Pfeil gezeichnet werden soll. 1 zeichnet den Pfeil am Ende der Linie, 2 am Anfang und 3 an beiden Enden. Wenn Bit 4 gesetzt ist, wird die Linie selbst nicht gezeichnet. Bit 8 verkürzt die Linie an den Enden mit Pfeilen um 1/2 Pixel.
mode: Integer(1..15); Optional; Default = 3
Bitmaske, die verschiedene Modi steuert
sym1, sym2: String; Optional
Start- und End-Symbol
Return this: JsGraph
variant Beschreibung
1 Pfeil oder Markersymbol am Ende der Linie zeichnen
2 Pfeil oder Markersymbol am Anfang der Linie zeichnen
4 Linie nicht zeichnen nur die Smybole (falls Bit 1/2 gesetzt)
8 Linie an Enden mit Symbol um 1/2 Strichdicke verkürzen
mode Beschreibung
1 (Pfeil)-Markerkontur zeichnen
2 (Pfeil)-Marker füllen
8 Linie an bisherigen Pfad anhängen

Zeichnet eine Linie mit einem Symbol (z.B. einem Pfeil) an einem oder beiden Enden.

Das Symbol, die Farben und Strichdicken können mit SetMarkerAttr() gesetzt werden. Das Marker-Symbol wird in die Richtung der Linie gedreht.

Die Symbole können auch mit den Parametern sym1 und sym2 ausgewählt werden. Wenn nur sym1 angegeben wird, wird sym1 für beide Enden verwendet, abhängig von variant.

  • Wenn die Linie die Länge Null hat, wird nichts gezeichnet.
  • Wenn Bit 8 von variant gesetzt ist, wird der Arrow an jenen Enden, wo ein Symbol gezeichnet wird, um eine halbe Strichdicke verkürzt, damit die Spitze nicht über den Endpunkt hinausragt.

Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Linie wird samt Symbolen im Pfad gespeichert. Wenn das mode-Bit 8 gesetzt ist, wird vom letzten Punkt im Pfad eine Linie zum ersten Punkt des Arrow eingefügt.

JsGraph.PolygonArrow()

JsGraph.PolygonArrow( xArray, yArray, variant, lineMode, arrowMode, size, sym1, sym2 )
JsGraph.PolygonArrow( poly, variant, lineMmode, arrowMode, sym1, sym2 )

xArray, yArray: Array[ ] of Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
poly: JsgPolygon
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
variant: Integer(1..15); Optional; Default = 1
Bitmaske die angibt, an welchem Ende der Linie ein Pfeil gezeichnet werden soll. 1 zeichnet den Pfeil am Ende der Linie, 2 am Anfang und 3 an beiden Enden. Wenn Bit 4 gesetzt ist, wird das Polygon selbst nicht gezeichnet. Bit 8 verkürzt die Linie an den Enden mit Pfeilen um 1/2 Pixel.
lineMode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Linien-Modi steuert
arrowMode: Integer(1..3); Optional; Default = 3
Bitmaske, die verschiedene Pfeil-Modi steuert
size: Integer(>0); Optional; Default = xArray.length
Optional Anzahl zu Zeichnende Punkte
sym1, sym2: String; Optional
Start- und End-Symbol
variant Beschreibung
1 Pfeil oder Markersymbol am Ende der Linie zeichnen
2 Pfeil oder Markersymbol am Anfang der Linie zeichnen
4 Linie nicht zeichnen nur die Smybole (falls Bit 1/2 gesetzt)
8 Linie an Enden mit Symbol um 1/2 Strichdicke verkürzen
lineMode Beschreibung
1 Polygonkontur zeichnen
2 Polygon füllen
4 Polygon Anfangs- und Endpunkt verbinden (Polygon schliessen)
8 Linie an bisherigen Pfad anhängen
arrowMode Beschreibung
1 (Pfeil)-Markerkontur zeichnen
2 (Pfeil)-Marker füllen

Zeichnet ein Polygon mit einem Symbol (z.B. einem Pfeil) an einem oder beiden Enden. Das Symbol, die Farben und Strichdicken können mit SetMarkerAttr() gesetzt werden. Das Marker-Symbol wird in die Richtung der Linie gedreht.

Die Symbole können auch mit den Parametern sym1 und sym2 ausgewählt werden. Wenn nur sym1 angegeben wird, wird sym1 für beide Enden verwendet, abhängig von variant.

Wenn der Pfad offen ist (siehe OpenPath()), wird nicht gezeichnet, sondern das Polygon samt Symbolen wird im Pfad gespeichert. Wenn das lineMode-Bit 8 gesetzt ist, wird vom letzten Punkt im Pfad eine Linie zum ersten Punkt des PolygonArrow eingefügt.

  • Wenn das Polygon aus weniger als 2 Punkten besteht, wird nichts gezeichnet.
  • Wenn die ersten beiden Punkte identisch sind, kann kein Pfeil am Start des Polygons gezeichnet werden.
  • Wenn die letzten beiden Punkte identisch sind, kann kein Pfeil am Ende des Polygons gezeichnet werden.
  • Wenn Bit 8 von variant gesetzt ist, wird der Arrow an jenen Enden, wo ein Symbol gezeichnet wird, um eine halbe Strichdicke verkürzt, damit die Spitze nicht über den Endpunkt hinausragt.

Wenn nicht alle Punkte von (xArray, yArray) gezeichnet werden sollen, kann mit size angegeben werden, wieviele Punkte gezeichnet werden sollen. Dies ist nützlich, wenn Arrays wiederverwendet werden, jedoch deren Grösse nicht identisch mit dem Füllstand ist. In diesem Fall kann mit size der Füllstand angegeben werden.

JsGraph.ClipPolygon()

JsGraph.ClipPolygon( poly, xmin, xmax, ymin, ymax, extend, polyListClipped )

poly: JsgPolygon
Zu clippendes Polygon
xmin, xmax, ymin, ymax: Number
Clipp-Rechteck
extend: Number; Optional; Default = 0
Erweiterung des Clipp-Bereiches
polyListClipped: JsgPolygonList; Optional
Polygon-Liste, in welcher die geclippten Liniensegmente gespeichert werden
Return: polyListClipped or new JsgPolygonList

Clippt das Polygon poly am rechteckigen Bereich, der durch xmin bis ymax und extend aufgespannt wird. Alle Koordinaten und Werte gelten im selben Koordinatensystem. extend erweitert den Rechteckbereich. Das Grafik-Clipping (siehe SetGraphClipping() verwendet diese Funktion und setzt extend auf die halbe Strichdicke. Dies verhindert, dass am Rand dicke Linien unvollständig gezeichnet werden.

In polyListClipped kann ein JsgPolygonList Objekt übergeben werden, in welchem dann die geclippten Polygon-Segmenete gespeichert werden. Wird polyListClipped nicht definiert, wird eine neue JsgPolygonList erzeugt und als Returnwert zurückgegeben. Für polyListClipped wird die Funktion Reset() gerufen.

Hinweis: Wird ein Polygon an einem rechteckigen Bereich geclippt, können mehrere unabhängige Teile entstehen. Daher wird ein JsgPolygonList Objekt benötigt, um alle Teile als unabhängige Polygone zu speichern. Wird poly vollständig geclippt, wird eine leere JsgPolygonList zurückgegeben.

Für das Clippen von Polygon-Flächen muss die Funktion ClipPolygonArea() verwendet werden, weil Flächen anders geclippt werden als Polygone.

JsGraph.ClipPolygonArea()

JsGraph.ClipPolygonArea( poly, xmin, xmax, ymin, ymax, polyClipped )

poly: JsgPolygon
Zu clippendes Polygon
xmin, xmax, ymin, ymax: Number
Clipp-Rechteck
polyClipped: JsgPolygon; Optional
Polygon, in welchem die geclippte Fläche gespeichert wird
Return: polyClipped or new JsgPolygon

Clippt die Fläche, welche durch das Polygon poly repräsentiert wird, am rechteckigen Bereich, der durch xmin bis ymax aufgespannt wird. Alle Koordinaten und Werte gelten im selben Koordinatensystem. Flächen können Löcher enthalten, indem die entsprechenden Polygon-Teile einen anderen Umlaufsinn als die Kontur haben.

In polyClipped kann ein JsgPolygon Objekt übergeben werden, in welchem dann das geclippte Polygon gespeichert wird. Wird polyClipped nicht definiert, wird ein neues JsgPolygon erzeugt und als Returnwert zurückgegeben. Für polyClipped wird die Funktion Reset() gerufen, womit darin gespeicherte Werte vor der Verwendung gelöscht werden.

Hinweis: Wird poly vollständig geclippt oder resultiert in einer leeren Fläche, wird ein leeres JsgPolygon zurückgegeben.

Für das Clippen von Polygon-Umrissen muss die Funktion ClipPolygon() verwendet werden, weil Umrisse anders geclippt werden als Flächen.

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