Context2D QML Type

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

Diese Eigenschaft ist nur lesbar.

Enthält die aktuelle Füllregel, die zum Füllen von Formen verwendet wird. Die folgenden Füllregeln werden unterstützt:

Siehe auch fillStyle.

Enthält den aktuellen Stil, der zum Füllen von Formen verwendet wird. Der Stil kann entweder ein String mit einer CSS-Farbe, ein CanvasGradient oder ein CanvasPattern-Objekt sein. Ungültige Werte werden ignoriert. Diese Eigenschaft akzeptiert mehrere 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 viele Male in einer Schleife zugewiesen wird, sollte die letzte Qt.rgba() Syntax gewählt werden, da sie die beste Leistung hat, da sie bereits ein gültiger QColor Wert ist und nicht jedes Mal geparst werden muss.

Der Standardwert ist '#000000'.

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

Enthält die aktuellen Schrifteinstellungen.

Es wird eine Untermenge des w3C 2d-Kontextstandards für Schrift unterstützt:

• font-style (optional): normal | kursiv | schräg
• font-variant (optional): normal | small-caps
• Schriftstärke (optional): normal | fett | 1 ... 1000
• font-size: Npx | Npt (wobei N eine positive Zahl ist)
• Schriftart-Familie: Siehe http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

Der Standardwert für die Schriftart ist "10px sans-serif".

Enthält den aktuellen Alphawert, der auf Rendering-Operationen angewendet wird. Der Wert muss im Bereich von 0.0 (völlig transparent) bis 1.0 (völlig undurchsichtig) liegen. Der Standardwert ist 1.0.

Enthält die aktuelle Kompositionsoperation. Erlaubte Operationen sind:

In Übereinstimmung mit dem W3C-Standard werden die erweiterten Kompositionsmodi, die über die erforderlichen Modi hinausgehen, als "vendorName-operationName"-Syntax bereitgestellt, zum Beispiel: QPainter::CompositionMode_Exclusion wird als "qt-exclusion" bereitgestellt.

Enthält den aktuellen Zeilenkappenstil. Die möglichen Zeilenkappenstile sind:

Andere Werte werden ignoriert.

Enthält den aktuellen Strichversatz der Linie. Der Standardwert für den Strichversatz ist 0.

Diese Eigenschaft wurde in QtQuick 2.11 eingeführt.

Siehe auch getLineDash() und setLineDash().

Enthält den aktuellen Stil der Zeilenverbindung. Ein Join existiert an jedem Punkt in einem Unterpfad, der von zwei aufeinanderfolgenden Zeilen geteilt wird. Wenn ein Unterpfad geschlossen ist, gibt es auch einen Join an seinem ersten Punkt (gleichbedeutend mit seinem letzten Punkt), der die erste und die letzte Zeile des Unterpfades verbindet.

Die möglichen Arten der Linienverbindung sind:

Andere Werte werden ignoriert.

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

Enthält das aktuelle Gehrungsgrenzverhältnis. Der Standardwert für die Gehrungsgrenze ist 10,0.

Enthält den aktuellen Grad der Unschärfe, der auf Schatten angewendet wird.

Enthält die aktuelle Schattenfarbe.

Hält den aktuellen Schattenversatz im positiven horizontalen Abstand.

Siehe auch shadowOffsetY.

Hält den aktuellen Schattenversatz im positiven vertikalen Abstand.

Siehe auch shadowOffsetX.

Enthält die aktuelle Farbe oder den Stil, der für die Linien um die Formen herum verwendet wird. 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.

Enthält die aktuellen Einstellungen für die Textausrichtung. Die möglichen Werte sind:

Andere Werte werden ignoriert.

Enthält die aktuellen Einstellungen für die Grundlinienausrichtung. Die möglichen Werte sind:

Andere Werte werden ignoriert. Der Standardwert ist "alphabetisch".

Fügt dem aktuellen Unterpfad einen Bogen hinzu, der auf dem Umfang des Kreises liegt, dessen Mittelpunkt im Punkt (x, y) liegt und dessen Radius radius ist.

Sowohl startAngle als auch endAngle werden von der x-Achse aus im Bogenmaß gemessen.

Der Parameter anticlockwise ist false für jeden Bogen in der obigen Abbildung, da sie alle im Uhrzeigersinn gezeichnet sind.

Siehe auch arcTo und W3C's 2D Context Standard für arc().

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

• Rufen Sie die Methode beginPath() auf, um einen neuen Pfad zu erstellen.
• Rufen Sie die Methode moveTo(x, y) auf, um Ihre Startposition auf der Leinwand auf den Punkt (x, y) zu setzen.
• Um einen Bogen oder Kreis zu zeichnen, rufen Sie die Methode arcTo(x1, y1, x2, y2, radius) auf. Diese fügt einen Bogen mit Startpunkt (x1, y1), Endpunkt (x2, y2) und radius zum aktuellen Unterpfad hinzu und verbindet ihn mit dem vorherigen Unterpfad durch eine gerade Linie.

Siehe auch arc und W3C's 2D Context Standard für arcTo().

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

Fügt eine kubische Bezier-Kurve zwischen der aktuellen Position und dem angegebenen Endpunkt unter Verwendung der durch (cp1x, cp1y) und (cp2x, cp2y) angegebenen Kontrollpunkte hinzu. Nachdem die Kurve hinzugefügt wurde, wird die aktuelle Position auf den Endpunkt (x, y) der Kurve aktualisiert. Der folgende Code erzeugt den unten gezeigten 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 W3C 2d context standard for bezierCurveTo und The beautiful flower demo by using bezierCurveTo.

Löscht alle Pixel auf der Leinwand in dem durch (x, y, w, h) angegebenen Rechteck zu transparentem Schwarz.

Erzeugt den Beschneidungsbereich aus dem aktuellen Pfad. Alle Teile der Form außerhalb des Beschneidungspfads 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 Beschneidungspfad, indem Sie eine beliebige Kombination der Methoden lineTo, arcTo, arc, moveTo, usw. und closePath aufrufen.
3. Rufen Sie die Methode context.clip() auf.

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

Siehe auch beginPath(), closePath(), stroke(), fill(), und W3C 2d context standard for clip.

Schließt den aktuellen Unterpfad, indem eine Linie zum Anfang des Unterpfads gezogen wird, wodurch automatisch ein neuer Pfad beginnt. Der aktuelle Punkt des neuen Pfades ist der erste Punkt des vorherigen Unterpfades.

Siehe auch W3C 2d context standard für closePath.

Gibt ein CanvasGradient Objekt zurück, das einen konischen Farbverlauf darstellt, der die Farben gegen den Uhrzeigersinn um einen Mittelpunkt (x, y) mit einem Startwinkel angle in Bogenmaßeinheiten interpoliert.

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

Erzeugt ein CanvasImageData Objekt mit denselben Abmessungen wie das imageData Argument.

Erzeugt ein CanvasImageData Objekt mit dem angegebenen Bild, das von imageUrl geladen wurde.

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

Erzeugt ein CanvasImageData Objekt mit den angegebenen Dimensionen(sw, sh).

Gibt ein CanvasGradient Objekt zurück, das einen linearen Farbverlauf darstellt, der 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 haben, die Farbverschiebungen von 0 bis 1 zwischen den Anfangs- und Endpunkten oder Kreisen des Farbverlaufs darstellen.

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

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

Der Parameter image muss ein gültiges Bildelement, ein gültiges CanvasImageData Objekt oder eine geladene Bildurl sein. Wenn keine Bilddaten vorhanden sind, löst die Funktion eine INVALID_STATE_ERR-Ausnahme aus.

Die zulässigen Werte für repetition sind:

Wenn das Argument "Wiederholung" leer oder null ist, wird der Wert "repeat" verwendet.

Siehe auch strokeStyle und fillStyle.

Dies ist eine überladene Funktion. Gibt ein CanvasPattern-Objekt zurück, das die angegebenen color und patternMode verwendet. Die gültigen Mustermodi sind:

Siehe auch Qt::BrushStyle.

Gibt ein CanvasGradient Objekt zurück, das einen radialen Farbverlauf darstellt, der entlang des Kegels malt, der durch den Startkreis mit Ursprung (x0, y0) und Radius r0 und den Endkreis mit Ursprung (x1, y1) und Radius r1 gegeben ist.

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

Zeichnet die angegebene image an der Position (dx, dy) auf die Leinwand. Hinweis: Der Typ image kann ein Bildelement, eine Bildurl oder ein CanvasImageData Objekt sein. Wird ein Bild angegeben, zeichnet diese Methode nichts, wenn das Bild nicht vollständig geladen ist. Bei der Angabe als URL-String sollte das Bild zuerst durch den Aufruf der Methode Canvas::loadImage() von Canvas item geladen werden. Das Bild, das gezeichnet wird, unterliegt dem aktuellen Kontext-Clip-Pfad, auch wenn das angegebene image ein CanvasImageData Objekt ist.

Siehe auch CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded, und W3C 2d context standard für drawImage.

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

Hinweis: Der Typ image kann ein Bildelement, eine Bildurl oder ein CanvasImageData Objekt sein. Wenn als Image item angegeben, zeichnet diese Methode nichts, wenn das Bild nicht vollständig geladen ist. Wenn als url string angegeben, sollte das Bild zuerst durch den Aufruf der Methode Canvas::loadImage() von Canvas item geladen werden. Das Bild, das gezeichnet wird, unterliegt dem aktuellen Kontext-Clip-Pfad, auch wenn das angegebene image ein CanvasImageData Objekt ist.

Siehe auch CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded, und W3C 2d context standard für drawImage.

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

Hinweis: Der Typ image kann ein Bild- oder Canvas-Element, eine Bild-Url oder ein CanvasImageData Objekt sein. Wenn ein Bild angegeben wird, zeichnet diese Methode nichts, wenn das Bild nicht vollständig geladen ist. Bei der Angabe als URL-String sollte das Bild zuerst durch den Aufruf der Methode Canvas::loadImage() des Canvas-Elements geladen werden. Das Bild, das gezeichnet wird, unterliegt dem aktuellen Kontext-Clip-Pfad, auch wenn das angegebene image ein CanvasImageData Objekt ist.

Siehe auch CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded, und W3C 2d context standard für drawImage.

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

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

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

Siehe auch W3C 2d context standard für fill und fillStyle.

Malt einen rechteckigen Bereich, der durch (x, y, w, h) angegeben ist, mit fillStyle.

Siehe auch fillStyle.

Füllt den angegebenen text an der angegebenen Position (x, y).

Siehe auch font, textAlign, textBaseline, und strokeText.

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

Gibt ein Array von qreals zurück, das das Strichmuster der Linie repräsentiert.

Diese Methode wurde in QtQuick 2.11 eingeführt.

Siehe auch setLineDash() und lineDashOffset.

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

Siehe auch W3C 2d context standard für isPointInPath.

Zeichnet eine Linie von der aktuellen Position zum Punkt bei (x, y).

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

Erzeugt einen neuen Unterpfad mit einem Punkt bei (x, y).

Zeichnet die Daten des angegebenen imageData Objekts auf die Leinwand bei (dx, dy).

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

Fügt eine quadratische Bezier-Kurve zwischen dem aktuellen Punkt und dem Endpunkt (x, y) mit dem durch (cpx, cpy) angegebenen Kontrollpunkt hinzu.

Siehe auch W3C 2d context standard für quadraticCurveTo.

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

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

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

Bringt den obersten Zustand auf den Stack und stellt den Kontext in diesem Zustand wieder her.

Siehe auch save().

Dreht die Leinwand um den aktuellen Ursprung um angle im Bogenmaß und im Uhrzeigersinn.

ctx.rotate(Math.PI/2);

Die Matrix der Rotationstransformation lautet wie folgt:

wobei die angle der Drehung im Bogenmaß angegeben ist.

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

Schiebt den aktuellen Zustand auf den Zustandsstapel.

Bevor Sie irgendwelche Zustandsattribute ändern, sollten Sie den aktuellen Zustand für spätere Zwecke speichern. Der Kontext verwaltet einen Stapel von Zeichnungszuständen. Jeder Zustand besteht aus der aktuellen Transformationsmatrix, dem Beschneidungsbereich 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 Zeichnungsstatus. Der Pfad kann durch Aufrufen der Methode beginPath() zurückgesetzt werden.

Vergrößert oder verkleinert die Größe jeder Einheit im Canvas-Raster durch Multiplikation der Skalierungsfaktoren mit der aktuellen Transformationsmatrix. 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 seine vertikale Größe:

ctx.scale(2.0, 0.5);

Setzt das Strichelmuster auf das angegebene Muster.

pattern eine Liste von Zahlen, die Abstände angibt, um abwechselnd eine Linie und eine Lücke zu zeichnen.

Wenn die Anzahl der Elemente im Array ungerade ist, werden die Elemente des Arrays kopiert und verkettet. Zum Beispiel wird [5, 15, 25] zu [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.

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

Wenn Sie die Transformationsmatrix direkt ändern, können Sie Skalierungs-, Rotations- und Translations-Transformationen 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 der horizontalen (x) Richtung ist

  

• c der Schrägstellungsfaktor in x-Richtung ist

  

• e die Verschiebung in x-Richtung ist

  

• b der Schrägstellungsfaktor 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ägstellungsfaktoren sind Vielfache; e und f sind Koordinatenraumeinheiten, genau wie die Einheiten in der Methode translate(x,y).

Siehe auch transform().

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

Zeichnet die Unterpfade mit dem aktuellen Zeichenstil.

Siehe auch strokeStyle und W3C 2d context standard for stroke.

Zeichnet den Pfad 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.

Streicht die angegebene text an einer durch (x, y) angegebenen Position.

Siehe auch font, textAlign, textBaseline, und fillText.

Fügt die angegebene text dem Pfad als eine Reihe geschlossener Unterpfade hinzu, die aus der übergebenen aktuellen Kontextschriftart erstellt werden.

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

Diese Methode ist setTransform() sehr ähnlich, aber anstatt die alte Transformationsmatrix zu ersetzen, wendet diese Methode die gegebene Transformationsmatrix auf die aktuelle Matrix an, indem sie mit ihr multipliziert wird.

Die Methode setTransform(a, b, c, d, e, f) setzt die aktuelle Transformation auf die Identitätsmatrix zurück und ruft dann die Methode transform(a, b, c, d, e, f) mit denselben Argumenten auf.

Siehe auch setTransform().

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

Die Verschiebung des Ursprungs ermöglicht es Ihnen, Muster verschiedener Objekte auf der Leinwand zu zeichnen, ohne die Koordinaten für jede Form manuell messen zu müssen.