WaBis

walter.bislins.ch

JSG: Rechteck und Image Funktionen

Mit den Rechteck-Funktionen können Rechteck-Umrisse und/oder -Flächen gezeichnet werden.

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()

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( )

x1, y1, x2, y2: Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
p1, p2: JsgVect2
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
Rectangle: JsgRect
Rechteckdaten im aktuellen Koordinatensystem
xmin, ymin, xmax, ymax: Number
Koordinaten im aktuellen Koordinatensystem
Mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert.
Roll: Integer; Optional; Default = 0
bestimmt welcher Punkt des Rechtecks der erste sein soll
Return this: JsGraph
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()

JsGraph.RectWH( x, y, w, h, Mode, Roll )
JsGraph.RectWH( Rect, Mode, Roll )

x, y: Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem. Bei diesem Punkt handelt es sich immer um den Eckpunkt des Rechtecks mit den niedrigsten oder negativsten Werten.
w, h: Number(>0)
Breite und Höhe des Rechtecks im gewählten Koordinatensystem.
Rect: JsgRect
Objekt mit Position und Grösse des Rechtecks. Siehe GetTextBox().
Mode: Integer(1..15); Optional; Default = 1
Bitmaske, die verschiedene Modi steuert.
Roll: Integer; Optional; Default = 0
bestimmt welcher Punkt des Rechtecks der erste sein soll
Return this: JsGraph
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()

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 )

x1, y1, x2, y2: Number
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
p1, p2: JsgVect2
Koordinaten im mit SelectTrans() gewählten Koordinatensystem
Rectangle: JsgRect
Rechteck-Daten im aktuellen Koordinatensystem
xmin, ymin, xmax, ymax: Number
Koordinaten im aktuellen Koordinatensystem
Invert: Bool; Optional; Default = false
true → Umlaufsinn des Rechtecks umkehren
Roll: Integer; Optional; Default = 0
Rotiert die Punkte des Rechtecks und definiert so die Position des ersten und letzten Punktes
Return WorkPoly: JsgPolygon
Objekt mit den Koordinaten des Rechtecks

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()

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 )

img: image, video, canvas, number, string
Identifikation des zu zeichnenden Bitmap Bildes
fit: string; Optional; Default = undefined
Gibt an wie das Bild im Canvas skaliert und platziert werden soll
callback: function(JsGraph,imgID); Optional; Default = undefined
Funktion die nach dem Laden des Bildes gerufen werden soll
x, y: Number; Optional; Default = 0
Koordinaten des Bildes im mit SelectTrans() gewählten Koordinatensystem
w, h: Number; Optional; Default = 0
Zielgrösse des Bilder im mit SelectTrans() gewählten Koordinatensystem oder als Skalierungsfaktor wenn fit = scale ist
srcx..srch: Number; Optional; Default = 0
Zu zeichnender Ausschnitt von img in Pixel-Koordinaten
posRect: JsgRect; Optional; Default = undefined
Koordinaten und Grösse des gezeichneten Bildes im mit SelectTrans() gewählten Koordinatensystem
srcRect: JsgRect; Optional; Default = undefined
Zu zeichnender Ausschnitt des von img in Pixel-Koordinaten
Return: Boolean
gibt true zurück, wenn das Bild gezeichnet wurde, false wenn das Bild noch nicht geladen ist

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.
Weitere Infos zur Seite
Erzeugt Dienstag, 2. Februar 2016
von wabis
Zum Seitenanfang
Geändert Dienstag, 22. Januar 2019
von wabis