WaBis

walter.bislins.ch

JSG: Kreis und Ellipsen Funktionen

Mit den Kreis- und Ellipsen-Funktionen können Kreise, Ellipsen, Kreisbogen und Ellipsenbogen gezeichnet werden. Zum Zeichnen von Flächen mit Kreisen und Ellipsen (-Bögen) können die Elemente mit Hilfe des Pfades (siehe Pfad Funktionen) zu Konturen zusammen gesetzt werden, welche danach mit der Funktion Path() gefüllt werden können.

Der Umlaufsinn von Kreisen und Ellipsen (-Bögen) kann über das Vorzeichen des Radius gesteuert werden. Der Umlaufsinn spielt insbesondere beim Definieren von Konturen für Flächen mit Löchern eine Rolle.

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

Werden Kreise oder Ellipsen intern als Polygone gerendert, z.B. indem DisableNativeArc true gesetzt wird, wird die Anzahl Segmente auf MaxCurveSegments begrenzt.

AngleOfVector() Berechnet den Winkel eines Vektors zur X-Achse
Circle() Zeichnet einen Vollkreis
Arc() Zeichnet einen Kreisbogen von Start- zu Endwinkel
ArcTo() Zeichnet einen Kreisbogen zu einem Endpunkt
ArcPt() Zeichnet einen Kreisbogen von Start- zu Endpunkt
Ellipse() Zeichnet eine Ellipse
EllipseArc() Zeichnet einen Ellipsenbogen von Start- zu Endwinkel
MakeEllipseArcPolygon() Erzeugt ein Polygon für Kreis- oder Ellipsen-Bogen

JsGraph.AngleOfVector()

AngleOfVector berechnet den Winkel eines Vektors zur X-Achse.

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

x, y: Number
Richtungs-Koordinaten eines Vektors
p: JsgVect2
Richtungs-Koordinaten eines Vektors
Return: Number [0..2π) oder [0..360)
Winkel des Vektors bezüglich X-Achse in Grad oder Radiant

Der Winkel 0 zeigt immer nach rechts, unabhängig von der Transformation. Wenn AngleMeasure = 'deg' ist wird der Winkel in Grad zurück gegeben, wenn AngleMeasure = 'rad' ist wird der Winkel in Radiant zurück gegeben. Der Winkel liegt im Bereich 0 Grad/Radian bis exklusiv 360 Grad bzw. 2π.

Der Vektor wird als Pfeil interpretiert, welcher vom Nullpunkt zum Punkt (x,y) bzw p zeigt.

Diese Funktion ist nützlich, um den Start- und/oder Endwinkel eines Kreisbogens zu berechnen, wenn man das Zentrum des Kreisbogens kennt und je einen Punkt in der Richtung des Anfangs und des Endes des Kreisbogens. Die beiden Punkte müssen nicht zwingend auf dem Kreisbogen liegen.

Beispiel Kreisbogen mit Zentrum und zwei Punkten

var startAngle = jsg.AngleOfVector( startX-centerX, startY-centerY );
var endAngle   = jsg.AngleOfVector(   endX-centerX,   endY-centerY );
jsg.Arc( centerX, centerY, radius, startAngle, endAngle );

Spezialfall

Wenn x = 0 und y = 0 sind, wird immer 0 zurück gegeben.

JsGraph.Circle()

JsGraph.Circle( x, y, r, Mode, Angle )
JsGraph.Circle( c, r, Mode, Angle )

x, y: Number
Kreiszentrum im mit SelectTrans() gewählten Koordinatensystem
c: JsgVect2
Kreiszentrum im mit SelectTrans() gewählten Koordinatensystem
r: Number
Radius des Kreises: r < 0 → Umlaufsinn invertieren
Mode: Integer(1..15); Optional; Default = 1
Bitmaske bestimmt die Zeichenmodi
Angle: Number; Optional; Default = 0
Startwinkel, von dem aus der Kreis gezeichnet wird, in Grad oder Radian
Return this: JsGraph
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

Die obigen Mode-Werte können kombiniert werden, indem die Werte addiert werden.

Zeichnet einen Kreis oder fügt ihn an den offenen Pfad (siehe OpenPath()) an. Wenn der Kreis Teil eines Pfades wird und das Bit 8 von Mode gesetzt ist, kann mit Angle gesteuert werden, von welchem Punkt auf seinem Umriss aus der Kreis gezeichnet werden soll. Zu diesem Punkt wird von der letzten Position im Pfad eine Linie gezeichnet, wenn Bit 8 gesetzt ist.

Wenn der Kreis Teil eines Pfades ist, muss eventuell sein Umlaufsinn durch einen negativen r Wert invertiert werden, um ein Loch in der umgebenden Fläche zu erzeugen.

Hinweis: Wenn die Abbildungs-Transformation in die X- und Y-Achse nicht gleich skaliert, wird der Kreis beim Zeichnen zu einer Ellipse deformiert.

Clipping: Wenn der Radius viel grösser als der sichtbare Bereich ist, kann es zu Darstellungsfehlern kommen. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

JsGraph.Arc()

JsGraph.Arc( x, y, r, Start, End, Mode )
JsGraph.Arc( c, r, Start, End, Mode )

x, y: Number
Zentrum des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
c: JsgVect2
Zentrum des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
r: Number
Radius des Kreisbogens: r < 0 → Umlaufsinn invertieren
Start: Number
Startwinkel des Kreisbogens in Grad oder Radian
End: Number
Endwinkel des Kreisbogens in Grad oder Radian
Mode: Integer(1..15); Optional; Default = 1
Bitmaske bestimmt die Zeichenmodi
Return this: JsGraph
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

Die obigen Mode-Werte können kombiniert werden, indem die Werte addiert werden.

Wenn der Kreisbogen Teil eines Pfades ist, muss eventuell sein Umlaufsinn durch einen negativen rx Wert invertiert werden, um ein Loch in der umgebenden Fläche zu erzeugen.

Hinweis: Wenn die Abbildungs-Transformation in die X- und Y-Achse nicht gleich skaliert, wird der Kreisbogen beim Zeichnen zu einem Ellipsenbogen deformiert.

Clipping: Wenn der Radius viel grösser als der sichtbare Bereich ist, kann es zu Darstellungsfehlern kommen. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

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

JsGraph.ArcTo()

JsGraph.ArcTo( x, y, r, Big, Mode )
JsGraph.ArcTo( c, r, Big, Mode )

x, y: Number
Zielpunkt des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
c: JsgVect2
Zielpunkt des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
r: Number
Radius des Kreisbogens: r < 0 → Umlaufsinn invertieren
Big: Boolean; Optional; Default = false
Wahl, ob kleiner oder grosser Bogen
Mode: Integer(1..7); Optional; Default = 1
Bitmaske bestimmt die Zeichenmodi
Return this: JsGraph

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.

Mode Beschreibung
1 Kreisbogen-Umriss zeichnen
2 Kreisbogen füllen
4 Eine Linie vom Endpunkt zum Anfangspunkt des Kreisbogens anfügen

Die obigen Mode-Werte können kombiniert werden, indem die Werte addiert werden.

Wenn ein Pfad offen ist, wird der Kreisbogen immer an die bisherige Kontur angefügt, ohne eine neue Kontur zu beginnen.

Wenn der Kreisbogen Teil eines Pfades ist, muss eventuell sein Umlaufsinn durch einen negativen r Wert invertiert werden, um ein Loch in der umgebenden Fläche zu erzeugen.

Hinweis: Wenn die Abbildungs-Transformation in die X- und Y-Achse nicht gleich skaliert, wird der Kreisbogen beim Zeichnen zu einem Ellipsenbogen deformiert.

Clipping: Wenn der Radius viel grösser als der sichtbare Bereich ist, kann es zu Darstellungsfehlern kommen. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

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

JsGraph.ArcPt()

JsGraph.ArcPt( x1, y1, x2, y2, r, Big, Mode )
JsGraph.ArcPt( p1, p2, r, Big, Mode )

x1, y1: Number
Startpunkt des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
x2, y2: Number
Endpunkt des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
p1, p2: JsgVect2
Start- und Endpunkt des Kreisbogens im mit SelectTrans() gewählten Koordinatensystem
r: Number
Radius des Kreisbogens: r < 0 → Umlaufsinn invertieren
Big: Boolean; Optional; Default = false
Wahl, ob kleiner oder grosser Bogen
Mode: Integer(1..15); Optional; Default = 1
Bitmaske bestimmt die Zeichenmodi
Return this: JsGraph

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.

Mode Beschreibung
1 Kreisbogen-Umriss zeichnen
2 Kreisbogen füllen
4 Eine Linie vom Endpunkt zum Anfangspunkt des Kreisbogens anfügen
8 Kreisbogen mit einer Linie an letzten Punkt im Pfad anknüpfen

Die obigen Mode-Werte können kombiniert werden, indem die Werte addiert werden.

Wenn der Klreisbogen Teil eines Pfades ist, muss eventuell sein Umlaufsinn durch einen negativen r Wert invertiert werden, um ein Loch in der umgebenden Fläche zu erzeugen.

Hinweis: Wenn die Abblidungs-Transformation in die X- und Y-Achse nicht gleich skaliert, wird der Kreisbogen beim Zeichnen zu einem Ellipsenbogen deformiert.

Clipping: Wenn der Radius viel grösser als der sichtbare Bereich ist, kann es zu Darstellungsfehlern kommen. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

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

JsGraph.Ellipse()

JsGraph.Ellipse( x, y, rx, ry, Rot, Mode, startAngle )
JsGraph.Ellipse( c, rx, ry, Rot, Mode, startAngle )

x, y: Number
Zentrum der Ellipse im mit SelectTrans() gewählten Koordinatensystem
c: JsgVect2
Zentrum der Ellipse im mit SelectTrans() gewählten Koordinatensystem
rx: Number
X-Radius der Ellipse: rx < 0 Umlaufsinn invertieren
ry: Number
Y-Radius der Ellipse
Rot: Number
Rotationswinkel der Ellipse in Grad oder Radian
Mode: Integer(1..15); Optional; Default = 1
Bitmaske bestimmt die Zeichenmodi
startAngle: Number; Optional; Default = 0
Bestimmt, bei welchem Winkel der Ellipsenbogen beginnen soll
Return this: JsGraph
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

Die obigen Mode-Werte können kombiniert werden, indem die Werte addiert werden.

Der Radius rx ist der Radius in die horizontale Richtung der nicht rotierten Ellipse, ry entsprechend der Radius in der vertikalen Richtung.

Wenn die Ellipse Teil eines Pfades ist, muss eventuell ihr Umlaufsinn durch einen negativen rx Wert invertiert werden, um ein Loch in der umgebenden Fläche zu erzeugen.

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.

Clipping: Wenn der Radius viel grösser als der sichtbare Bereich ist, kann es zu Darstellungsfehlern kommen. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

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

JsGraph.EllipseArc()

JsGraph.EllipseArc( x, y, rx, ry, Rot, Start, End, Mode )
JsGraph.EllipseArc( c, rx, ry, Rot, Start, End, Mode )

x, y: Number
Zentrum des Ellipsenbogens im mit SelectTrans() gewählten Koordinatensystem
c: JsgVect2
Zentrum des Ellipsenbogens im mit SelectTrans() gewählten Koordinatensystem
rx: Number
X-Radius der Ellipse: rx < 0 Umlaufsinn invertieren
ry: Number
Y-Radius der Ellipse
Rot: Number
Rotationswinkel der Ellipse in Grad oder Radian
Start: Number
Startwinkel des Ellipsenbogens in Grad oder Radian
End: Number
Endwinkel des Ellipsenbogens in Grad oder Radian
Mode: Integer(1..15); Optional; Default = 1
Bitmaske bestimmt die Zeichenmodi
Return this: JsGraph
Mode Beschreibung
1 Ellipsenbogen-Umriss zeichnen
2 Ellipsenbogen füllen
4 Eine Linie vom Endpunkt zum Anfangspunkt des Ellipsenbogens anfügen
8 Ellipsenbogen an bisherige Pfad-Kontur anknüpfen, keine neue Kontur beginnen

Die obigen Mode-Werte können kombiniert werden, indem die Werte addiert werden.

Der Radius rx ist der Radius in die horizontale Richtung der nicht rotierten Ellipse, ry entsprechend der Radius in der vertikalen Richtung.

Wenn der Ellipsenbogen Teil eines Pfades ist, muss eventuell sein Umlaufsinn durch einen negativen rx Wert invertiert werden, um ein Loch in der umgebenden Fläche zu erzeugen.

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.

Clipping: Wenn der Radius viel grösser als der sichtbare Bereich ist, kann es zu Darstellungsfehlern kommen. Dies kann durch Einschalten des Grafik-Clipping mit SetGraphClipping() verhindert werden.

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

JsGraph.MakeEllipseArcPolygon()

JsGraph.MakeEllipseArcPolygon( x, y, rx, ry, Rot, Start, End )
JsGraph.MakeEllipseArcPolygon( p, rx, ry, Rot, Start, End )

x, y: Number
Zentrum des Ellipsenbogens im mit SelectTrans() gewählten Koordinatensystem
p: JsgVect2
Zentrum des Ellipsenbogens im mit SelectTrans() gewählten Koordinatensystem
rx: Number
X-Radius der Ellipse: rx >= 0 → Gegenuhrzeigersinn, rx < 0 → Uhrzeigersinn
ry: Number; Optional; Default = abs(rx)
Y-Radius der Ellipse
Rot: Number; Optional; Default = 0
Rotationswinkel der Ellipse in Grad oder Radian
Start: Number; Optional; Default = 0
Startwinkel des Ellipsenbogens in Grad oder Radian
End: Number; Optional; Default = Start+2Pi
Endwinkel des Ellipsenbogens in Grad oder Radian
Return WorkPoly: JsgPolygon
Berechnetes Polygon

Berechnet ein Polygon, welches einen Ellipsen- oder Kreisbogen darstellt. Die Werte werden im mit SelectTrans() gewählten Koordinatensystem zurückgegeben. Die Auflösung des Polygons wird so berechnet, dass die Abweichung des gezeichneten Polygons vom idealen Element nicht mehr als 1/4 Pixel ist. Die maximale Anzahl Segmente wird jedoch auf MaxCurveSegments begrenzt, wenn dieser Wert nicht 0 ist.

Das berechnete Polygon wird im internen Poly-Objekt JsGraph.WorkPoly gespeichert. Wenn es eventuell weiterverwendet werden soll, muss eine Kopie davon erstellt werden (poly.Copy(to)), da einige andere Funktionen dieses Poly-Objekt ebenfalls intern für berechnungen verwenden.

Solange der Browser-Canvas keine Ellipsen unterstützt, wird intern diese Funktion zur Berechnung der Ellipsenbögen oder verzerrten Kreisbögen verwendet. Diese Funtion ist auch hilfreich, wenn man einen Kreis- oder Ellipsenbogen mit Pfeilen an den Enden zeichnen möchte:

var poly = jsg.MakeEllipseArcPolygon( x, y, rx, ry, Rot, Start, End );
jsg.PolygonArrow( poly, variant );

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