Zum Zeichnen kann eine JsgPlane (Ebene) im 3D-Raum erzeugt werden und es kann mit den JsgPlane Funktionen auf diese Ebene 2D-Grafik gezeichnet werden. Die enstprechende Zeichnung erscheint jedoch dreidimensional.
Ausnahme: Texte werden nicht auf die Plane projiziert, sondern immer auf das Window. Lediglich ihre Position wird auf die Plane bezogen.
}
Um eine unverzerrte Abbildung der Grafik auf der Ebene zu erhalten, müssen XDir und YDir senkrecht aufeinander stehen und die Längen 1 haben. Dies kann durch den Parameter Normalize beim Erzeugen der Ebene erreicht werden, siehe JsgPlane(), Copy() und Normalize().
Wenn verzerrte Darstellungen erwünscht sind, sind enstprechend beliebige Venktoren für XDir und YDir erlaubt.
Pos | Nullpunkt der Ebene in der 3D-Welt |
XDir, YDir | Richtung der X- und Y-Achsen der Ebene in der 3D-Welt |
Normal | optionaler Normalen-Vektor der Ebene |
Result | Die Resultate einiger Berechnungen werden hier gespeichert |
ResultPoly | Die Resultate einiger Berechnungen werden hier gespeichert |
ExitPoint | Siehe ClipPoly() und ClipArea() |
EnterPoint | Siehe ClipPoly() und ClipArea() |
JsgPlane() | Erzeugt eine JsgPlane, welche in den folgenden Funktionen verwendet wird |
Ok() | Test, ob ein JsgPlane Objekt vorliegt |
Set() | Ändert die Plane Parameter |
Copy() | Kopiert eine Ebene |
Normalize() | Normalisiert die X- und Y-Koordinaten der Ebene |
CompNormal() | Veranlasst das Berechnen des Normalen-Vektors Normal |
PointOnPlane() | Berechnet die 3D-Koordinaten eines Punktes einer Ebene |
PolygonOnPlane() | Berechnet die 3D-Koordinaten eines 2D-Polygons auf einer Ebene |
IntersectLine() | Berechnet den Schnittpunkt einer Linie mit der Ebene |
IsPointOnTop() | Gibt true zurück, wenn ein Punkt auf jener Seite der Plane ist, auf welcher der Normal Vektor steht. |
IsPoint3DOnTop() | Gibt true zurück, wenn ein Punkt auf jener Seite der Plane ist, auf welcher der Normal Vektor steht. |
ClipPoly() | Clippt Polygone an der Plane |
ClipArea() | Clippt eine Fläche an der Plane |
SavePlane() | Speichert eine Kopie von Plane in einem Objekt |
SetPlane() | Definiert die Ebene, welche in den -OnPlane-Funktionen verwendet werden soll |
AddClipPlane() | Definiert eine weitere Clip-Plane in der Clip-Plane-Liste |
DeleteClipPlanes() | Löscht alle Clip-Planes der Clip-Plane-Liste |
GetPointOnPlane() | Berechnet die 3D Koordinaten eines Punktes auf der Plane |
PolygonToPlane() | Transformiert ein 2D-Polygon JsgPolygon auf einer Ebene JsgPlane in ein 3D-Polygon JsgPolygon. |
AddPointToPolyOnPlane() | Fügt einen Punkt auf einer Ebene am Ende des internen Polygons ein |
MoveToOnPlane() | Bewegt den Zeichenstift ohne zu zeichnen |
LineToOnPlane() | Zeichnet eine Gerade von der letzten Position |
LineOnPlane() | Zeichnet eine Linie |
PolygonOnPlane() | Zeichnet oder füllt ein Polygon |
BezierCurveOnPlane() | Zeichnet oder füllt eine Bezier-Kurve |
BezierCurveToOnPlane() | Zeichnet oder füllt eine Bezier-Kurve zu einem Endpunkt |
SplineCurveOnPlane() | Zeichnet oder füllt eine Spline-Kurve |
ArrowOnPlane() | Zeichnet eine Linie mit Pfeilen oder anderen Symbolen |
PolygonArrowOnPlane() | Zeichnet ein Polygon mit Pfeilen oder anderen Symbolen an den Endpunkten |
RectOnPlane() | Zeichnet ein Rechteck über zwei Eckpunkte |
RectWHOnPlane() | Zeichnet ein Rechteck über Breite und Höhe |
CircleOnPlane() | Zeichnet einen Vollkreis |
ArcOnPlane() | Zeichnet einen Kreisbogen von Start- zu Endwinkel |
ArcToOnPlane() | Zeichnet einen Kreisbogen zu einem Endpunkt |
ArcPtOnPlane() | Zeichnet einen Kreisbogen von Start- zu Endpunkt |
EllipseOnPlane() | Zeichnet eine Ellipse |
EllipseArcOnPlane() | Zeichnet einen Ellipsenbogen von Start- zu Endwinkel |
TextOnPlane() | Zeichnet einen Text |
GetTextBoxOnPlane() | Ermittelt die umschliessende Box für einen Text |
MarkerOnPlane() | Zeichnet Marker |
Für weitere Zeichnen-Funktionen siehe:
JsgPlane.Pos: JsgVect3; → JsgPlane()
Nullpunkt der Ebene im 3D-Raum.
JsgPlane.XDir: JsgVect3; → JsgPlane()
JsgPlane.YDir: JsgVect3; → JsgPlane()
Richtung der X- und Y-Achsen der Ebene im 3D-Raum. Bilden diese Achsen keine Rechs-Orthogonal-Basis wird die gezeichnete Grafik auf der Ebene enstprechend verzerrt. Die Achsen können mit der Funktion Normalize() oder dem entsprechenden Parameter bei einigen Funktionen entsprechend korrigiert werden.
JsgPlane.Normal: JsgVect3; → JsgPlane()
Falls gewünscht kann beim Erzeugen der Plane das Berechnen des Normalen-Vektors veranlasst werden. Der Normalen-Vektor hat nur dann die Länge 1, wenn XDir und YDir die Länge 1 haben und senkrecht aufeinander stehen.
Das Berechnen des Normalen-Vektors kann auch mit der Funktion CompNormal() veranlasst werden.
Die Resultate einiger Berechnungen werden hier gespeichert, sodass die aufrufende Funktion darauf zugreifen kann:
JsgPlane.ResultPoly: JsgPolygon
Die Resultate einiger Berechnungen werden hier gespeichert, sodass die aufrufende Funktion darauf zugreifen kann:
JsgPlane.ExitPoint: JsgVect3
JsgPlane.EnterPoint: JsgVect3
In den Funktionen ClipPoly() und ClipArea() kann eine Funktion übergeben werden, welche Punkte für geclippte Bereiche generiert. Diese Funktion hat über ExitPoint und EnterPoint Zugriff auf die entsprechenden Schnittpunkte des Polygons/Area mit der Plane.
new JsgPlane( Pos, XDir, YDir, Normalize )
Erzeugt ein JsgPlane Objekt, welches eine Ebene im Raum repräsentiert. Auf diese Ebene kann mit den JsgPlane Funktionen gezeichnet werden.
Wenn die beiden Vektoren XDir und YDir die Länge 1 haben, senkrecht aufeinander stehen und ein Rechts-System bilden, kann Normalize = false gesetzt werden (default).
global JsgPlane.Ok( Object )
Gibt true zurück, wenn Object definiert ist und vom Typ JsgPlane ist.
Ein Objekt ist vom Typ JsgPlane, wenn Object definiert und ein Objekt ist, welches ein Propertiy Pos enthält.
Diese Funktion ist dazu gedacht, Fälle zu unterscheiden, falls eine Funktion verschiedene Argument-Typen akzeptiert.
function myFunc( arg ) { if (JsgPlane.Ok(arg)) { // handle arg as a JsgPlane } else { // handle arg as something else } }
JsgPlane.Set( Pos, XDir, YDir, Normalize )
Setzt die Plane-Parameter neu.
Wenn die beiden Vektoren XDir und YDir die Länge 1 haben, senkrecht aufeinander stehen und ein Rechts-System bilden, kann Normalize = false gesetzt werden (default).
Der Parameter Normal wird in jedem Fall berechnet.
JsgPlane.Copy( Normalize )
Erzeugt eine Kopie einer JsgPlane. Wenn Normalize = true gesetzt wird, werden die Achsen XDir und YDir der Kopie normalisiert, siehe Normalize().
JsgPlane.Normalize( )
Wenn die Grafik auf der Ebene unverzerrt gezeichnet werden soll, müssen die Achsen XDir und YDir senkrecht aufeinander stehen und die Länge 1 haben. Dies kann durch Aufruf von Normalize() oder durch Setzen des Parameters Normalize = true bei der Funktion SetPlane() erreicht werden.
Normalize setzt die Längen XDir und YDir auf 1. Die Y-Achse YDir wird senkrecht auf die X-Achse XDir korrigiert. Die Richtung der X-Achse wird also in jedem Fall beibehalten.
Die Funktion gibt die aktuelle normalisierte Ebene als Funktionswert zurück. Damit kann die Funktion mit anderen Plane-Funktionen verkettet werden:
JsgPlane.CompNormal( )
Veranlasst das Berechnen des Normalen-Vektors Normal der Ebene. Diese Berechnung kann auch mit dem Konstruktor JsgPlane() veranlasst werden.
Wenn die Ebenen-Vektoren XDir und YDir die Länge 1 haben und senkrecht aufeinander stehen, hat der Normalen-Vektor Normal ebenfalls die Länge 1, sonst nicht.
JsgPlane.PointOnPlane( x, y, v )
JsgPlane.PointOnPlane( p, v )
Berechnet die 3D-Koordinaten eines Punktes einer Ebene.
JsgPlane.Polygon( xArray, yArray, Size, PlanePoly )
JsgPlane.Polygon( Poly, PlanePoly )
Berechnet die 3D-Koordinaten eines 2D-Polygons auf einer Ebene.
JsgPlane.IntersectLine( p1, p2 )
Berechnet den Schnittpunkt der Linie gegeben durch die beiden Punkte p1 und p2 mit der Ebene. Wenn kein Schnittpunkt existiert, d.h. wenn die Linie parallel zur Ebene oder in der Ebene liegt, wird null zurückgegeben. Wenn ein Schnittpunkt existiert, wird er in Result gespeichert und Result wird zurückgegeben.
Beachte: Damit diese Funktion verwendet werden kann, muss der Normalen-Vektor für der Ebene Normal berechnet worden sein und seine Länge muss 1 sein. Siehe Konstruktor JsgPlane() und CompNormal().
Algorithmus: Schnittpunkt Ebene mit Gerade einfach berechnen; Waltis blog
JsgPlane.IsPointOnTop( x, y, z )
Gibt true zurück, wenn der Punkt (x,y,z) auf der Oberseite oder auf der JsgPlane liegt. Die Oberseite ist jene Seite der Plane, auf welcher der Normal Vektor steht, d.h. von ihr weg zeigt.
Require: Der Normalen-Vektor Normal muss berechnet sein, siehe JsgPlane().
JsgPlane.ClipPoly( Polys, ClippedPolyList, InterpolFunc, InterpolData )
Clippt das Polygon oder alle Polygone in PolyList an dieser Plane und speichert die resultierenden Polygone in ClippedPolyList ab. ClippedPolyList muss von der aufrufenden Funktion übergeben werden und allenfalls mit Reset() gelöscht werden.
Wenn InterpolFunc definiert ist, wird für jeden Bereich der Polygone, die ausserhalb der Clip-Plane liegen, diese Funktion aufgerufen. Diese Funktion kann dann für diesen Bereich eigene Punkte generieren. InterpolFunc hat über this Zugriff auf die Schnittpunkte eines Polygons mit der Plane ExitPoint und EnterPoint. Der Funktion wird ausserdem InterpolData übergeben, in welchem die aufrufende Funktion weitere Daten übergeben kann.
JsgPlane.ClipPoly( Polys, ClippedPolyList, InterpolFunc, InterpolData )
Clippt das Polygon oder alle Polygone, welche eine Area ausmachen, in PolyList an dieser Plane und speichert das resultierenden Area-Polygon in ClippedPolyList ab. ClippedPolyList muss von der aufrufenden Funktion übergeben werden und allenfalls mit Reset() gelöscht werden.
Wenn InterpolFunc definiert ist, wird für jeden Bereich der Polygone, die ausserhalb der Clip-Plane liegen, diese Funktion aufgerufen. Diese Funktion kann dann für diesen Bereich eigene Punkte generieren. InterpolFunc hat über this Zugriff auf die Schnittpunkte eines Polygons mit der Plane ExitPoint und EnterPoint. Der Funktion wird ausserdem InterpolData übergeben, in welchem die aufrufende Funktion weitere Daten übergeben kann.
JsgPlane.IsPoint3DOnTop( p )
Gibt true zurück, wenn der Punkt p auf der Oberseite oder auf der JsgPlane liegt. Die Oberseite ist jene Seite der Plane, auf welcher der Normal Vektor steht, d.h. von ihr weg zeigt.
Require: Der Normalen-Vektor Normal muss berechnet sein, siehe JsgPlane().
JsGraphX3D.SavePlane( Params )
Speichert eine Referenz auf Plane in ein Objekt.
Wenn Params definiert und ein Objekt ist, wird Plane in diesem Objekt abgespeichert. Wenn Params kein Objekt ist, wird intern ein neues Objekt zum Speichern von Plane erzeugt. Das neue Objekt wird als Returnwert zurückgegeben.
Die Plane, d.h. eine Referenz darauf, wird im Property Plane des Objektes gespeichert und kann mit SetPlane() wieder dem JsGraphX3D.Plane zugewiesen werden.
JsGraphX3D.SetPlane( Pos, XDir, YDir, Normalize )
JsGraphX3D.SetPlane( Plane )
JsGraphX3D.SetPlane( Params )
Mit SetPlane wird die Ebene Plane für die folgenden -OnPlane-Funktionen definiert. Es kann entweder eine mit new JsgPlane() erzeugte Ebene übergeben werden oder es können die Parameter Pos, XDir und YDir für eine intern erzeugte Ebene übergeben werden.
Wenn die Grafik auf der Ebene unverzerrt gezeichnet werden soll, müssen die Achsen XDir und YDir senkrecht aufeinander stehen und die Längen 1 haben. Dies kann durch setzen von Normalize = true erreicht werden. Dabei wird die Y-Achse senkrecht auf die X-Achse korrigiert. Die Richtung der X-Achse wird also in jedem Fall beibehalten.
Mit der Funktion SaveAll() und SavePlane() kann eine Referenz auf die Ebene Plane in einem Objekt der Form Params gespeichert werden. Mit SetAll() und SetPlane() kann die Plane aus diesem Objekt wieder eingelesen werden.
JsGraphX3D.AddClipPlane( pos, xdir, ydir )
JsGraphX3D.AddClipPlane( plane )
Fügt der Clip-Plane-Liste eine weitere Clip-Plane hinzu.
Es können beliebig viele Clip-Planes definiert werden. Alle Grafik wird an allen Clip-Planes geclippt. Für die Kamera existiert eine separate Clip-Plane, welche mit SetCameraClipping() aktiviert werden kann.
Eine Clip-Plane hat einen Normalen-Vektor, der aus xdir und ydir über das Vektor-Produkt (siehe JsgVect3.Mult()) berechnet wird. Grafik, die auf der Seite der Ebene liegt, in welche dieser Vektor zeigt, wird gezeichnet. Grafik auf der anderen Seite wird geclippt.
Bei der ersten Variante von AddClipPlane() wird mit JsgPlane() eine JsgPlane erzeugt, wobei der Parameter Normalize = true gesetzt wird.
Die plane bei der zweiten Variante wird mit JsgPlane.Normalize() normalisiert und direkt in die Clip-Plane-Liste eingefügt. Es wird keine Kopie erstellt.
Verwende DeleteClipPlanes() um die Clip-Plane-Liste zu löschen.
JsGraphX3D.DeleteClipPlanes( )
Löscht die Clip-Plane-Liste. Nicht mehr referenzierte Clip-Planes werden vom System gelöscht. Die Clip-Plane der Kamera wird nicht gelöscht. Verwende dazu die Funktion SetCameraClipping().
JsGraphX3D.GetPointOnPlane( x, y, vect )
Berechnet die 3D-Korrdinaten des Punktes (x,y) auf der Plane.
JsGraphX3D.PolygonToPlane( Xpoly, Ypoly, Size, PlanePoly )
JsGraphX3D.PolygonToPlane( Poly, PlanePoly )
Transformiert das Polygon (Xpoly,Ypoly) bzw. Poly von Koordinaten bezüglich der Ebene Plane in ein 3D-Polygon. Wenn PlanePoly nicht definiert ist, wird das interne Polygon Plane.ResultPoly zum Speichern des Plane-Polygons verwendet. Achtung, dieses Polygon wird durch den Aufruf von anderen OnPlane-Funktionen dieses Moduls überschrieben. 3D-Zeichenfunktionen überschreiben das interne ResultPolygon nicht.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.AddPointToPolyOnPlane( x, y )
JsGraphX3D.AddPointToPolyOnPlane( p )
Fügt einen Punkt auf der Ebene Plane am Ende des internen Polygons ein. Das interne Polygon kann zum punktweisen Aufbau eines Polygons verwendet werden. Dies ist effizienter als die Verwendung der Funktionen MoveToOnPlane() und LineToOnPlane().
g.NewPoly(); for (var x = 0; x <= xMax; x += xDelta) { var y = f(x); g.AddPointToPolyOnPlane( x, y ); } g.DrawPoly();
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.MoveToOnPlane( x, y )
JsGraphX3D.MoveToOnPlane( p )
Positioniert den Zeichenstift (Pen) bei den Plane-Koordinaten (x, y) und setzt den Zeichenstift ab (PenDown = true). Von der letzten Position (LastX, LastY) wird keine Linie zur Position (x,y) gezeichnet.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.LineToOnPlane( x, y )
JsGraphX3D.LineToOnPlane( p )
Zeichnet eine gerade Linie von der letzten Pen-Position (LastX, LstX) zu den Koordinaten (x, y) und setzt den Pen an dieser Position ab, d.h. LastX wird zu x und LastY wird zu y.
Wenn vor dem Aufruf von LineToOnPlane die Funktion PenUp() gerufen wurde, wird keine Linie gezeichnet, sondern nur der Pen an die Position (x, y) bewegt und abgesetzt (entspricht MoveToOnPlane()).
Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern die Linie wird im Pfad gespeichert.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.LineOnPlane( x1, y1, x2, y2, Append )
JsGraphX3D.LineOnPlane( p1, p2, Append )
Zeichnet auf der JsgPlane 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 append = true ist, wird zusätzlich eine Linie vom letzten Punkt im Pfad zum ersten Punkt dieser Linie im Pfad gespeichert.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.PolygonOnPlane( Xpoly, Ypoly, Mode, Size, RoundedEdges )
JsGraphX3D.PolygonOnPlane( Poly, Mode, RoundedEdges )
Mode | Beschreibung |
---|---|
1 | Polygonzug zeichnen |
2 | Polygon füllen |
4 | Polygon Anfangs- und Endpunkt verbinden (Polygon schliessen) |
8 | Polygon an bisherigen Pfad anhängen |
Die Werte von Mode können durch Addition kombiniert werden.
Wenn der Pfad offen ist (siehe OpenPath()), so wird nicht gezeichnet, sondern das Polygon wird im Pfad gespeichert. Durch Wahl des Mode 8 kann erreicht werden, dass eine Linie vom Ende des bisher gespeicherten Pfades zum Anfang des Polygons im Pfad gespeichert wird, also das Polygon an den bisherigen Pfad angefügt wird, ohne eine neue Kontur zu beginnen.
Wenn RoundedEdges = true ist, werden die Ecken und Endpunkte des Polygons gerundet, unabhängig von den aktuellen Einstellungen von LineJoin und LineCap. Letztere werden von dieser Funktion nicht verändert.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.BezierCurveOnPlane( sx, sy, cx1, cy1, cx2, cy2, ex, ey, mode, nSegments )
JsGraphX3D.BezierCurveOnPlane( sp, cp1, cp2, ep, mode, nSegments )
JsGraphX3D.BezierCurveOnPlane( poly, mode, startIx, nSegments )
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 auf der Ebene Plane. 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.
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.
JsGraphX3D.BezierCurveToOnPlane( cx1, cy1, cx2, cy2, ex, ey, mode, nSegments )
JsGraphX3D.BezierCurveToOnPlane( cp1, cp2, ep, mode, nSegments )
JsGraphX3D.BezierCurveToOnPlane( poly, mode, startIx, nSegments )
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 auf der Ebene Plane 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.
JsGraphX3D.SplineCurveOnPlane( xArray, yArray, tension, mode, size, nSegments )
JsGraphX3D.SplineCurveOnPlane( poly, tension, mode, nSegments )
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.
JsGraphX3D.ArrowOnPlane( x1, y1, x2, y2, Variant, Mode, sym1, sym2 )
JsGraphX3D.ArrowOnPlane( p1, p2, Variant, Mode, sym1, sym2 )
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 |
Um mehrere Variant und Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Zeichnet eine Linie mit einem Symbol (z.B. einem Pfeil) an einem oder beiden Enden auf die Ebene plane. 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.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.PolygonArrowOnPlane( xArray, yArray, Variant, LineMode, ArrowMode, Size, sym1, sym2 )
JsGraphX3D.PolygonArrowOnPlane( Poly, Variant, LineMode, ArrowMode, sym1, sym2 )
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 |
Um mehrere Variant und Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Zeichnet ein Polygon mit einem Symbol (z.B. einem Pfeil) an einem oder beiden Enden auf die Ebene Plane. 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 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.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.RectOnPlane( Rect, Mode, Roll )
JsGraphX3D.RectOnPlane( x1, y1, x2, y2, Mode, Roll )
JsGraphX3D.RectOnPlane( p1, p2, Mode, Roll )
JsGraphX3D.RectOnPlane( { xmin, ymin, xmax, ymax }, Mode, Roll )
Mode | Beschreibung |
---|---|
1 | Rechteck Umriss zeichnen |
2 | Rechteck füllen |
4 | Umlaufsinn des Rechteck umkehren (nur wenn Pfad offen ist) |
8 | Rechteck an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Wenn das Rechteck Teil einer komplexen Fläche mit Löchern ist, muss eventuell sein Umlaufsinn invertiert werden.
Mit Roll kann bestimmt werden, welcher Punkt des Rechtecks der erste des Polygons sein soll. Ist Roll = 0, ist der Rechteck-Punkt (x1,y1) der erste und letzte Punkt des Polygons. Wenn Roll = 1 ist, wird das Polygon so rotiert, dass der zweite Punkt zum ersten Punkt wird usw. Damit wird der Rechteck-Punkt (x2,y1) zum ersten Punkt des Polygons. Mit Mode 4 wird danach zusätzlich der Umlaufsinn invertiert.
Hinweis: Das Rechteck wird mit der Funktion MakeRectPolygon() erzeugt und mit PolygonOnPlane() gezeichnet.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.RectWHOnPlane( Rect, Mode, Roll )
JsGraphX3D.RectWHOnPlane( x, y, w, h, Mode, Roll )
Mode | Beschreibung |
---|---|
1 | Rechteck Umriss zeichnen |
2 | Rechteck füllen |
4 | Umlaufsinn des Rechteck umkehren (nur wenn Pfad offen ist) |
8 | Rechteck an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Wenn das Rechteck Teil einer komplexen Fläche mit Löchern ist, muss eventuell sein Umlaufsinn invertiert werden.
Mit Roll kann bestimmt werden, welcher Punkt des Rechtecks der erste des Polygons sein soll. Ist Roll = 0, ist der Rechteck-Punkt (x,y) der erste und letzte Punkt des Polygons. Wenn Roll = 1 ist, wird das Polygon so rotiert, dass der zweite Punkt zum ersten Punkt wird usw. Damit wird der Rechteck-Punkt (x+w,y) zum ersten Punkt des Polygons. Mit Mode 4 wird danach zusätzlich der Umlaufsinn invertiert.
Hinweis: Das Rechteck wird mit der Funktion MakeRectPolygon() erzeugt und mit PolygonOnPlane() gezeichnet.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.CircleOnPlane( x, y, r, Mode, StartAngle )
JsGraphX3D.CircleOnPlane( c, r, Mode, StartAngle )
Mode | Beschreibung |
---|---|
1 | Kreis-Umriss zeichnen |
2 | Kreis füllen |
4 | keine Bedeutung (Polygon schliessen) |
8 | Kreis an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Wenn der Kreis Teil einer komplexen Fläche mit Löchern ist, muss eventuell sein Umlaufsinn invertiert werden, indem ein negativer Radius r verwendet wird.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.ArcOnPlane( x, y, r, start, end, Mode )
JsGraphX3D.ArcOnPlane( c, r, start, end, Mode )
Mode | Beschreibung |
---|---|
1 | Kreisbogen-Umriss zeichnen |
2 | Kreisbogen füllen |
4 | Eine Linie vom Endpunkt zum Anfangspunkt des Kreisbogens anfügen |
8 | Kreisbogen an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.ArcToOnPlane( x, y, r, big, Mode )
JsGraphX3D.ArcToOnPlane( p, r, big, Mode )
Mode | Beschreibung |
---|---|
1 | Kreisbogen-Umriss zeichnen |
2 | Kreisbogen füllen |
4 | Eine Linie vom Endpunkt zum Anfangspunkt des Kreisbogens anfügen |
8 | Kreisbogen an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Zeichnet einen Kreisbogen vom letzten Punkt (LastX, LastY) zum Punkt (x, y). Beim Konstruieren eines Kreises zwischen zwei Punkten gibt es zwei Lösungen. Für Kreisbögen zwischen zwei Punkten gibt es sogar vier Lösungen. Zwei der Lösungen werden durch den Umlaufsinn (Vorzeichen von r) gewählt. Dabei bleibt immer ein grosser und ein kleiner Kreisbogen übrig. Mit big kann man einen dieser Bogen auswählen.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.ArcPtOnPlane( x1, y1, x2, y2, r, big, Mode )
JsGraphX3D.ArcPtOnPlane( p1, p2, r, big, Mode )
Mode | Beschreibung |
---|---|
1 | Kreisbogen-Umriss zeichnen |
2 | Kreisbogen füllen |
4 | Eine Linie vom Endpunkt zum Anfangspunkt des Kreisbogens anfügen |
8 | Kreisbogen an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Zeichnet einen Kreisbogen vom Punkt (x1, y1) zum Punkt (x2, y2). Beim Konstruieren eines Kreises zwischen zwei Punkten gibt es zwei Lösungen. Für Kreisbögen zwischen zwei Punkten gibt es sogar vier Lösungen. Zwei der Lösungen werden durch den Umlaufsinn (Vorzeichen von r) gewählt. Dabei bleibt immer ein grosser und ein kleiner Kreisbogen übrig. Mit big kann man einen dieser Bogen auswählen.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.EllipseOnPlane( x, y, rx, ry, rot, Mode, StartAngle )
JsGraphX3D.EllipseOnPlane( c, rx, ry, rot, Mode, StartAngle )
Mode | Beschreibung |
---|---|
1 | Ellipsen-Umriss zeichnen |
2 | Ellipse füllen |
4 | keine Bedeutung (Polygone schliessen) |
8 | Ellipse an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Um mehrere Mode Einstellungen zu kombinieren, müssen einfach die enstrechenden Werte der Tabelle addiert werden.
Der Radius rx ist der Radius in die horizontale Richtung der nicht rotierten Ellipse, ry entsprechend der Radius in der vertikalen Richtung. rot rotiert die ganze Ellipse um einen Winkel bezüglich der horizontalen Achse im Gegenuhrzeigersinn, wenn rot positiv ist.
Wenn die Ellipse Teil eines Pfades ist und das Mode Bit 8 gesetzt ist, wird eine Linie vom letzten Punkt des Pfades zur Ellipse gezeichnet. Mit StartAngle kann definiert werden, an welchem Punkt der Ellipse die Linie andocken soll. StartAngle wird von der grossen Halbachse der Ellipse aus im Gegenuhrzeigersinn gemessen.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.EllipseArcOnPlane( x, y, rx, ry, rot, start, end, Mode )
JsGraphX3D.EllipseArcOnPlane( c, rx, ry, rot, start, end, Mode )
Mode | Beschreibung |
---|---|
1 | Ellipsen-Umriss zeichnen |
2 | Ellipse füllen |
4 | keine Bedeutung (Polygone schliessen) |
8 | Ellipse an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen |
Der Radius rx ist der Radius in die horizontale Richtung der nicht rotierten Ellipse, ry entsprechend der Radius in der vertikalen Richtung. rot rotiert den ganzen Ellipsenbogen um einen Winkel bezüglich der horizontalen Achse im Gegenuhrzeigersinn bei positivem Wert.
start und end Winkel beziehen sich auf die grosse Halbachse der Ellipse gemessen im Gegenuhrzeigersinn.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.TextOnPlane( Text, x, y, Width )
JsGraphX3D.TextOnPlane( Text, x, y, Mode )
JsGraphX3D.TextOnPlane( Text, p, Width )
JsGraphX3D.TextOnPlane( Text, p, Mode )
Zeichnet einen Text in den aktuellen Text-Attributen. Die erste Aufrufvariante muss gewählt werden für TextRendering = 'html', die zweite für TextRendering = 'canvas'.
x und y bzw. p ist die horizontale bzw. vertikale Position des Text-Referenzpunktes auf der Plane. Die Position des Referenzpunktes relativ zur Textbox kann durch das Alignment festgelegt werden (siehe SetTextHAlign(), SetTextVAlign() und SetTextAttr()). Der Abstand des Referenzpunktes vom Text kann mit dem Text-Padding festgelegt werden (siehe SetTextPadding()), welches sich auch auf die Grösse der Textbox auswirkt (siehe GetTextBoxOnPlane()).
Die Text-Grafik wird nicht 3-dimensional gezeichnet, sondern immer 2-dimensional. Über eine Objekt-Transformation kann Canvas-Text jedoch verzerrt werden. Die Text-Grösse wird in Pixel angegeben, kann jedoch durch AutoScalePix oder eine Objekt-Transformation skaliert werden.
Der Text kann HTML Auszeichnungen enthalten, wenn TextRendering = 'html' ist. Der Text wird dann am Rand des Canvas umbrochen, auch wenn kein Width vorgegeben wird. Die Textbreite kann aber über Width auf eine selber vorgegebene Breite limitiert werden.
Die folgenden Mode Einstellungen gelten nur für TextRendering = 'canvas':
Mode | Beschreibung |
---|---|
0 | Text mit TextColor gefüllt zeichnen, keine Text-Kontur zeichnen |
1 | Nur Text-Kontur in der Farbe Color und der Strichdicke LineWidth zeichnen |
2 | Nur Text-Füllung in der BgColor zeichnen (auch Farbverläufe möglich) |
3 | Kombination von Mode 1 und 2 |
Wenn Mode = 3 gewählt ist, wird zuerst der Text gefüllt und danach die Kontur gezeichnet. Die Kontur liegt somit vor der Füllung. Wenn LineWidth zu dick gewählt wird, kann die Füllung von der Kontur vollständig verdeckt werden.
Hinweis: Wenn eine Objekt-Transformation definiert ist, wird die Kontur-Dicke mit dem Text transformiert. Die Strichdicke LineWidth gibt somit die Kontur-Dicke des untransformierten Textes wieder. Für ein Beispiel siehe JSG Test: AddTrans.
Über die Funktion GetTextBoxOnPlane() kann die Position und Grösse der den Text gerade umschliessenden Textbox abgefragt werden.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.
JsGraphX3D.GetTextBoxOnPlane( Text, x, y, Width )
JsGraphX3D.GetTextBoxOnPlane( Text, p, Width )
Berechnet die Textbox eines Textes, der mit den aktuellen Text-Attributen gezeichnet würde.
Beim TextRendering = 'html' kann der Text HTML Auszeichnungen enthalten! Die Grösse des Textes wird berechnet, nachdem der Text intern gerendert worden ist, d.h. nachdem alle HTML Auszeichnungen interpretiert worden sind.
Die berechnete Textbox kann der Funktion RectWH() zum Zeichnen der umschliessenden Textbox übergeben werden, siehe JSG Test: Html Text und JSG Test: Canvas Text.
x und y bzw. p sind die horizontale bzw. vertikale Position des Text-Referenzpunktes auf der Plane. Die Position des Referenzpunktes relativ zur Textbox kann durch das Alignment festgelegt werden (siehe SetTextHAlign(), SetTextVAlign() und SetTextAttr()). Der Abstand des Box-Rahmens zum Text und damit des Referenzpunktes vom Text kann mit dem Text-Padding festgelegt werden (siehe SetTextPadding()).
Die Text-Grösse wird in den Properties w und h des WorkRect zurückgegeben. WorkRect ist ein internes Objekt zum Speichern von Rechteck-Daten.
Der Text wird bei TextRendering = 'html' am Rande des Canvas umgebrochen, auch wenn keine Width vorgegeben wird. Die Textbreite kann aber über Width auf eine selber vorgegebene Breite limitiert werden.
Bei TextRendering = 'canvas' wird Text nie umgebrochen, sondern geclippt. Width hat also keine Funktion und wird ignoriert.
Hinweis: Text, der im Mode TextRendering = 'canvas' gezeichnet wird, kann über eine Objekt-Transformation verzerrt werden. Diese Funktion gibt nur die Textbox des unverzerrten Textes zurück. Wird diese Box allerdings mit derselben Transformation gezeichnet, wird sie gleich verzerrt wie der Text.
JsGraphX3D.MarkerOnPlane( x, y, Mode, Mat )
JsGraphX3D.MarkerOnPlane( p, Mode, Mat )
JsGraphX3D.MarkerOnPlane( xArray, yArray, Mode, Mat, Size )
JsGraphX3D.MarkerOnPlane( Poly, Mode, Mat )
Mode | Beschreibung |
---|---|
1 | Markerkontur zeichnen |
2 | Marker füllen |
4 | Marker-Kontur invertieren, um Marker-Löcher in Flächen zu erhalten |
Zeichnet und/oder füllt Marker in den aktuellen Marker-Attributen. Die Marker werden nicht perspektivisch verzerrt. Ihre Form und Grösse wird in Canvas Koordinaten angegeben.
Die zu verwendende Ebene kann mit SetPlane() definiert werden.