Context2D QML Type

Stellt einen 2D-Kontext für Formen auf einem „Canvas“-Element bereit. Mehr...

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

Methoden

• Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• Context2D arcTo(real x1, real y1, real x2, real y2, real radius)
• Context2D beginPath()
• Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• Context2D clearRect(real x, real y, real w, real h)
• Context2D clip()
• Context2D closePath()
• CanvasGradient createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• Context2D ellipse(real x, real y, real w, real h)
• Context2D fill()
• Context2D fillRect(real x, real y, real w, real h)
• Context2D fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• bool isPointInPath(real x, real y)
• Context2D lineTo(real x, real y)
• var measureText(text)
• Context2D moveTo(real x, real y)
• void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)
• Context2D rect(real x, real y, real w, real h)
• Context2D reset()
• Context2D resetTransform()
• Context2D restore()
• Context2D rotate(real angle)
• Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• Context2D save()
• Context2D scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• Context2D setTransform(real a, real b, real c, real d, real e, real f)
• Context2D shear(real sh, real sv)
• Context2D stroke()
• Context2D strokeRect(real x, real y, real w, real h)
• Context2D strokeText(text, x, y)
• Context2D text(string text, real x, real y)
• Context2D transform(real a, real b, real c, real d, real e, real f)
• Context2D translate(real x, real y)

Ausführliche Beschreibung

Das Context2D-Objekt kann über die Methode „ getContext() “ eines Canvas -Elements erstellt werden:

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

Die Context2D-API implementiert denselben W3C-Canvas-2D-Context-API-Standard mit einigen erweiterten Funktionen.

Die Context2D-API stellt den Rendering-Kontext bereit, der die Methoden und Attribute definiert, die zum Zeichnen auf dem „ Canvas “-Element erforderlich sind. Im folgenden Beispiel wird der Canvas-Rendering-Kontext einer „ context “-Variablen zugewiesen:

var context = mycanvas.getContext("2d")

Die Context2D-API rendert die Leinwand als Koordinatensystem, dessen Ursprung (0,0) in der oberen linken Ecke liegt, wie in der folgenden Abbildung dargestellt. Die Koordinaten nehmen entlang der x -Achse von links nach rechts und entlang der y -Achse von oben nach unten auf der Leinwand zu.

Dokumentation der Eigenschaften

canvas : QtQuick::Canvas

Enthält das Canvas-Element, auf das der Kontext zeichnet.

Diese Eigenschaft ist schreibgeschützt.

fillRule : enumeration

Enthält die aktuell verwendete Füllregel zum Ausfüllen von Formen. Die folgenden Füllregeln werden unterstützt:

Siehe auch „ fillStyle “.

fillStyle : variant

Enthält den aktuell für die Füllung von Formen verwendeten Stil. Der Stil kann entweder eine Zeichenkette mit einer CSS-Farbe oder ein „ CanvasGradient “- oder „CanvasPattern“-Objekt sein. Ungültige Werte werden ignoriert. Diese Eigenschaft akzeptiert verschiedene Farbsyntaxen:

• 'rgb(rot, grün, blau)' – zum Beispiel: 'rgb(255, 100, 55)' oder 'rgb(100 %, 70 %, 30 %)'
• 'rgba(rot, grün, blau, Alpha)' – zum Beispiel: 'rgb(255, 100, 55, 1,0)' oder 'rgb(100 %, 70 %, 30 %, 0,5)'
• „hsl(Farbton, Sättigung, Helligkeit)“
• 'hsla(Farbton, Sättigung, Helligkeit, Alpha)'
• '#RRGGBB' – zum Beispiel: '#00FFCC'
• Qt.rgba(Rot, Grün, Blau, Alpha) – zum Beispiel: Qt.rgba(0,3, 0,7, 1, 1,0)

Wenn die „ fillStyle “ oder „ strokeStyle “ in einer Schleife mehrfach zugewiesen wird, sollte die letzte Qt.rgba()-Syntax gewählt werden, da sie die beste Leistung bietet, weil es sich bereits um einen gültigen „ QColor “-Wert handelt, der nicht jedes Mal geparst werden muss.

Der Standardwert ist „#000000“.

Siehe auch createLinearGradient(), createRadialGradient(), createPattern() und strokeStyle.

font : string

Speichert die aktuellen Schriftarteneinstellungen.

Es wird eine Teilmenge des W3C-2D-Kontextstandards für Schriftarten unterstützt:

• font-style (optional): normal | italic | oblique
• font-variant (optional): normal | small-caps
• font-weight (optional): normal | bold | 1 ... 1000
• font-size: Npx | Npt (wobei N eine positive Zahl ist)
• font-family: Siehe http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

Der Standardwert für die Schriftart lautet „10px sans-serif“.

globalAlpha : real

Enthält den aktuellen Alpha-Wert, der auf die Rendering-Operationen angewendet wird. Der Wert muss im Bereich von 0.0 (vollständig transparent) bis 1.0 (vollständig undurchsichtig) liegen. Der Standardwert ist 1.0.

globalCompositeOperation : string

Behält den aktuellen Zusammensetzungsvorgang bei. Zulässige Vorgänge sind:

In Übereinstimmung mit dem W3C-Standard werden die über die erforderlichen Modi hinausgehenden erweiterten Kompositionsmodi in der Syntax „HerstellerName-OperationName“ bereitgestellt, zum Beispiel: „ QPainter::CompositionMode_Exclusion “ wird als „qt-exclusion“ bereitgestellt.

lineCap : string

Speichert den aktuellen Stil der Linienenden. Die möglichen Stile für Linienenden sind:

Andere Werte werden ignoriert.

lineDashOffset : real [since QtQuick 2.11]

Enthält den aktuellen Strichversatz der Linie. Der Standardwert für den Strichversatz der Linie lautet „ 0 “.

Diese Eigenschaft wurde in QtQuick 2.11 eingeführt.

Siehe auch „ getLineDash()“ und „ setLineDash()“.

lineJoin : string

Speichert den aktuellen Verbindungsstil für Linien. Eine Verbindung besteht an jedem Punkt eines Teilpfads, der von zwei aufeinanderfolgenden Linien gemeinsam genutzt wird. Wenn ein Teilpfad geschlossen ist, besteht auch an seinem ersten Punkt (entspricht seinem letzten Punkt) eine Verbindung, die die erste und die letzte Linie des Teilpfads miteinander verbindet.

Die möglichen Verbindungsarten für Linien sind:

Andere Werte werden ignoriert.

lineWidth : real

Speichert die aktuelle Linienbreite. Werte, die keine endlichen Werte größer als Null sind, werden ignoriert.

miterLimit : real

Speichert das aktuelle Verhältnis für die Gehrungsbegrenzung. Der Standardwert für die Gehrungsbegrenzung beträgt 10,0.

shadowBlur : real

Speichert den aktuell auf Schatten angewendeten Unschärfegrad

shadowColor : string

Enthält die aktuelle Schattenfarbe.

shadowOffsetX : real

Speichert den aktuellen Schattenversatz als positiven horizontalen Abstand.

Siehe auch shadowOffsetY.

shadowOffsetY : real

Speichert den aktuellen Schattenversatz als positiven vertikalen Abstand.

Siehe auch „ shadowOffsetX “.

strokeStyle : variant

Enthält die aktuelle Farbe oder den aktuellen Stil, die bzw. der für die Linien um Formen verwendet werden soll. Der Stil kann entweder eine Zeichenkette mit einer CSS-Farbe, ein „ CanvasGradient “- oder ein „CanvasPattern“-Objekt sein. Ungültige Werte werden ignoriert.

Der Standardwert ist „#000000“.

Siehe auch createLinearGradient(), createRadialGradient(), createPattern() und fillStyle.

textAlign : string

Speichert die aktuellen Einstellungen für die Textausrichtung. Mögliche Werte sind:

Andere Werte werden ignoriert.

textBaseline : string

Speichert die aktuellen Einstellungen für die Ausrichtung der Grundlinie. Mögliche Werte sind:

Andere Werte werden ignoriert. Der Standardwert ist „alphabetic“.

Methodendokumentation

Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

Fügt dem aktuellen Teilpfad einen Bogen hinzu, der auf dem Umfang des Kreises liegt, dessen Mittelpunkt am Punkt (x, y) liegt und dessen Radius radius beträgt.

Sowohl startAngle als auch endAngle werden von der x-Achse aus in Radianten gemessen.

Der Parameter „ anticlockwise “ ist für jeden Bogen in der obigen Abbildung „ false “, da alle Bögen im Uhrzeigersinn gezeichnet sind.

Siehe auch „ arcTo “ und den 2D-Kontext-Standard des W3C für „arc()“.

Context2D arcTo(real x1, real y1, real x2, real y2, real radius)

Fügt dem aktuellen Teilpfad einen Bogen mit den angegebenen Kontrollpunkten und dem angegebenen Radius hinzu, der durch eine Gerade mit dem vorherigen Punkt verbunden ist. Um einen Bogen zu zeichnen, beginnen Sie mit denselben Schritten, die Sie zum Erstellen einer Linie befolgt haben:

• Rufen Sie die Methode ` beginPath()` auf, um einen neuen Pfad festzulegen.
• Rufen Sie die Methode ` moveTo(x, y)` auf, um Ihre Startposition auf der Zeichenfläche am Punkt `(x, y)` festzulegen.
• Um einen Bogen oder Kreis zu zeichnen, rufen Sie die Methode `arcTo(x1, y1, x2, y2, radius)` auf. Dadurch wird dem aktuellen Teilpfad ein Bogen mit dem Startpunkt (x1, y1), dem Endpunkt (x2, y2) und dem Radius ` radius ` hinzugefügt und durch eine gerade Linie mit dem vorherigen Teilpfad verbunden.

Siehe auch arc und den 2D-Context-Standard des W3C für arcTo().

Context2D beginPath()

Setzt den aktuellen Pfad auf einen neuen Pfad zurück.

Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

Fügt eine kubische Bézier-Kurve zwischen der aktuellen Position und dem angegebenen Endpunkt hinzu, wobei die durch (cp1x, cp1y) und (cp2x, cp2y) angegebenen Kontrollpunkte verwendet werden. Nach dem Hinzufügen der Kurve wird die aktuelle Position so aktualisiert, dass sie am Endpunkt (x, y) der Kurve liegt. Der folgende Code erzeugt den unten dargestellten Pfad:

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

Siehe auch den W3C-Standard für den 2D-Kontext bezüglich „bezierCurveTo “ und die Demo „The beautiful flower“ unter Verwendung von „bezierCurveTo“.

Context2D clearRect(real x, real y, real w, real h)

Löscht alle Pixel auf der Zeichenfläche innerhalb des durch (x, y, w, h) angegebenen Rechtecks und setzt sie auf transparentes Schwarz.

Context2D clip()

Erstellt den Ausschnittbereich anhand des aktuellen Pfades. Alle Teile der Form, die außerhalb des Ausschnittpfades liegen, werden nicht angezeigt. So erstellen Sie eine komplexe Form mit der Methode „ clip() “:

1. Rufen Sie die Methode „ context.beginPath() “ auf, um den Beschneidungspfad festzulegen.
2. Definieren Sie den Ausschnittpfad, indem Sie eine beliebige Kombination der Methoden „ lineTo “, „ arcTo “, „ arc “, „ moveTo “ usw. sowie „ closePath “ aufrufen.
3. Rufen Sie die Methode „ context.clip() “ auf.

Die neue Form wird angezeigt. Im Folgenden wird gezeigt, wie ein Beschneidungspfad die Darstellung eines Bildes verändern kann:

Siehe auch „ beginPath()“, „ closePath()“, „ stroke()“, „ fill()“ und den W3C-2D-Kontextstandard für „clip“.

Context2D closePath()

Schließt den aktuellen Teilpfad, indem eine Linie zum Anfang des Teilpfads gezeichnet wird, wodurch automatisch ein neuer Pfad begonnen wird. Der aktuelle Punkt des neuen Pfads ist der erste Punkt des vorherigen Teilpfads.

Siehe auch den W3C-Standard für 2D-Kontexte bezüglich „closePath“.

CanvasGradient createConicalGradient(real x, real y, real angle)

Gibt ein „ CanvasGradient “-Objekt zurück, das einen konischen Farbverlauf darstellt, der Farben gegen den Uhrzeigersinn um einen Mittelpunkt herum interpoliert (x, y) mit einem Startwinkel angle in Radiant.

Siehe auch CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle und strokeStyle.

CanvasImageData createImageData(CanvasImageData imageData)

Erstellt ein „ CanvasImageData “-Objekt mit denselben Abmessungen wie das Argument „ imageData “.

CanvasImageData createImageData(Url imageUrl)

Erstellt ein „ CanvasImageData “-Objekt, wobei das angegebene Bild von imageUrl geladen wird.

Siehe auch ` Canvas::loadImage()`, ` QtQuick::Canvas::unloadImage()` und ` QtQuick::Canvas::isImageLoaded`.

CanvasImageData createImageData(real sw, real sh)

Erstellt ein „ CanvasImageData “-Objekt mit den angegebenen Abmessungen (sw, sh).

CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)

Gibt ein „ CanvasGradient “-Objekt zurück, das einen linearen Farbverlauf darstellt, bei dem die Farbe entlang einer Linie zwischen dem Startpunkt (x0, y0) und dem Endpunkt (x1, y1) übergeht.

Ein Farbverlauf ist ein sanfter Übergang zwischen Farben. Es gibt zwei Arten von Farbverläufen: lineare und radiale. Farbverläufe müssen zwei oder mehr Farbstopps aufweisen, die Farbveränderungen darstellen, die zwischen 0 und 1 zwischen den Start- und Endpunkten bzw. Kreisen des Farbverlaufs positioniert sind.

Siehe auch CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle und strokeStyle.

variant createPattern(Image image, string repetition)

Gibt ein `CanvasPattern`-Objekt zurück, das das angegebene Bild verwendet und sich in der/den durch das Argument „repetition“ angegebenen Richtung(en) wiederholt.

Der Parameter „ image “ muss ein gültiges „Image“-Element, ein gültiges „ CanvasImageData “-Objekt oder eine geladene Bild-URL sein. Liegen keine Bilddaten vor, löst die Funktion eine „INVALID_STATE_ERR“-Ausnahme aus.

Die zulässigen Werte für „ repetition “ sind:

Ist das Argument „repeat“ leer oder null, wird der Wert „repeat“ verwendet.

Siehe auch strokeStyle und fillStyle.

variant createPattern(color color, enumeration patternMode)

Dies ist eine überladene Funktion. Sie gibt ein `CanvasPattern`-Objekt zurück, das die angegebenen Werte für ` color ` und ` patternMode` verwendet. Die gültigen Mustermodi sind:

Siehe auch „ Qt::BrushStyle “.

CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

Gibt ein ` CanvasGradient `-Objekt zurück, das einen radialen Farbverlauf darstellt, der entlang des Kegels gezeichnet wird, der durch den Startkreis mit dem Ursprung (x0, y0) und dem Radius r0 sowie den Endkreis mit dem Ursprung (x1, y1) und dem Radius r1 definiert ist.

Siehe auch CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle sowie strokeStyle.

void drawImage(variant image, real dx, real dy)

Zeichnet das angegebene „ image “ auf der Leinwand an der Position (dx, dy). Hinweis: Der Typ „ image “ kann ein „Image“-Element, eine Bild-URL oder ein „ CanvasImageData “-Objekt sein. Wenn es als „Image“-Element angegeben wird und das Bild noch nicht vollständig geladen ist, zeichnet diese Methode nichts. Wird die Bild-URL als Zeichenfolge übergeben, sollte das Bild zuvor durch Aufruf der Methode ` Canvas::loadImage()` des Canvas-Elements geladen werden. Das gezeichnete Bild unterliegt dem aktuellen Clip-Pfad des Kontexts, selbst wenn das übergebene ` image ` ein ` CanvasImageData `-Objekt ist.

Siehe auch CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded sowie den W3C-2D-Kontextstandard für `drawImage`.

void drawImage(variant image, real dx, real dy, real dw, real dh)

Dies ist eine überladene Funktion. Zeichnet das angegebene Element als „ image “ auf der Leinwand am Punkt (dx, dy) mit der Breite dw und der Höhe dh.

Hinweis: Der Typ „ image “ kann ein „Image“-Element, eine Bild-URL oder ein „ CanvasImageData “-Objekt sein. Wenn ein „Image“-Element angegeben wird und das Bild noch nicht vollständig geladen ist, zeichnet diese Methode nichts. Wird es als URL-Zeichenkette übergeben, sollte das Bild zunächst durch Aufruf der Methode „ Canvas::loadImage()“ des Canvas-Elements geladen werden. Das gezeichnete Bild unterliegt dem aktuellen Clip-Pfad des Kontexts, selbst wenn das übergebene „ image “ ein „ CanvasImageData “-Objekt ist.

Siehe auch „ CanvasImageData“ , „ Image “, „ Canvas::loadImage()“, „ Canvas::isImageLoaded “, „ Canvas::imageLoaded “ sowie den W3C-2D-Kontextstandard für „drawImage“.

void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

Dies ist eine überladene Funktion. Zeichnet das angegebene Element als „ image “ ausgehend vom Quellpunkt (sx, sy) und mit der Quellbreite sw sowie der Quellhöhe sh auf die Leinwand am Punkt (dx, dy) und mit der Breite dw sowie der Höhe dh.

Hinweis: Der Typ „ image “ kann ein „Image“- oder „Canvas“-Element, eine Bild-URL oder ein „ CanvasImageData “-Objekt sein. Wenn ein „Image“-Element angegeben wird und das Bild noch nicht vollständig geladen ist, zeichnet diese Methode nichts. Wird ein URL-String übergeben, sollte das Bild zunächst durch Aufruf der Methode ` Canvas::loadImage()` des `Canvas`-Elements geladen werden. Das gezeichnete Bild unterliegt dem aktuellen Clip-Pfad des Kontexts, selbst wenn das übergebene ` image ` ein ` CanvasImageData `-Objekt ist.

Siehe auch „ CanvasImageData“ , „ Image “, „ Canvas::loadImage()“, „ Canvas::isImageLoaded “, „ Canvas::imageLoaded “ und den W3C-2D-Kontextstandard für „drawImage“.

Context2D ellipse(real x, real y, real w, real h)

Erzeugt eine Ellipse innerhalb des Begrenzungsrechtecks, das durch seine obere linke Ecke bei (x, y), die Breite w und die Höhe h definiert ist, und fügt sie dem Pfad als geschlossenen Teilpfad hinzu.

Die Ellipse besteht aus einer Kurve im Uhrzeigersinn, die bei null Grad (der 3-Uhr-Position) beginnt und endet.

Context2D fill()

Füllt die Teilpfade mit dem aktuellen Füllstil.

Siehe auch den W3C-Standard für 2D-Kontexte bezüglich Füllungen und fillStyle.

Context2D fillRect(real x, real y, real w, real h)

Malt einen rechteckigen Bereich, der durch (x, y, w, h) angegeben wird, unter Verwendung von fillStyle.

Siehe auch fillStyle.

Context2D fillText(text, x, y)

Füllt das angegebene „ text “ an der angegebenen Position (x, y).

Siehe auch „ font“ , „ textAlign “, „ textBaseline “ und „ strokeText “.

CanvasImageData getImageData(real x, real y, real w, real h)

Gibt ein „ CanvasImageData “-Objekt zurück, das die Bilddaten für das Canvas-Rechteck enthält, das durch (x, y, w, h) angegeben wird.

[since QtQuick 2.11] array getLineDash()

Gibt ein Array von `qreals` zurück, das das Strichmuster der Linie darstellt.

Diese Methode wurde in QtQuick 2.11 eingeführt.

Siehe auch „ setLineDash()“ und „ lineDashOffset “.

bool isPointInPath(real x, real y)

Gibt „ true “ zurück, wenn der Punkt (x, y) im aktuellen Pfad liegt.

Siehe auch den W3C-Standard für 2D-Kontexte bezüglich „isPointInPath“.

Context2D lineTo(real x, real y)

Zeichnet eine Linie von der aktuellen Position zu dem Punkt mit den Koordinaten (x, y).

var measureText(text)

Gibt ein Objekt mit der Eigenschaft „ width “ zurück, deren Wert dem Aufruf von „ QFontMetrics::horizontalAdvance()“ mit dem angegebenen „ text “ in der aktuellen Schriftart entspricht.

Context2D moveTo(real x, real y)

Erstellt einen neuen Teilpfad mit einem Punkt bei (x, y).

void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

Zeichnet die Daten aus dem angegebenen „ imageData “-Objekt auf die Leinwand an den Koordinaten (dx, dy).

Wenn ein „Dirty Rectangle“ (dirtyX, dirtyY, dirtyWidth, dirtyHeight) angegeben wird, werden nur die Pixel aus diesem Rechteck gezeichnet.

Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)

Fügt eine quadratische Bézier-Kurve zwischen dem aktuellen Punkt und dem Endpunkt (x, y) ein, wobei der Kontrollpunkt durch (cpx, cpy) angegeben wird.

Siehe auch den W3C-Standard für den 2D-Kontext bezüglich „quadraticCurveTo“.

Context2D rect(real x, real y, real w, real h)

Fügt ein Rechteck an der Position (x, y) mit der angegebenen Breite w und Höhe h als geschlossenen Teilpfad hinzu.

Context2D reset()

Setzt den Kontextstatus und die Eigenschaften auf die Standardwerte zurück.

Context2D resetTransform()

Setzt die Transformationsmatrix auf den Standardwert zurück (entspricht dem Aufruf von setTransform(1, 0, 0, 1, 0, 0)).

Siehe auch transform(), setTransform() und reset().

Context2D restore()

Entnimmt den obersten Zustand vom Stapel und stellt den Kontext auf diesen Zustand zurück.

Siehe auch ` save()`.

Context2D rotate(real angle)

Drehe die Zeichenfläche um den aktuellen Ursprung um angle in Radianten im Uhrzeigersinn.

ctx.rotate(Math.PI/2);

Die Rotationstransformationsmatrix lautet wie folgt:

wobei der Drehwinkel angle in Radiant angegeben ist.

Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

Fügt dem Pfad ein Rechteck mit abgerundeten Ecken hinzu, das durch (x, y, w, h) angegeben wird. Die Argumente „ xRadius “ und „ yRadius “ geben den Radius der Ellipsen an, die die Ecken des abgerundeten Rechtecks definieren.

Context2D save()

Fügt den aktuellen Zustand auf den Zustandsstapel ein.

Bevor Sie Zustandsattribute ändern, sollten Sie den aktuellen Zustand zur späteren Verwendung speichern. Der Kontext verwaltet einen Stapel von Zeichnungszuständen. Jeder Zustand besteht aus der aktuellen Transformationsmatrix, dem Ausschnittbereich und den Werten der folgenden Attribute:

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

Der aktuelle Pfad ist NICHT Teil des Zeichnungszustands. Der Pfad kann durch Aufruf der Methode „ beginPath()“ zurückgesetzt werden.

Context2D scale(real x, real y)

Vergrößert oder verkleinert die Größe jeder Einheit im Canvas-Raster, indem die Skalierungsfaktoren mit der aktuellen Transformationsmatrix multipliziert werden. x ist der Skalierungsfaktor in horizontaler Richtung und y ist der Skalierungsfaktor in vertikaler Richtung.

Der folgende Code verdoppelt die horizontale Größe eines auf der Leinwand gezeichneten Objekts und halbiert dessen vertikale Größe:

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

Legt das Strichmuster auf das angegebene Muster fest.

pattern Eine Liste von Zahlen, die die Abstände angibt, in denen abwechselnd eine Linie und eine Lücke gezeichnet werden sollen.

Ist die Anzahl der Elemente im Array ungerade, werden die Elemente des Arrays kopiert und aneinandergehängt. Beispielsweise wird aus [5, 15, 25] [5, 15, 25, 5, 15, 25].

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

Diese Methode wurde in QtQuick 2.11 eingeführt.

Siehe auch getLineDash() und lineDashOffset.

Context2D setTransform(real a, real b, real c, real d, real e, real f)

Ändert die Transformationsmatrix in die durch die Argumente angegebene Matrix, wie unten beschrieben.

Durch die direkte Änderung der Transformationsmatrix können Sie Skalierungs-, Dreh- und Verschiebungstransformationen in einem einzigen Schritt durchführen.

Jeder Punkt auf der Leinwand wird mit der Matrix multipliziert, bevor etwas gezeichnet wird. Die HTML-Canvas-2D-Context-Spezifikation definiert die Transformationsmatrix wie folgt:

wobei:

• a der Skalierungsfaktor in horizontaler (x-)Richtung ist

  

• c der Schräglagefaktor in x-Richtung ist

  

• e die Verschiebung in x-Richtung ist

  

• b der Neigungsfaktor in y-Richtung (vertikal) ist

  

• d ist der Skalierungsfaktor in y-Richtung

  

• f ist die Verschiebung in y-Richtung

  

• die letzte Zeile bleibt konstant

Die Skalierungs- und Schräglagenfaktoren sind Vielfache; e und f sind Einheiten des Koordinatenraums, genau wie die Einheiten in der Methode translate(x,y).

Siehe auch ` transform()`.

Context2D shear(real sh, real sv)

Schneidet die Transformationsmatrix in horizontaler Richtung um sh und in vertikaler Richtung um sv.

Context2D stroke()

Zeichnet die Teilpfade mit dem aktuellen Strichstil.

Siehe auch „ strokeStyle “ und den W3C-Standard für den 2D-Kontext „Stroke“.

Context2D strokeRect(real x, real y, real w, real h)

Zeichnet den Umriss des durch (x, y, w, h) angegebenen Rechtecks unter Verwendung der Attribute strokeStyle, lineWidth, lineJoin und (falls zutreffend) miterLimit.

Siehe auch strokeStyle, lineWidth, lineJoin und miterLimit.

Context2D strokeText(text, x, y)

Zeichnet die angegebene „ text “ an einer durch (x, y) festgelegten Position.

Siehe auch font, textAlign, textBaseline und fillText.

Context2D text(string text, real x, real y)

Fügt den angegebenen „ text “ als eine Reihe geschlossener Teilpfade, die aus der aktuell bereitgestellten Kontextschriftart erstellt wurden, zum Pfad hinzu.

Die Teilpfade werden so positioniert, dass das linke Ende der Grundlinie des Textes an dem durch (x, y) angegebenen Punkt liegt.

Context2D transform(real a, real b, real c, real d, real e, real f)

Diese Methode ähnelt stark der Methode „ setTransform()“, doch anstatt die alte Transformationsmatrix zu ersetzen, wendet diese Methode die angegebene Transformationsmatrix auf die aktuelle Matrix an, indem sie mit dieser multipliziert wird.

Die Methode ` setTransform` (a, b, c, d, e, f) setzt die aktuelle Transformationsmatrix tatsächlich auf die Einheitsmatrix zurück und ruft anschließend die Methode `transform` (a, b, c, d, e, f) mit denselben Argumenten auf.

Siehe auch setTransform().

Context2D translate(real x, real y)

Verschiebt den Ursprung der Leinwand um einen horizontalen Abstand von x und einen vertikalen Abstand von y in Koordinatenraumeinheiten.

Durch das Verschieben des Ursprungs können Sie Muster aus verschiedenen Objekten auf die Leinwand zeichnen, ohne die Koordinaten für jede Form manuell messen zu müssen.