Wenn Rechtecke Teil eines Pfades sind, kann man ihren Umlaufsinn festlegen, was von Bedeutung ist, wenn Flächen mit Löchern gezeichnet werden sollen.
Mit welchen Farben und Strichdicke ein Rechteck gezeichnet werden soll, muss vorher über Attribut Funktionen eingestellt werden.
| Rect() | Zeichnet ein Rechteck über zwei Eckpunkte |
| RectWH() | Zeichnet ein Rechteck über Breite und Höhe |
| MakeRectPolygon() | Erzeugt ein Rechteck-Polygon |
| DrawImage() | Zeichnet ein Bitmap-Bild |
JsGraph.Rect( x1, y1, x2, y2, Mode, Roll )
JsGraph.Rect( p1, p2, Mode, Roll )
JsGraph.Rect( Rectangle, Mode, Roll )
JsGraph.Rect( { xmin, ymin, xmax, ymax }, Mode, Roll )
JsGraph.Rect( )
| 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 |
Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von Mode zusammengesetzt werden. Wenn also zum Beispiel das Rechteck gefüllt werden soll und gleichzeitig auch die Kontur gezeichnet werden soll, so muss Mode = 1 + 2 = 3 gesetzt werden.
Die Punkte (x1, y1) und (x2, y2) können zwei beliebige sich diagonal gegenüberliegende Eckpunkte des Rechtecks sein. Bei der zweiten Aufruf-Variante können die Koordinaten in einem Objekt übergeben werden, wie es die Funktion GetFrame() zurück gibt. Bei der dritten Aufrufvariante wird das mit GetFrame() ermittelte Rechteck gezeichnet.
Wenn das Rechteck Teil eines Pfades ist, muss eventuell sein Umlaufsinn mit dem Bit 4 von Mode entsprechend eingestellt werden, um ein rechteckiges Loch in einer Fläche zu erzeugen. Ein Loch entseht dann, wenn der Umlaufsinn des Rechtecks entgegen dem Umlaufsinn der umgebenden Fläche ist.
Wenn das Rechteck Teil eines Pfades ist und das Bit 8 von Mode gesetzt ist, d.h. die Rechteck-Kontur wird Teil eines Pfades, so kann mit Roll gesteuert werden, welcher Punkt des Rechtecks der erste bzw. letzte Punkt ist, der mit der Pfadkontur verbunden werden soll. Roll wird vor Invert (Bit 4 von Mode) angewandt.
Das Recheck-Polygon wird wiefolgt aufgebaut:
rect.AddPoint(xmin,ymin); // Index = 0, erster Punkt rect.AddPoint(xmax,ymin); // Index = 1 rect.AddPoint(xmax,ymax); // Index = 2 rect.AddPoint(xmin,ymax); // Index = 3 rect.AddPoint(xmin,ymin); // Index = 4, letzter Punkt
Bei Roll = 0 ist der Punkt mit den kleinsten bzw. negativsten XY-Koordinaten der erste/letzte Punkt. Mit Roll kann dies geändert werden, indem die Punkte zirkulär verschoben werden.
Standardmässig ist Roll = 0. Wenn Roll = 1 ist, werden die Punkte eine Stelle in Richtung kleinerem Index rotiert. Damit wird Punkt mit Index 1 zum Start-/Endpunkt des Rechtecks. Mit negativem Roll wird in Richtung grösserem Index rotiert. Roll = 3 entspricht Roll = -1.
Mit der Funktion SetLineJoin() kann eingestellt werden, ob das Rechteck runde (round) oder eckige (miter oder bevel) Ecken haben soll.
JsGraph.RectWH( x, y, w, h, Mode, Roll )
JsGraph.RectWH( Rect, 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 |
Die Bits in obiger Tabelle können einfach durch Addition zu der Bitmaske von Mode zusammen gesetzt werden. Wenn also zum Beispiel das Rechteck gefüllt werden soll und gleichzeitig auch die Kontur gezeichnet werden soll, so muss Mode = 1 + 2 = 3 gesetzt werden.
Die zweite Aufruf-Variante ist praktisch, wenn das Rechteck über die Funktion GetTextBox() berechnet wurde, welche ein passendes Objekt zurück gibt.
Wenn das Rechteck Teil eines Pfades ist, muss eventuell sein Umlaufsinn mit dem Bit 4 von Mode entsprechend eingestellt werden, um ein rechteckiges Loch in einer Fläche zu erzeugen. Ein Loch entseht dann, wenn der Umlaufsinn des Rechtecks entgegen dem Umlaufsinn der umgebenden Fläche ist.
Wenn das Rechteck Teil eines Pfades ist und das Bit 8 von Mode gesetzt ist, d.h. die Rechteck-Kontur wird Teil eines Pfades, so kann mit Roll gesteuert werden, welcher Punkt des Rechtecks der erste bzw. letzte Punkt ist, der mit der Pfadkontur verbunden werden soll. Roll wird vor Invert (Bit 4 von Mode) angewandt.
Das Recheck-Polygon wird wiefolgt aufgebaut:
rect.AddPoint(xmin,ymin); // Index = 0, erster Punkt rect.AddPoint(xmax,ymin); // Index = 1 rect.AddPoint(xmax,ymax); // Index = 2 rect.AddPoint(xmin,ymax); // Index = 3 rect.AddPoint(xmin,ymin); // Index = 4, letzter Punkt
Bei Roll = 0 ist der Punkt mit den kleinsten bzw. negativsten XY-Koordinaten der erste/letzte Punkt. Mit Roll kann dies geändert werden, indem die Punkte zirkulär verschoben werden.
Standardmässig ist Roll = 0. Wenn Roll = 1 ist, werden die Punkte eine Stelle in Richtung kleinerem Index rotiert. Damit wird Punkt mit Index 1 zum Start-/Endpunkt des Rechtecks. Mit negativem Roll wird in Richtung grösserem Index rotiert. Roll = 3 entspricht Roll = -1.
Mit der Funktion SetLineJoin() kann eingestellt werden, ob das Rechteck runde (round) oder eckige (miter oder bevel) Ecken haben soll.
JsGraph.MakeRectPolygon( x1, y1, x2, y2, Invert, Roll )
JsGraph.MakeRectPolygon( p1, p2, Invert, Roll )
JsGraph.MakeRectPolygon( Rectangle, Invert, Roll )
JsGraph.MakeRectPolygon( { xmin, ymin, xmax, ymax }, Invert, Roll )
Die Punkte (x1, y1) und (x2, y2) bzw. p1 und p2 können zwei beliebige sich diagonal gegenüberliegende Eckpunkte des Rechtecks sein. Bei der dritten Aufrufvariante kann die Rechteckgeometrie in einem JsgRect Objekt übergeben werden, wie sie die Funktione GetFrameRect() zurückgibt. Bei der vierten Aufruf-Variante können die Koordinaten in einem Objekt übergeben werden, wie sie die Funktion GetFrame() zurückgibt.
Wenn das Rechteck Teil eines Pfades ist, muss eventuell sein Umlaufsinn mit Invert entsprechend eingestellt werden, um ein rechteckiges Loch in einer Fläche zu erzeugen. Ein Loch entseht dann, wenn der Umlaufsinn des Rechtecks entgegen dem Umlaufsinn der umgebenden Fläche ist.
Wenn die Rechteck-Kontur Teil eines Pfades, so kann mit Roll gesteuert werden, welcher Punkt des Rechtecks der erste bzw. letzte Punkt ist, der mit der Pfadkontur verbunden werden soll. Roll wird vor Invert angewandt.
Das Recheck-Polygon wird wiefolgt aufgebaut:
rect.AddPoint(xmin,ymin); // Index = 0, erster Punkt rect.AddPoint(xmax,ymin); // Index = 1 rect.AddPoint(xmax,ymax); // Index = 2 rect.AddPoint(xmin,ymax); // Index = 3 rect.AddPoint(xmin,ymin); // Index = 4, letzter Punkt
Bei Roll = 0 ist der Punkt mit den kleinsten bzw. negativsten XY-Koordinaten der erste/letzte Punkt. Mit Roll kann dies geändert werden, indem die Punkte zirkulär verschoben werden.
Standardmässig ist Roll = 0. Wenn Roll = 1 ist, werden die Punkte eine Stelle in Richtung kleinerem Index rotiert. Damit wird Punkt mit Index 1 zum Start-/Endpunkt des Rechtecks. Mit negativem Roll wird in Richtung grösserem Index rotiert. Roll = 3 entspricht Roll = -1.
Das berechnete Polygon wird im WorkPoly gespeichert. Wenn es eventuell weiterverwendet werden soll, muss eine Kopie davon erstellt werden, siehe JsgPolygon.Copy(), da einige andere Funktionen das WorkPoly ebenfalls intern für Berechnungen verwenden.
JsGraph.DrawImage( img, callback )
JsGraph.DrawImage( img, fit, callback )
JsGraph.DrawImage( img, x, y , w, h, callback )
JsGraph.DrawImage( img, srcx, srcy, srcw, srch, fit, callback )
JsGraph.DrawImage( img, srcx, srcy, srcw, srch, x, y , w, h, callback )
JsGraph.DrawImage( img, posRect, callback )
JsGraph.DrawImage( img, srcRect, fit, callback )
JsGraph.DrawImage( img, srcRect, posRect, callback )
Als Bild kann ein JavaScript image, video oder canvas Objekt verwendet werden.
Als img kann auch eine URL eines Bildes angegeben werden. In diesem Fall wird das Bild vom Server angefordert, aber noch nicht gezeichnet, solange es nicht im Browser angekommen ist. Die Funktion wartet nicht auf die Ankunft des Bildes. Wenn das Bild bereits im Browser ist, wird es gezeichnet, sonst nicht. Der Returnwert der Funktion gibt an, ob das Bild gezeichnet wurde oder nicht.
Wenn AutoRedrawOnImgLoad true ist (default), wird automatisch ein Redraw() ausgelöst, sobald das Bild geladen ist. Wenn mit callback eine Funktion übergeben wird, so wird diese Funktion vor dem Redraw() aufgerufen.
Als img kann auch die ID eines vom ImageCache Modul IC verwalteten Bildes verwendet werden.
Vorausladen von Bildern: Bilder können mit dem ImageCache Modul IC vorausgeladen werden, sodass sie möglichs schon verfügbar sind, wenn DrawImage() aufgerufen wird:
IC.PreloadImages( [ 'img1.jpg', 'img2.jpg', ... ], '../images/' );
Diese Bilder werden der Reihe nach mit niedriger Priorität geladen. Wenn bei DrawImage() das entsprechende Bild noch nicht geladen ist, wird es sofort angefordert. Es muss aber immer damit gerechnet werden, dass ein Bild beim Aufruf von DrawImage() nocht nicht geladen ist.
Wenn nur ein Ausschnitt von img gezeichnet werden soll, kann dieser mit srcx bis srch oder mit srcRect in Pixeln von links oben des Bildes angegeben werden. Wird kein Ausschnitt definiert, wird das ganze Bild gezeichnet, mit Ausnahme von Bildteilen die ausserhalb des aktuellen Clipping Bereiches liegen.
Mit x bis h oder posRect kann angegeben werden, wo und wie gross das Bild oder ein Ausschnitt davon gezeichnet werden soll. Die Werte werden je nach aktueller Transformation interpretiert. Das Bild kann verzerrt werden. Wird die Grösse nicht angegeben, wird die aktuelle Grösse des Bildes verwendet. Wird weder Position noch Grösse und kein fit angegeben, wird das Bild 1:1 an der Position (0,0) im gezeichnet.
Mit fit kann die Position und Grösse des Bildes bezüglich des Canvas oder Viewports vorgegeben werden. Man kann spezifizieren, wie es den Zeichenbereich ausfüllen soll:
| fit Wert | Beschreibung |
|---|---|
| 'canvas' | 'viewport' | Verzerrt das Bild so, dass es den Zeichenbereich vollständig ausfüllt. |
| 'canvas-in' | 'viewport-in' | Skaliert das Bild so, dass es vollständig und unverzerrt im Zeichenbereich zentriert liegt. |
| 'canvas-out' | 'viewport-out' | Skaliert das Bild so, dass der Zeichenbereich gerade unverzerrt vollständig ausgefüllt wird. Teile des Bildes werden abgeschnitten, wenn sie ausserhalb des Zeichen- oder Clippbereiches zu liegen kommen. Am Viewport wird nicht geclippt, wenn kein entsprechender Clipping-Bereich definiert wurde. |
| 'scale' | Die Originalgrösse des Bildes wird mit w und h skaliert. Wenn scale mit den andere Optionen kombiniert wird, z.B. 'viewport-in-scale', so wird das ohne scale berechnete Bild zusätzlich skaliert um den Mittelpunkt des Bildes. |