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 |
AngleOfVector berechnet den Winkel eines Vektors zur X-Achse.
JsGraph.AngleOfVector( x, y )
JsGraph.AngleOfVector( p )
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.
var startAngle = jsg.AngleOfVector( startX-centerX, startY-centerY ); var endAngle = jsg.AngleOfVector( endX-centerX, endY-centerY ); jsg.Arc( centerX, centerY, radius, startAngle, endAngle );
Wenn x = 0 und y = 0 sind, wird immer 0 zurück gegeben.
JsGraph.Circle( x, y, r, Mode, Angle )
JsGraph.Circle( c, r, Mode, Angle )
| 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( x, y, r, Start, End, Mode )
JsGraph.Arc( 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 |
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( x, y, r, Big, Mode )
JsGraph.ArcTo( c, r, Big, Mode )
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( x1, y1, x2, y2, r, Big, Mode )
JsGraph.ArcPt( p1, p2, r, Big, Mode )
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( x, y, rx, ry, Rot, Mode, startAngle )
JsGraph.Ellipse( 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 |
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( x, y, rx, ry, Rot, Start, End, Mode )
JsGraph.EllipseArc( c, rx, ry, Rot, Start, End, Mode )
| 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( x, y, rx, ry, Rot, Start, End, rPixel, nSegments )
JsGraph.MakeEllipseArcPolygon( p, rx, ry, Rot, Start, End, rPixel, nSegments )
Berechnet ein Polygon, welches einen Ellipsen- oder Kreisbogen darstellt. Die Werte werden im mit SelectTrans() gewählten Koordinatensystem zurückgegeben. Falls weder rPixel noch nSegments definiert sind (standard) wird die Auflösung des Polygons 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.
Wenn rPixel definiert ist, wird dieser radius in pixel verwendet, um die Anzahl segmente zu berechnen, sodass der Kreisbogen maximal 1/4 Pixel vom Idealbogen abweicht. Ist nSegments definiert, wird rPixel ignoriert und nSegments bestimmt die Anzahl Segmente für das Polygon.
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 );