Canvas2DContext QML Type

Stellt einen 2D-Kontext zum Zeichnen auf einem „ Canvas2D “-Element bereit. Mehr...

Dieser Typ befindet sich in der Technologievorschau und kann sich noch ändern.

• Liste aller Mitglieder, einschließlich geerbter Mitglieder

Eigenschaften

• antialias : real
• canvas : Canvas2D
• direction : string
• fillRule : string
• fillStyle : variant
• font : string
• globalAlpha : real
• globalBrightness : real
• globalCompositeOperation : string
• globalContrast : real
• globalSaturation : real
• highQualityStroking : bool
• lineCap : string
• lineJoin : string
• lineWidth : real
• miterLimit : real
• strokeStyle : variant
• textAlign : string
• textAntialias : real
• textBaseline : string
• textLineHeight : real
• textWrapMode : string
• windingEnforce : bool

Methoden

• void addPath(path2d path, transform2d transform)
• void addPath(path2d path, int start, int count, transform2d transform)
• void arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• void arcTo(real x1, real y1, real x2, real y2, real radius)
• void beginHoleSubPath()
• void beginPath()
• void beginSolidSubPath()
• void bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• void circle(real centerX, real centerY, real radius)
• void cleanupResources()
• void clearRect(real x, real y, real width, real height)
• void closePath()
• boxgradient2d createBoxGradient(real x, real y, real width, real height, real feather, real radius)
• boxshadow2d createBoxShadow(real x, real y, real width, real height)
• boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radius)
• boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)
• conicalgradient2d createConicalGradient(real x, real y, real angle)
• gridpattern2d createGridPattern(real x, real y, real width, real height, string lineColor, string backgroundColor, real lineWidth, real feather, real angle)
• lineargradient2d createLinearGradient(real x0, real y0, real x1, real y1)
• path2d createPath2D()
• path2d createPath2D(path2d path)
• path2d createPath2D(string svgPath)
• imagepattern2d createPattern(Image image, string repetition)
• radialgradient2d createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• transform2d createTransform2D()
• void drawBoxShadow(boxshadow2d shadow)
• 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)
• void ellipse(real centerX, real centerY, real radiusX, real radiusY)
• void ellipseRect(real x, real y, real width, real height)
• void fill()
• void fill(string fillRule)
• void fill(path2d path, int pathGroup)
• void fill(path2d path, string fillRule, int pathGroup)
• void fillRect(real x, real y, real width, real height)
• void fillText(text, x, y, maxWidth)
• void fillText(text, x, y, width, height)
• transform2d getTransform()
• void lineTo(real x, real y)
• object measureText(text)
• void moveTo(real x, real y)
• void quadraticCurveTo(real cpx, real cpy, real x, real y)
• void rect(real x, real y, real width, real height)
• void removePathGroup(int pathGroup)
• void reset()
• void resetClipping()
• void resetTransform()
• void restore()
• void rotate(real angle)
• void roundRect(real x, real y, real width, real height, real radius)
• void roundRect(real x, real y, real width, real height, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)
• void save()
• void scale(real scale)
• void scale(real sx, real sy)
• void setClipRect(real x, real y, real width, real height)
• void setPathWinding(string winding)
• void setTransform(transform2d transform)
• void setTransform(real a, real b, real c, real d, real e, real f)
• void skew(real angleX, real angleY)
• void stroke()
• void stroke(path2d path, int pathGroup)
• void strokeRect(real x, real y, real width, real height)
• void transform(transform2d transform)
• void transform(real a, real b, real c, real d, real e, real f)
• void translate(real x, real y)

Ausführliche Beschreibung

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

Canvas2D {
  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 Render ing-Kontext bereit, der die Methoden und Attribute definiert, die zum Zeichnen auf dem Canvas -Element benötigt werden. Im folgenden Beispiel wird der Canvas-Rendering-Kontext einer context -Variablen zugewiesen:

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

Hier ist ein einfaches Beispiel für die Verwendung von „ Canvas2D “ zum Erstellen einer runden Schaltfläche.

let offsetX = 2; let offsetY = 4; let shadow = ctx.createBoxShadow(40 + offsetX, 70 + offsetY, 120, 60); shadow.setRadius(30); shadow.setBlur(15); shadow.setColor("#60373F26"); ctx.drawBoxShadow(shadow); // Paint rounded rect ctx.beginPath(); ctx.roundRect(40, 70, 120, 60, 30); ctx.fillStyle = "#DBEB00"; ctx.fill(); // Paint text ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "24px 'Titillium Web'"; ctx.fillStyle = "#373F26"; ctx.fillText("CLICK!", 100, 100);

Hier ist ein weiteres Beispiel für das Zeichnen eines einfachen Diagramms.

// Paint grid const grid = ctx.createGridPattern(0, 0, 10, 10, "#404040", "#202020"); const w = 200; const h = 200; ctx.fillStyle = grid; ctx.fillRect(0, 0, w, h); // Paint axis ctx.fillStyle = "white"; ctx.fillRect(0, 0.5 * h - 1, w, 2); ctx.fillRect(0.5 * w - 1, 0, 2, h); // Paint shadowed graph ctx.beginPath(); ctx.moveTo(20, h * 0.8); ctx.bezierCurveTo(w * 0.2, h * 0.4, w * 0.5, h * 0.8, w - 20, h * 0.2); ctx.antialias = 10; ctx.lineWidth = 12; ctx.strokeStyle = "#D0000000"; ctx.stroke(); ctx.antialias = 1; ctx.lineWidth = 6; const lg = ctx.createLinearGradient(0, 0, 0, h); lg.addColorStop(0, "red"); lg.addColorStop(1, "green"); ctx.strokeStyle = lg; ctx.stroke();

Dokumentation zu den Eigenschaften

antialias : real

Speichert den aktuellen Antialiasing-Wert. Ein höherer Antialiasing-Wert sorgt für eine glattere Darstellung. Dies wirkt sich nur auf das Ausfüllen und Zeichnen von Konturen aus, nicht auf Bilder oder Texte. Der Standardwert ist 1.0 und der Maximalwert ist 10.0.

Das Antialiasing kann pro Pfad angepasst werden, sodass es vor jedem Strich bzw. jeder Füllung festgelegt werden kann.

ctx.lineWidth = 6; for (let i = 1; i < 10 ; i++) { let y = i * 20; ctx.antialias = i; ctx.beginPath(); ctx.moveTo(20, y); ctx.bezierCurveTo(80, y + 20, 120, y - 20, 180, y); ctx.stroke(); }

Siehe auch textAntialias.

canvas : Canvas2D

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

Diese Eigenschaft ist schreibgeschützt.

direction : string

Enthält die aktuelle Richtung, die zum Zeichnen von Text verwendet wird. Mögliche Werte sind:

Die Standardrichtung ist „ "inherit" “.

ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.font = "42px 'Titillium Web'"; ctx.fillStyle = "black"; ctx.fillText("Hi!", 100, 50); ctx.direction = "rtl"; ctx.fillText("Hi!", 100, 150);

fillRule : string

Enthält die aktuell verwendete Füllregel zum Ausfüllen von Formen. Dieser Wert wird auf alle Aufrufe von ` fill()` angewendet, nachdem die Regel festgelegt wurde. Die Standard-Füllregel lautet "nonzero"

Die folgenden Füllregeln werden unterstützt:

function paintStar() { ctx.beginPath(); ctx.moveTo(120, 60); for (let i = 1; i < 6; ++i) { ctx.lineTo(60 + 60 * Math.cos(0.8 * i * Math.PI), 60 + 60 * Math.sin(0.8 * i * Math.PI)); } ctx.fill(); ctx.stroke(); }; ctx.fillRule = "nonzero"; paintStar(); ctx.translate(75, 75); ctx.fillRule = "evenodd"; paintStar();

Siehe auch fill().

fillStyle : variant

Enthält den aktuell für die Füllung von Formen verwendeten Stil. Der Standard-Füllstil ist deckendes Schwarz („#000000“). Der Stil kann entweder eine Zeichenkette sein, die eine CSS-Farbe enthält, QML color oder ein Canvas-Pinselobjekt. 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'
• „#AARRGGBB“ – zum Beispiel: „#8000FFCC“
• SVG-Farbname – zum Beispiel: „black“, „green“ oder „lightsteelblue“
• Qt.hsla(Farbton, Sättigung, Helligkeit, Alpha) – zum Beispiel: Qt.hsla(0,3; 0,7; 1; 1,0)
• Qt.rgba(Rot, Grün, Blau, Alpha) – zum Beispiel: Qt.rgba(0,3, 0,7, 1, 1,0)

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

ctx.fillStyle = "black"; ctx.fillRect(20, 20, 160, 160); ctx.fillStyle = Qt.rgba(0, 0.25, 0.3, 1); ctx.fillRect(40, 40, 120, 120); ctx.fillStyle = "#2CDE85"; ctx.fillRect(60, 60, 80, 80);

const g2 = ctx.createRadialGradient(140, 40, 0, 300); g2.addColorStop(0, Qt.rgba(0.2, 0.8, 0.6)); g2.addColorStop(1, Qt.rgba(0, 0.25, 0.3, 1)); ctx.fillStyle = g2; ctx.fillRect(20, 20, 160, 160); g2.setCenterPosition(100, 100); ctx.fillStyle = g2; ctx.fillRect(40, 40, 120, 120);

Siehe auch createLinearGradient(), createRadialGradient(), createConicalGradient(), createBoxGradient(), createBoxShadow(), createPattern(), createGridPattern() 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 (Transparenz), der bei der Darstellung angewendet wird. Dieser Alpha-Wert wird auf alle gerenderten Formen angewendet. Bereits transparente Pfade werden ebenfalls proportional transparenter. Der Alpha-Wert sollte zwischen 0,0 (vollständig transparent) und 1,0 (vollständig undurchsichtig) liegen. Standardmäßig beträgt der Alpha-Wert „ 1.0 “.

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalAlpha = 1.0 - i * 0.3; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

globalBrightness : real

Enthält den aktuellen Helligkeitswert, der auf die Rendering-Vorgänge angewendet wird. Diese Helligkeit wird auf alle gerenderten Formen angewendet. Bei einem Wert von 0 wird die Darstellung komplett schwarz. Der Wert kann auch größer als 1,0 sein, um die Helligkeit zu erhöhen. Standardmäßig beträgt die Helligkeit „ 1.0 “.

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalBrightness = 1.5 - i * 0.45; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

globalCompositeOperation : string

Hält den aktuellen Kompositionsvorgang aufrecht. Dieser Modus gilt für alle Malvorgänge. Zulässige Vorgänge sind:

const modes = ["source-over", "source-atop", "destination-out"]; for (let i = 0; i < modes.length; i++) { // First item - source-over mode ctx.globalCompositeOperation = "source-over"; let y = 5 + i * 65; ctx.fillStyle = "#D9F720"; ctx.fillRect(20, y, 140, 40); // Second item - Different modes ctx.globalCompositeOperation = modes[i]; ctx.beginPath(); ctx.ellipse(130, y + 30, 60, 25); ctx.strokeStyle = "#00414A"; ctx.fillStyle = "#2CDE85"; ctx.fill(); ctx.stroke(); }

globalContrast : real

Speichert den aktuellen Kontrastwert, der bei der Darstellung angewendet wird. Dieser Kontrast wird auf alle dargestellten Formen angewendet. Bei einem Wert von 0 wird die Darstellung vollständig grau (0,5; 0,5; 0,5). Der Wert kann auch größer als 1,0 sein, um den Kontrast zu erhöhen. Standardmäßig beträgt der Kontrast 1.0.

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalContrast = 1.5 - i * 0.45; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

globalSaturation : real

Speichert den aktuellen Sättigungswert, der auf die Rendering-Vorgänge angewendet wird. Diese Sättigung wird auf alle gerenderten Formen angewendet. Der Wert 0 deaktiviert die Sättigung, sodass die Darstellung vollständig in Graustufen erfolgt. Der Wert kann auch größer als 1,0 sein, um die Sättigung zu erhöhen. Standardmäßig beträgt die Sättigung „ 1.0 “.

ctx.fillStyle = "#d9f720"; for (let i = 0; i < 4; i++) { let x = 100 * (i % 2); let y = 100 * Math.floor(i / 2); ctx.globalSaturation = 1.5 - i * 0.5; ctx.fillRect(x, y, 100, 100); ctx.drawImage("qt_logo2.png", x, y, 100, 100); }

highQualityStroking : bool

Behält den aktuellen Status für die hochwertige Strichdarstellung bei. Die Einstellung „ true “ sorgt in einigen selteneren Fällen, in denen sich Striche überlappen und nicht vollständig deckend sind, für eine korrektere Darstellung. Die Aktivierung dieser Option führt zu einem höheren Rendering-Aufwand. Der Standardwert ist „ false “.

// Increase the line width and reduce opacity to get // the stroking flaws visible. ctx.lineWidth = 20; ctx.globalAlpha = 0.5; if (myPath.isEmpty()) { myPath.moveTo(30, 30); myPath.lineTo(40, 30); myPath.lineTo(80, 170); myPath.lineTo(80, 30); myPath.lineTo(70, 30); } ctx.highQualityStroking = true; ctx.stroke(myPath); ctx.highQualityStroking = false; ctx.translate(90, 0); ctx.stroke(myPath);

lineCap : string

Speichert den aktuellen Stil der Linienenden. Folgende Stile für Linienenden sind möglich:

let path = ctx.createPath2D(); path.moveTo(40, 60); path.lineTo(160, 60); ctx.lineCap = "butt"; ctx.stroke(path); ctx.lineCap = "square"; ctx.translate(0, 40); ctx.stroke(path); ctx.lineCap = "round"; ctx.translate(0, 40); ctx.stroke(path);

lineJoin : string

Enthält 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 Verbindungsstile für Linien sind:

let path = ctx.createPath2D(); path.moveTo(40, 20); path.lineTo(100, 80); path.lineTo(160, 40); path.lineTo(160, 70); ctx.lineJoin = "miter"; ctx.stroke(path); ctx.lineJoin = "bevel"; ctx.translate(0, 50); ctx.stroke(path); ctx.lineJoin = "round"; ctx.translate(0, 50); ctx.stroke(path);

Siehe auch „ miterLimit “.

lineWidth : real

Speichert die aktuelle Linienbreite. Die Standard-Linienbreite beträgt „ 1.0 “. Wenn Antialiasing aktiviert ist, wird die Deckkraft der Linienbreiten, die unter ein einzelnes Pixel fallen, automatisch ausgeblendet, wodurch eine glatte Darstellung entsteht.

for (let i = 1; i < 10 ; i++) { let y = i * 20; ctx.lineWidth = 0.5 * i; ctx.beginPath(); ctx.moveTo(20, y); ctx.bezierCurveTo(80, y + 20, 120, y - 20, 180, y); ctx.stroke(); }

Siehe auch stroke().

miterLimit : real

Speichert die aktuelle Länge der Gehrungsbegrenzung. Die Gehrungsbegrenzung legt fest, wann eine scharfe Ecke abgeschrägt wird. Wenn die Ecklänge diesen Grenzwert überschreiten würde, wird stattdessen eine „Abschrägung“ lineJoin zwischen den Linien angewendet. Dies wirkt sich nur bei der Linienverbindung „Gehrung“ aus. Der Standardgrenzwert ist 10.0.

let path = ctx.createPath2D(); path.moveTo(20, 40); path.lineTo(30, 130); path.lineTo(40, 40); path.lineTo(55, 80); ctx.lineJoin = "miter"; ctx.miterLimit = 20; ctx.stroke(path); ctx.miterLimit = 8; ctx.translate(65, 0); ctx.stroke(path); ctx.miterLimit = 2; ctx.translate(65, 0); ctx.stroke(path);

Siehe auch „ lineJoin “.

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, QML color oder ein Canvas-Pinselobjekt sein. Ungültige Werte werden ignoriert.

Der Standardwert ist Schwarz („#000000“).

ctx.strokeStyle = "black"; ctx.strokeRect(20, 20, 160, 160); ctx.strokeStyle = Qt.rgba(0, 0.25, 0.3, 1); ctx.strokeRect(40, 40, 120, 120); ctx.strokeStyle = "#2CDE85"; ctx.strokeRect(60, 60, 80, 80);

const g1 = ctx.createLinearGradient(180, 20, 20, 180); g1.addColorStop(0, Qt.rgba(0.2, 0.8, 0.6)); g1.addColorStop(1, "black"); ctx.strokeStyle = g1; ctx.strokeRect(20, 20, 160, 160); g1.addColorStop(1, "yellow"); ctx.strokeStyle = g1; ctx.strokeRect(40, 40, 120, 120);

Siehe auch createLinearGradient(), createRadialGradient(), createConicalGradient(), createBoxGradient(), createBoxShadow(), createPattern(), createGridPattern() und fillStyle.

textAlign : string

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

ctx.font = "22px 'Titillium Web'"; ctx.fillRect(100, 0, 1, 200); ctx.textAlign = "left"; ctx.fillText("Left", 100, 40); ctx.textAlign = "center"; ctx.fillText("Center", 100, 70); ctx.textAlign = "right"; ctx.fillText("Right", 100, 100); ctx.textAlign = "start"; ctx.fillText("Start", 100, 130); ctx.textAlign = "end"; ctx.fillText("End", 100, 160);

Siehe auch textBaseline.

textAntialias : real

Enthält den aktuellen Wert für die Text-Antialiasing-Stärke. Der Wert ist ein Multiplikator für das normale Antialiasing, d. h., dass „ 0.0 “ das Antialiasing deaktiviert und „ 2.0 “ es verdoppelt. Der Standardwert is t 1,0.

ctx.font = "22px 'Titillium Web'"; ctx.textAntialias = 1.0; ctx.fillText("Antialiasing: 1.0", 100, 25); ctx.textAntialias = 2.0; ctx.fillText("Antialiasing: 2.0", 100, 75); ctx.textAntialias = 3.0; ctx.fillText("Antialiasing: 3.0", 100, 125); ctx.textAntialias = 4.0; ctx.fillText("Antialiasing: 4.0", 100, 175);

textBaseline : string

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

ctx.font = "22px 'Titillium Web'"; ctx.fillRect(0, 60, 200, 1); ctx.fillRect(0, 140, 200, 1); ctx.textBaseline = "bottom"; ctx.fillText("Bottom", 40, 60); ctx.textBaseline = "middle"; ctx.fillText("Middle", 100, 60); ctx.textBaseline = "top"; ctx.fillText("Top", 160, 60); ctx.textBaseline = "alphabetic"; ctx.fillText("Alphabetic", 50, 140); ctx.textBaseline = "hanging"; ctx.fillText("Hanging", 150, 140);

Siehe auch „ textAlign “.

textLineHeight : real

Enthält den aktuellen Wert für die Anpassung der Zeilenhöhe in Pixeln. Die Standardzeilenhöhe beträgt 0.

ctx.strokeRect(40, 5, 120, 60); ctx.strokeRect(40, 70, 120, 60); ctx.strokeRect(40, 135, 120, 60); ctx.textLineHeight = -10; ctx.fillText("Text with line height: -10", 40, 5, 120, 60); ctx.textLineHeight = 0; ctx.fillText("Text with line height: 0", 40, 70, 120, 60); ctx.textLineHeight = 10; ctx.fillText("Text with line height: 10", 40, 135, 120, 60);

textWrapMode : string

Speichert den aktuellen Zeilenumbruchmodus, d. h., wie der Text auf mehrere Zeilen umgebrochen wird. Mögliche Werte sind:

Der Standard-Zeilenumbruchmodus ist „ "nowrap" “.

ctx.strokeRect(50, 5, 100, 60); ctx.strokeRect(50, 70, 100, 60); ctx.strokeRect(50, 135, 100, 60); let s = "This is a long string."; ctx.textWrapMode = "nowrap"; ctx.fillText(s, 50, 5, 100, 60); ctx.textWrapMode = "wrap"; ctx.fillText(s, 50, 70, 100, 60); ctx.textWrapMode = "wrapanywhere"; ctx.fillText(s, 50, 135, 100, 60);

windingEnforce : bool

Behält den aktuellen Status der erzwungenen Kurvenführung bei. Durch Setzen auf „ false “ wird die erzwungene Kurvenführung deaktiviert, sodass die Kurvenführung den in „ setPathWinding()“ festgelegten Einstellungen entspricht. Durch die Deaktivierung können beispielsweise Lücken in Pfaden erzeugt werden, indem Punkte im Uhrzeigersinn hinzugefügt werden. Die Deaktivierung kann zudem die Leistung steigern. Der Standardwert ist „ true “.

ctx.windingEnforce = false; ctx.beginPath(); // Outer shape, counterclockwise ctx.moveTo(20, 20); ctx.lineTo(100, 180); ctx.lineTo(180, 20); ctx.closePath(); // Inner shape, clockwise ctx.moveTo(100, 40); ctx.lineTo(125, 90); ctx.lineTo(75, 90); ctx.closePath(); ctx.fill(); ctx.stroke();

Methodendokumentation

void addPath(path2d path, transform2d transform)

Fügt „ path “ in den aktuellen Pfad ein und verwendet dabei optional „ transform “, um die Pfadpunkte zu ändern. Wenn „ transform “ nicht angegeben wird (oder es sich um die Einheitsmatrix handelt), ist dieser Vorgang sehr schnell, da die Pfaddaten wiederverwendet werden.

// myPath is path2d property if (myPath.isEmpty()) myPath.circle(60, 60, 40); ctx.beginPath(); ctx.addPath(myPath); let t = ctx.createTransform2D(); t.translate(80, 80); ctx.addPath(myPath, t); ctx.fill(); ctx.stroke();

void addPath(path2d path, int start, int count, transform2d transform)

Fügt „ path “ in den aktuellen Pfad ein, beginnend mit dem Befehl unter start und einschließlich count Befehlen. Optional kann transform verwendet werden, um die Pfadpunkte zu ändern. Der Bereich von start bis count wird überprüft, damit nicht auf mehr Befehle zugegriffen wird, als der Pfad enthält. Falls der Pfad nicht von der aktuellen Pfadposition aus fortgesetzt werden soll, rufen Sie zunächst moveTo() auf.

// myPath is QCanvasPath if (myPath.isEmpty()) { myPath.moveTo(20, 60); for (let i = 1; i < 160; i++) { myPath.lineTo(20 + i, 60 + 20 * Math.sin(0.1 * i)); } } ctx.stroke(myPath); ctx.beginPath(); let t = ctx.createTransform2D(); t.translate(0, 80); ctx.addPath(myPath, 20, 100, t); ctx.stroke();

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

Erstellt einen neuen Teilpfad in Form eines Kreisbogens. Der Mittelpunkt des Bogens liegt bei x, y, mit radius, und der Bogen wird vom Winkel startAngle bis endAngle gezeichnet. Die Standardrichtung der Kurve ist im Uhrzeigersinn. Um die Richtung in die entgegengesetzte zu ändern, setzen Sie anticlockwise auf „true“. Winkel werden in Radianten angegeben.

ctx.beginPath(); ctx.moveTo(100, 100); ctx.arc(100, 100, 80, 0, 1.5 * Math.PI); ctx.closePath(); ctx.fill(); ctx.stroke();

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

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

Fügt ein Bogensegment an der Ecke ein, die durch den letzten Pfadpunkt und zwei angegebene Punkte (x1, y1 und x2, y2) mit dem Wert „ radius “ definiert wird. Der Bogen wird bei Bedarf automatisch mit einer geraden Linie an den letzten Punkt des Pfades angeschlossen.

ctx.beginPath(); ctx.moveTo(20, 20); ctx.arcTo(240, 20, 20, 220, 50); ctx.arcTo(20, 220, 20, 20, 30); ctx.stroke();

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

void beginHoleSubPath()

Einen Teilpfad für ein Loch beginnen. Dies entspricht setPathWinding("clockwise")

ctx.beginPath(); ctx.circle(100, 100, 80); ctx.beginHoleSubPath(); ctx.rect(60, 60, 80, 80); ctx.beginSolidSubPath(); ctx.circle(100, 100, 20); ctx.fill(); ctx.stroke();

Siehe auch ` beginSolidSubPath()`.

void beginPath()

Beginnt mit dem Zeichnen eines neuen Pfades und löscht dabei den aktuellen Pfad.

void beginSolidSubPath()

Starte einen festen Teilpfad. Dies entspricht setPathWinding("counterclockwise")

Siehe auch beginHoleSubPath().

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

Fügt ein kubisches Bézier-Segment vom letzten Punkt des Pfades über zwei Kontrollpunkte (cp1x, cp1y und cp2x, cp2y) bis zum angegebenen Punkt (x, y) hinzu.

ctx.beginPath(); ctx.moveTo(20, 20); ctx.bezierCurveTo(150, 50, 50, 250, 180, 120); ctx.stroke();

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

void circle(real centerX, real centerY, real radius)

Erstellt einen neuen kreisförmigen Teilpfad, dessen Mittelpunkt bei ( centerX, centerY) liegt und dessen Radius radius beträgt.

ctx.beginPath(); ctx.circle(100, 100, 80); ctx.fill(); ctx.stroke();

void cleanupResources()

Entfernt nicht verwendete Texturen aus dem Cache.

Zudem können beim Aufruf dieser Funktion andere Caches und Pools verkleinert werden, um den Speicherverbrauch zu minimieren. Dies kann möglicherweise zu aufwändigeren Zeichenaufrufen im Anschluss führen.

void clearRect(real x, real y, real width, real height)

Löscht die Pixel in einem rechteckigen Bereich, indem das durch x, y, width und height angegebene Rechteck mit transparentem Schwarz gefüllt wird. Da das Löschen keine Überblendung erfordert, kann es schneller sein als fillRect().

ctx.beginPath(); ctx.circle(100, 100, 80); ctx.fill(); ctx.stroke(); ctx.clearRect(60, 0, 80, 120);

void 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“.

boxgradient2d createBoxGradient(real x, real y, real width, real height, real feather, real radius)

Gibt ein „ boxgradient2d “-Objekt zurück, das einen Box-Farbverlauf darstellt, der den Rechteckbereich (x, y, width, height) mit einer Auslaufkante (Glättung) feather und einem Eckenradius radius abdeckt.

const bg = ctx.createBoxGradient(20, 20, 160, 160, 20, 50); bg.addColorStop(0.0, "#1a2a6c"); bg.addColorStop(0.2, "#fdbb2d"); bg.addColorStop(1.0, "transparent"); ctx.fillStyle = bg; ctx.fillRect(20, 20, 160, 160);

Siehe auch boxgradient2d::addColorStop(), fillStyle und strokeStyle.

boxshadow2d createBoxShadow(real x, real y, real width, real height)

Gibt ein „ boxshadow2d “-Objekt zurück, das einen Box-Schatten darstellt, der den Bereich des Rechtecks abdeckt (x, y, width, height).

let offsetX = -2; let offsetY = 4; let shadow = ctx.createBoxShadow(40 + offsetX, 40 + offsetY, 120, 120); shadow.setBlur(30); shadow.setColor("black"); ctx.drawBoxShadow(shadow); ctx.beginPath(); ctx.roundRect(40, 40, 120, 120, 30); ctx.fillStyle = "#2CDE85"; ctx.fill();

Siehe auch drawBoxShadow().

boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radius)

Gibt ein „ boxshadow2d “-Objekt mit der Farbe color zurück, das einen Kastenschatten darstellt, der den Rechteckbereich (x, y, width, height) mit der Unschärfe blur und dem Eckenradius radius abdeckt.

Siehe auch drawBoxShadow().

boxshadow2d createBoxShadow(real x, real y, real width, real height, real blur, string color, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)

Gibt ein „ boxshadow2d “-Objekt mit der Farb color zurück, das einen Kastenschatten darstellt, der den Rechteckbereich (x, y, width, height) mit der Unschärfe blur und dem Eckenradius (radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft) abdeckt.

Siehe auch drawBoxShadow().

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

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

const cg = ctx.createConicalGradient(100, 100, 1.75 * Math.PI); cg.addColorStop(0.0, "#fdbb2d"); cg.addColorStop(0.5, "#1a2a6c"); cg.addColorStop(1.0, "#fdbb2d"); ctx.fillStyle = cg; ctx.beginPath(); ctx.ellipseRect(20, 20, 160, 160); ctx.fill();

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

gridpattern2d createGridPattern(real x, real y, real width, real height, string lineColor, string backgroundColor, real lineWidth, real feather, real angle)

Gibt ein „ gridpattern2d “-Objekt zurück, das den rechteckigen Bereich abdeckt (x, y, width, height). Das Raster verwendet „ lineColor “ für die Linien und „ backgroundColor “ für den Hintergrund. Die Linienbreite beträgt „ lineWidth “, die Linienauslaufkante „ feather “ und der Drehwinkel „ angle “ in Radianten.

const grid = ctx.createGridPattern(0, 0, 10, 10, "#404040", "#202020"); ctx.fillStyle = grid; ctx.fillRect(0, 0, 200, 200);

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

Gibt ein „ lineargradient2d “-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.

Farbverläufe müssen zwei oder mehr Farbstopps aufweisen, die Farbverläufe zwischen 0 und 1 zwischen dem Start- und Endpunkt des Farbverlaufs darstellen.

const lg = ctx.createLinearGradient(0, 0, 200, 200); lg.addColorStop(0.0, "#1a2a6c"); lg.addColorStop(0.5, "#b21f1f"); lg.addColorStop(1.0, "#fdbb2d"); ctx.fillStyle = lg; ctx.fillRect(0, 0, 200, 200);

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

path2d createPath2D()

Gibt ein neues „path2d“-Objekt zurück. Der Aufruf dieser Funktion entspricht dem HTML-Canvas-Befehl „new Path2D()“.

Siehe auch „ fill()“ und „ stroke()“.

path2d createPath2D(path2d path)

Gibt ein neues „path2d“-Objekt zurück, das eine Kopie von path enthält. Der Aufruf dieser Funktion entspricht dem HTML-Canvas-Befehl „new Path2D(path)“.

Siehe auch „ fill()“ und „ stroke()“.

path2d createPath2D(string svgPath)

Gibt ein neues `Path2D`-Objekt zurück, dessen Inhalt dem von ` svgPath` entspricht. Der Aufruf dieser Funktion entspricht dem HTML-Canvas-Befehl „new Path2D(d)“.

Siehe auch „ fill()“ und „ stroke()“.

imagepattern2d createPattern(Image image, string repetition)

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

Der Parameter ` image ` muss ein gültiges `Image`-Element oder eine geladene Bild-URL sein. Wenn keine Bilddaten vorhanden sind, löst diese 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.

let ip1 = ctx.createPattern("pattern2.png", "repeat"); let ip2 = ctx.createPattern("pattern3.png", "repeat"); ip1.setImageSize(64, 64); ip2.setImageSize(32, 32); ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 40); ctx.fillStyle = ip1; ctx.strokeStyle = ip2; ctx.fill(); ctx.lineWidth = 20; ctx.stroke();

Siehe auch strokeStyle und fillStyle.

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

Gibt ein „ radialgradient2d “-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.

Da nur 4 Parameter vorhanden sind, werden diese als (x, y, r0, r1) verwendet, wobei die Mittelpunktposition für den inneren und den äußeren Radius identisch ist.

const rg = ctx.createRadialGradient(100, 100, 0, 100); rg.addColorStop(0.0, "#fdbb2d"); rg.addColorStop(0.6, "#b21f1f"); rg.addColorStop(1.0, "#1a2a6c"); ctx.fillStyle = rg; ctx.fillRect(0, 0, 200, 200);

const rg = ctx.createRadialGradient(50, 50, 0, 100, 100, 90); rg.addColorStop(0.0, "black"); rg.addColorStop(1.0, "white"); ctx.fillStyle = rg; ctx.fillRect(0, 0, 200, 200);

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

transform2d createTransform2D()

Gibt ein neues `transform2d`-Objekt zurück, das mit der Einheitsmatrix initialisiert ist.

Siehe auch ` getTransform()`.

void drawBoxShadow(boxshadow2d shadow)

Zeichnet ein angegebenes Rechteck shadow. Der Schatten wird mit Position, Größe, Farbe, Weichzeichnung usw. gezeichnet, die durch shadow definiert sind. Ein vorheriger Aufruf von beginPath() ist nicht erforderlich.

let offsetX = -2; let offsetY = 4; let shadow = ctx.createBoxShadow(40 + offsetX, 40 + offsetY, 120, 120, 30, "black", 0); ctx.drawBoxShadow(shadow); ctx.beginPath(); ctx.roundRect(40, 40, 120, 120, 30); ctx.fillStyle = "#2CDE85"; ctx.fill();

Siehe auch createBoxShadow().

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 oder eine Bild-URL sein. Wenn ein „Image“-Element angegeben wird und das Bild noch nicht vollständig geladen ist, zeichnet diese Methode nichts. Wenn eine URL-Zeichenkette angegeben wird, sollte das Bild zuvor durch Aufruf der Methode „ Canvas2D::loadImage()“ des „Canvas“-Elements geladen werden. Diese Zeichnung unterliegt dem aktuellen Kontext-Clip-Pfad.

ctx.drawImage("qt_logo.png", 36, 36);

Siehe auch „Image“, „ Canvas2D::loadImage “, „ Canvas2D::isImageLoaded “, „ Canvas2D::imageLoaded “ und 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 die Leinwand am Punkt (dx, dy) mit der Breite „ dw “ und der Höhe „ dh “.

ctx.drawImage("qt_logo.png", 50, 0, 100, 200);

Siehe auch „Image“, „ Canvas2D::loadImage()“, „ Canvas2D::isImageLoaded “, „ Canvas2D::imageLoaded “ und 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) sowie der Quellbreite sw und der Quellhöhe sh auf die Leinwand am Punkt (dx, dy) mit der Breite dw und der Höhe dh.

ctx.drawImage("qt_logo.png", 20, 30, 54, 76, 0, 0, 200, 200);

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

void ellipse(real centerX, real centerY, real radiusX, real radiusY)

Erstellt einen neuen ellipsenförmigen Teilpfad, dessen Mittelpunkt bei ( centerX, centerY) liegt und dessen Radius radiusX und radiusY beträgt.

ctx.beginPath(); ctx.ellipse(100, 100, 80, 60); ctx.fill(); ctx.stroke();

void ellipseRect(real x, real y, real width, real height)

Erstellt einen neuen ellipsenförmigen Teilpfad innerhalb des Rechtecks: x, y, width, height. Diese Ellipse bedeckt den Bereich des Rechtecks.

ctx.fillRect(40, 20, 120, 160); ctx.beginPath(); ctx.ellipseRect(40, 20, 120, 160); ctx.stroke();

void fill()

Füllt den aktuellen Pfad mit dem aktuellen Füllstil und der aktuellen Füllregel.

ctx.beginPath(); ctx.rect(20, 20, 40, 160); ctx.rect(140, 20, 40, 160); ctx.circle(100, 100, 60); ctx.fill();

Siehe auch „ fillStyle “, „ fillRule “ und den W3C-Standard für 2D-Kontexte zum Thema „Füllung“.

void fill(string fillRule)

Füllt den aktuellen Pfad mit dem aktuellen Füllstil und der Füllregel „ fillRule “.

Siehe auch fillStyle und fillRule.

void fill(path2d path, int pathGroup)

Füllt den „ path “ mit dem aktuellen Füllstil und der aktuellen Füllregel und ordnet ihn dem optionalen „ pathGroup “ zu. Das Zeichnen über „ QCanvasPath “ ist optimal, wenn der Pfad mehr Befehle enthält und größtenteils statisch ist.

Wenn „ pathGroup “ auf „ -1 “ gesetzt ist, wird der Pfad nicht auf der GPU-Seite zwischengespeichert. Dies ist die Standardeinstellung. Um die Zwischenspeicherung von Pfaddaten anzufordern, übergeben Sie einen Wert, der gleich oder größer als „ 0 “ ist. Weitere Informationen zur Verwendung von Pfad-Cache-Gruppen finden Sie in der Dokumentation unter „ QCanvasPath “.

Ein Aufruf von ` beginPath()` vor dieser Methode ist nicht erforderlich.

// myPath is path2d if (myPath.isEmpty()) { for (let i = 0; i < 16; i++) { let w = 100 + 60 * Math.sin(i); myPath.rect(100 - w * 0.5, 22 + i * 10, w, 6); } } ctx.fill(myPath);

Siehe auch „ fillStyle “ und „ path2d “.

void fill(path2d path, string fillRule, int pathGroup)

Füllt die „ path “ mit dem aktuellen Füllstil und unter Verwendung von „ fillRule “. Der Cache-Gruppenparameter „ pathGroup “ ist optional.

Siehe auch „ fillStyle “, „ fillRule “ und „ path2d “.

void fillRect(real x, real y, real width, real height)

Zeichnet ein gefülltes Rechteck an der angegebenen Position ( x, y) mit der Größe width, height.

ctx.fillRect(20, 20, 160, 160); // The above code does same as: // ctx.beginPath(); // ctx.rect(20, 20, 160, 160); // ctx.fill();

Siehe auch fillStyle.

void fillText(text, x, y, maxWidth)

Zeichnet die Zeichenkette „ text “ an der angegebenen Stelle ( x, y) mit den aktuellen Werten für „ textAlign “ und „ textBaseline “. Um den Text in mehrere Zeilen umbrechen zu lassen, legen Sie den Zeilenumbruchmodus mithilfe von „ textWrapMode “ auf einen anderen Wert als den Standardwert „ "nowrap" “ fest. Der optionale Parameter „ maxWidth “ ist standardmäßig auf „ 0 “ gesetzt. Das bedeutet, dass der Text beispielsweise bei der Einstellung „ "wordwrap" “ nach jedem Wort umgebrochen wird. Setzen Sie den Parameter „ maxWidth “ auf die gewünschte Zeilenbreite in Pixeln.

ctx.textAlign = "center"; ctx.textBaseline = "middle"; const text = "Qt Canvas Painter"; ctx.fillText(text, 100, 30); ctx.textWrapMode = "wordwrap"; ctx.fillText(text, 100, 90); ctx.fillText(text, 100, 160, 120);

Siehe auch font, textAlign, textBaseline und textWrapMode.

void fillText(text, x, y, width, height)

Zeichnet die Zeichenkette „ text “ innerhalb des Rechtecks (x, y, width, height) mit den aktuellen Werten für „ textAlign “ und „ textBaseline “. Die Breite des Parameters „rect“ wird als „maxWidth“ verwendet.

Oft ist es sinnvoll, die Textgrundlinie auf TextBaseline::Top oder TextBaseline::Middle festzulegen, wenn Text mit dieser Methode gezeichnet wird.

ctx.textAlign = "center"; ctx.textBaseline = "middle"; const text = "Qt Canvas Painter"; ctx.strokeRect(10, 20, 180, 50); ctx.fillText(text, 10, 20, 180, 50); ctx.textWrapMode = "wordwrap"; ctx.strokeRect(60, 90, 80, 90); ctx.fillText(text, 60, 90, 80, 90);

Siehe auch font, textAlign, textBaseline und textWrapMode.

transform2d getTransform()

Gibt die aktuelle Transformationsmatrix zurück.

Siehe auch ` setTransform()`.

void lineTo(real x, real y)

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

ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(140, 180); ctx.lineTo(180, 120); ctx.stroke();

object measureText(text)

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

void moveTo(real x, real y)

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

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

Fügt ein quadratisches Bézier-Segment vom letzten Punkt des Pfades über einen Kontrollpunkt (cpx, cpy) bis zum angegebenen Punkt (x, y) hinzu.

ctx.beginPath(); ctx.moveTo(20, 20); ctx.quadraticCurveTo(150, 50, 180, 180); ctx.quadraticCurveTo(20, 220, 20, 20); ctx.fill(); ctx.stroke();

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

void rect(real x, real y, real width, real height)

Erstellt einen neuen rechteckigen Teilpfad an der Position x, y mit den Abmessungen width, height.

ctx.beginPath(); ctx.rect(20, 20, 160, 160); ctx.fill(); ctx.stroke();

void removePathGroup(int pathGroup)

Entfernt „ pathGroup “ aus dem Painter-Cache. Wenn anschließend „ fill()“ oder „ stroke()“ für „ pathGroup “ aufgerufen wird, wird der Pfad im Gruppen-Cache neu generiert.

Siehe auch „ fill()“ und „ stroke()“.

void reset()

Setzt den aktuellen Zustand des Painters auf die Standardwerte zurück.

// Adjust the paint state ctx.strokeStyle = "#00414A"; ctx.fillStyle = "#2CDE85"; ctx.lineWidth = 10; ctx.translate(100, 65); ctx.rotate(-0.4); ctx.translate(-100, -65); ctx.beginPath(); ctx.roundRect(20, 40, 160, 50, 20); ctx.fill(); ctx.stroke(); // Reset to default paint state ctx.reset(); ctx.fillRect(20, 140, 60, 40); ctx.strokeRect(120, 140, 60, 40);

Siehe auch „ save()“ und „ restore()“.

void resetClipping()

Setzt die Clipping-Einstellung zurück und deaktiviert sie.

Siehe auch „ setClipRect()“.

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

void restore()

Ruft den aktuellen Render-Zustand ab und stellt ihn wieder her. Der zuvor gespeicherte Zustand wird somit wiederhergestellt. Wenn save() noch nicht aufgerufen wurde und der Zustandsstapel leer ist, hat der Aufruf dieser Funktion keine Auswirkung.

Siehe auch ` save()`.

void rotate(real angle)

Dreht das aktuelle Koordinatensystem um angle im Uhrzeigersinn.

Der Winkel wird in Radianten angegeben.

ctx.translate(100, 100); ctx.rotate(Math.PI / 4); ctx.translate(-100, -100); ctx.beginPath(); ctx.roundRect(20, 70, 160, 60, 10); ctx.fill(); ctx.stroke(); ctx.fillStyle = "black"; ctx.fillText("Cute!", 100, 100);

void roundRect(real x, real y, real width, real height, real radius)

Erstellt einen neuen Teilpfad in Form eines abgerundeten Rechtecks an der Position x, y mit den Abmessungen width, height. Die Ecken werden wie folgt abgerundet: radius.

ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 30); ctx.fill(); ctx.stroke();

void roundRect(real x, real y, real width, real height, real radiusTopLeft, real radiusTopRight, real radiusBottomRight, real radiusBottomLeft)

Erstellt einen neuen Teilpfad in Form eines abgerundeten Rechtecks an der Position x, y mit den Abmessungen width, height. Die Eckenrundung kann je nach Ecke variieren, mit den Werten radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft.

ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 0, 40, 20, 80); ctx.fill(); ctx.stroke();

void save()

Speichert den aktuellen Render-Zustand in einem Zustandsstapel. Zum Wiederherstellen des Zustands muss die entsprechende Methode „ restore()“ aufgerufen werden.

ctx.strokeRect(20, 20, 160, 40); // Save and adjust the paint state ctx.save(); ctx.strokeStyle = "black"; ctx.lineWidth = 3; ctx.rotate(0.1); ctx.strokeRect(20, 80, 180, 20); // Restore the saved paint state ctx.restore(); ctx.strokeRect(20, 140, 160, 40);

Siehe auch ` restore()`.

void scale(real scale)

Skaliert das aktuelle Koordinatensystem um den Faktor scale. Sowohl die x- als auch die y-Koordinaten werden gleichmäßig skaliert.

for (let i = 0; i < 20; i++) { ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 10); ctx.stroke(); ctx.translate(100, 100); ctx.scale(0.8); ctx.translate(-100, -100); }

void scale(real sx, real sy)

Vergrößert oder verkleinert die Größe jeder Einheit im Canvas-Raster, indem die Skalierungsfaktoren mit der aktuellen Transformationsmatrix multipliziert werden. „ sx “ ist der Skalierungsfaktor in horizontaler Richtung und „ sy “ 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);

void setClipRect(real x, real y, real width, real height)

Setzt das aktuelle Ausschnittrechteck auf (x, y, width, height). Das Ausschnittrechteck wird durch die aktuelle Transformation transformiert.

ctx.setClipRect(20, 20, 160, 160); ctx.beginPath(); ctx.circle(40, 40, 110); ctx.fill(); ctx.fillStyle = "black"; ctx.fillText("Clip me...", 45, 100); ctx.strokeRect(20, 20, 160, 160);

Siehe auch resetClipping().

void setPathWinding(string winding)

Legt den aktuellen Teilpfad „ winding “ entweder auf „counterclockwise“ (Standard) oder „clockwise“ fest. Bei „counterclockwise“ werden geschlossene Teilpfade gezeichnet, bei „clockwise“ hingegen Löcher.

ctx.beginPath(); ctx.roundRect(20, 20, 160, 160, 40); ctx.setPathWinding("clockwise"); ctx.circle(140, 60, 20); ctx.rect(60, 120, 80, 30); ctx.fill(); ctx.stroke();

Siehe auch beginHoleSubPath() und beginSolidSubPath().

void setTransform(transform2d transform)

Setzt die aktuelle Transformation zurück und verwendet stattdessen „ transform “.

ctx.beginPath(); ctx.roundRect(80, 20, 40, 40, 10); ctx.fill(); ctx.stroke(); let t = ctx.createTransform2D(); t.translate(100, 20); t.rotate(45); t.scale(2.0, 2.0); ctx.setTransform(t); ctx.beginPath(); ctx.roundRect(20, 20, 40, 40, 10); ctx.fill(); ctx.stroke();

Siehe auch „ transform()“ und „ getTransform()“.

void 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:

• a der Skalierungsfaktor in horizontaler (x-)Richtung ist
• c der Schräglagefaktor in der x-Richtung ist
• e die Verschiebung in x-Richtung ist
• b der Schräglagenfaktor in der y-Richtung (vertikal) ist
• d der Skalierungsfaktor in y-Richtung ist
• f ist die Verschiebung in y-Richtung
• die letzte Zeile bleibt konstant

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

Siehe auch ` transform()`.

void skew(real angleX, real angleY)

Verschiebt (verzerrt) das aktuelle Koordinatensystem entlang der X-Achse um angleX und entlang der Y-Achse um angleY. Der Standardwert von angleY ist 0, wenn nur ein einziger Parameter angegeben wird. Die Winkel werden in Radianten angegeben.

ctx.translate(100, 100); ctx.skew(-0.6); ctx.translate(-100, -100); ctx.beginPath(); ctx.roundRect(40, 70, 120, 60, 10); ctx.fill(); ctx.stroke(); ctx.fillStyle = "black"; ctx.fillText("Cute!", 100, 100);

void stroke()

Zeichnet den aktuellen Pfad mit dem aktuellen Strichstil nach.

ctx.beginPath(); ctx.rect(20, 20, 40, 160); ctx.rect(140, 20, 40, 160); ctx.circle(100, 100, 60); ctx.stroke();

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

void stroke(path2d path, int pathGroup)

Zeichnet den Pfad „ path “ mit dem aktuellen Zeichenstil und ordnet ihn „ pathGroup “ zu. Das Zeichnen über „ QCanvasPath “ ist optimal, wenn der Pfad mehr Befehle enthält und weitgehend statisch ist.

Wenn „ pathGroup “ auf „ -1 “ gesetzt ist, werden die rendernbezogenen Daten des Pfades nicht zwischengespeichert. Dies ist die Standardeinstellung. Um die Zwischenspeicherung von Pfaddaten zu erzwingen, übergeben Sie einen Wert, der gleich oder größer als „ 0 “ ist. Weitere Informationen zur Verwendung von Pfad-Cache-Gruppen finden Sie in der Dokumentation zu „ QCanvasPath “.

Der Aufruf von ` beginPath()` vor dieser Methode ist nicht erforderlich.

// myPath is path2d if (myPath.isEmpty()) { for (let i = 0; i < 16; i++) { let h = 100 + 60 * Math.sin(i); myPath.rect(22 + i * 10, 180 - h, 6, h); } } ctx.stroke(myPath);

Siehe auch „ strokeStyle “, „ path2d “ und den W3C-2D-Kontextstandard für „stroke“.

void strokeRect(real x, real y, real width, real height)

Zeichnet ein umrandetes Rechteck an der angegebenen Position ( x, y) mit der Größe width, height.

ctx.strokeRect(20, 20, 160, 160); // The above code does same as: // ctx.beginPath(); // ctx.rect(20, 20, 160, 160); // ctx.stroke();

Siehe auch strokeStyle, lineWidth, lineJoin und miterLimit.

void transform(transform2d transform)

Multipliziert das aktuelle Koordinatensystem mit dem angegebenen Skalierungsfaktor transform.

let t = ctx.createTransform2D(); t.translate(100, 100); t.rotate(36); t.translate(-100, -100); for (let i = 0; i < 10; i++) { ctx.transform(t); ctx.beginPath(); ctx.roundRect(80, 15, 40, 20, 10); ctx.fill(); ctx.stroke(); }

Siehe auch setTransform().

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

Multipliziert das aktuelle Koordinatensystem mit der angegebenen Transformation (a, b, c, d, e, f).

Diese Methode ähnelt „ 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.

Siehe auch setTransform().

void translate(real x, real y)

Verschiebt das aktuelle Koordinatensystem um x und y.

function paintRect() { ctx.beginPath(); ctx.roundRect(20, 20, 160, 60, 10); ctx.fill(); ctx.stroke(); }; paintRect(); ctx.translate(0, 100); paintRect();