Canvas2DContext QML Type

Fournit un contexte 2D permettant de dessiner sur un élément de type « Canvas2D ». En savoir plus…

Ce type est en phase de préversion technologique et est susceptible d'être modifié.

• Liste de tous les membres, y compris les membres hérités

Propriétés

• 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

Méthodes

• 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)

Description détaillée

L'objet Canvas2DContext peut être créé à l'aide de la méthode getContext() de l'élément Canvas:

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

L'API Context2D implémente la norme W3C Canvas 2D Context API, avec quelques fonctionnalités améliorées.

L'API Context2D fournit le contexte de rendu qui définit les méthodes et les attributs nécessaires pour dessiner sur l'élément Canvas. Le code suivant attribue le contexte de rendu canvas à une variable context:

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

Voici un exemple simple d’utilisation de l’ Canvas2D pour créer un bouton rond.

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);

Voici un autre exemple illustrant comment tracer un graphique simple.

// 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();

Documentation des propriétés

antialias : real

Stocke le niveau d'anticrénelage actuel. Un anticrénelage plus important permet un rendu plus lisse. Cela n'affecte que le remplissage et le tracé, et non les images ou les textes. La valeur par défaut est 1.0 et la valeur maximale est 10.0.

L'anticrénelage peut être modifié pour chaque tracé ; il peut donc être défini avant chaque trait ou remplissage.

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(); }

Voir également textAntialias.

canvas : Canvas2D

Contient l'élément « canvas » sur lequel le contexte effectue le dessin.

Cette propriété est en lecture seule.

direction : string

Contient la direction actuelle utilisée pour tracer le texte. Les valeurs possibles sont :

La direction par défaut est "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

Stocke la règle de remplissage actuellement utilisée pour remplir les formes. Cette valeur s'applique à tous les appels à la fonction ` fill()` effectués après la définition de la règle. La règle de remplissage par défaut est "nonzero"

Les règles de remplissage suivantes sont prises en charge :

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

Voir également fill().

fillStyle : variant

Stocke le style de remplissage actuellement utilisé pour les formes. Le style de remplissage par défaut est le noir uni (« #000000 »). Le style peut être soit une chaîne de caractères contenant une couleur CSS, QML color, soit un objet « pinceau » Canvas. Les valeurs non valides sont ignorées. Cette propriété accepte plusieurs syntaxes de couleur :

• 'rgb(rouge, vert, bleu)' – par exemple : 'rgb(255, 100, 55)' ou 'rgb(100%, 70%, 30%)'
• 'rgba(rouge, vert, bleu, alpha)' – par exemple : 'rgb(255, 100, 55, 1,0)' ou 'rgb(100 %, 70 %, 30 %, 0,5)'
• « hsl(teinte, saturation, luminosité) »
• « hsla(teinte, saturation, luminosité, alpha) »
• '#RRGGBB' – par exemple : '#00FFCC'
• « #AARRGGBB » – par exemple : « #8000FFCC »
• Nom de couleur SVG – par exemple : « black », « green » ou « lightsteelblue »
• Qt.hsla(teinte, saturation, luminosité, alpha) - par exemple : Qt.hsla(0,3, 0,7, 1, 1,0)
• Qt.rgba(rouge, vert, bleu, alpha) – par exemple : Qt.rgba(0,3, 0,7, 1, 1,0)

Si fillStyle ou strokeStyle est attribué plusieurs fois dans une boucle, il est préférable d’utiliser la syntaxe Qt.rgba(), car elle offre les meilleures performances : il s’agit en effet d’une valeur QColor valide qui n’a pas besoin d’être analysée à chaque fois.

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);

Voir également createLinearGradient(), createRadialGradient(), createConicalGradient(), createBoxGradient(), createBoxShadow(), createPattern(), createGridPattern() et strokeStyle.

font : string

Enregistre les paramètres de police actuels.

Un sous-ensemble de la norme W3C relative au contexte 2D pour les polices est pris en charge :

• font-style (facultatif) : normal | italic | oblique
• font-variant (facultatif) : normal | petites capitales
• font-weight (facultatif) : normal | bold | 1 ... 1000
• font-size : Npx | Npt (où N est un nombre positif)
• font-family : voir http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family

La valeur par défaut de la police est « 10px sans-serif ».

globalAlpha : real

Contient la valeur alpha (transparence) actuellement appliquée aux opérations de rendu. Cette valeur alpha s'applique à toutes les formes rendues. Les tracés déjà transparents deviendront également proportionnellement plus transparents. La valeur alpha doit être comprise entre 0,0 (entièrement transparent) et 1,0 (entièrement opaque). Par défaut, la valeur alpha est de 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

Contient la valeur actuelle de luminosité appliquée aux opérations de rendu. Cette luminosité s'applique à toutes les formes rendues. Une valeur de 0 rendra le tracé entièrement noir. La valeur peut également être supérieure à 1,0 pour augmenter la luminosité. Par défaut, la luminosité est de 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

Conserve l'opération de composition en cours. Ce mode s'applique à toutes les opérations de dessin. Les opérations autorisées sont les suivantes :

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

Contient la valeur de contraste actuellement appliquée aux opérations de rendu. Ce contraste s'applique à toutes les formes rendues. Une valeur de 0 rendra le tracé entièrement gris (0,5 ; 0,5 ; 0,5). La valeur peut également être supérieure à 1,0 pour augmenter le contraste. Par défaut, le contraste est de 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

Contient la valeur de saturation actuellement appliquée aux opérations de rendu. Cette saturation s'applique à toutes les formes rendues. Une valeur de 0 désactive la saturation et rend le dessin entièrement en niveaux de gris. La valeur peut également être supérieure à 1,0 pour augmenter la saturation. Par défaut, la saturation est de 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

Conserve l'état actuel d'activation du tracé haute qualité. La valeur « true » permet un rendu plus précis dans certains cas peu courants où les tracés se chevauchent et ne présentent pas une opacité totale. L'activation de cette option entraîne une augmentation du coût de rendu. La valeur par défaut est « 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

Contient le style actuel d'extrémité de ligne. Les styles d'extrémité de ligne possibles sont les suivants :

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

Contient le style de jonction de lignes actuel. Une jonction existe à n'importe quel point d'un sous-trajet commun à deux lignes consécutives. Lorsqu'un sous-trajet est fermé, une jonction existe également à son premier point (équivalent à son dernier point), reliant la première et la dernière ligne du sous-trajet.

Les styles de jonction de lignes possibles sont les suivants :

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);

Voir aussi miterLimit.

lineWidth : real

Stocke la largeur de ligne actuelle. La largeur de ligne par défaut est 1.0. Lorsque l'anticrénelage est activé, les largeurs de ligne inférieures à un pixel voient leur opacité automatiquement atténuée, ce qui permet d'obtenir un rendu fluide.

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(); }

Voir aussi stroke().

miterLimit : real

Stocke la longueur limite actuelle de l'onglet. La limite d'onglet détermine à quel moment un angle vif est biseauté. Lorsque la longueur de l'angle dépasse cette limite, une « biseau » lineJoin est alors appliquée entre les lignes. Cela ne s'applique qu'avec le type de jonction « onglet ». La limite par défaut est 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);

Voir également lineJoin.

strokeStyle : variant

Stocke la couleur ou le style actuel à utiliser pour les lignes entourant les formes. Le style peut être soit une chaîne de caractères contenant une couleur CSS ( QML color), soit un objet « pinceau » Canvas. Les valeurs non valides sont ignorées.

La valeur par défaut est le noir (« #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);

Voir également createLinearGradient(), createRadialGradient(), createConicalGradient(), createBoxGradient(), createBoxShadow(), createPattern(), createGridPattern() et fillStyle.

textAlign : string

Contient les paramètres d'alignement du texte actuels. Les valeurs possibles sont les suivantes :

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);

Voir aussi textBaseline.

textAntialias : real

Stocke le niveau actuel d'anticrénelage du texte. Cette valeur correspond à un multiplicateur de l'anticrénelage normal : ainsi, la valeur « 0.0 » désactive l'anticrénelage, tandis que la valeur « 2.0 » le double. La valeur par défaut is 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

Contient les paramètres d'alignement de base actuels. Les valeurs possibles sont :

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);

Voir aussi textAlign.

textLineHeight : real

Contient la valeur d'ajustement de la hauteur de ligne du texte actuel, exprimée en pixels. La hauteur de ligne par défaut est de 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

Définit le mode actuel de retour à la ligne, c'est-à-dire la manière dont le texte est réparti sur plusieurs lignes. Les valeurs possibles sont :

Le mode de retour à la ligne par défaut est « "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

Conserve l'état actuel d'application de la courbure. En définissant cette option sur « false », l'application de la courbure des chemins est désactivée afin de respecter les paramètres définis dans la fonction « setPathWinding() ». La désactivation permet, par exemple, de créer des trous dans les chemins en ajoutant les points dans le sens des aiguilles d'une montre. Elle peut également améliorer les performances. La valeur par défaut est « 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();

Documentation de la méthode

void addPath(path2d path, transform2d transform)

Ajoute path au chemin actuel, en utilisant éventuellement transform pour modifier les points du chemin. Lorsque transform n'est pas fourni (ou qu'il s'agit de la matrice identité), cette opération est très rapide car elle réutilise les données du chemin.

// 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)

Ajoute path au chemin actuel, en partant de la commande située à l'adresse start et en incluant count nombre de commandes. Il est possible d'utiliser transform pour modifier les points du chemin. Les plages start et count sont vérifiées, afin que le nombre de commandes accessibles ne dépasse pas le nombre de commandes contenues dans le chemin. Si le chemin ne doit pas se poursuivre à partir de la position actuelle, appelez d'abord moveTo().

// 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)

Crée un nouveau sous-trajet en forme d’arc de cercle. Le centre de l’arc se trouve à l’adresse x, y, avec radius, et l’arc est tracé selon un angle compris entre startAngle et endAngle. La direction par défaut de la courbe est dans le sens des aiguilles d’une montre. Pour inverser cette direction, définissez anticlockwise sur true. Les angles sont exprimés en radians.

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

Voir également arcTo et la norme W3C sur le contexte 2D pour la fonction arc().

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

Ajoute un segment d'arc au coin défini par le dernier point du tracé et deux points spécifiés (x1, y1 et x2, y2) avec radius. L'arc est automatiquement relié au dernier point du tracé par une ligne droite si nécessaire.

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

Voir également arc et la norme 2D Context du W3C pour la fonction arcTo().

void beginHoleSubPath()

Créer un sous-trajet de trou. Cela revient à 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();

Voir également beginSolidSubPath().

void beginPath()

Commence à tracer un nouveau chemin tout en effaçant le chemin actuel.

void beginSolidSubPath()

Lancer un sous-trajet solide. Cela revient à setPathWinding("counterclockwise")

Voir aussi beginHoleSubPath().

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

Ajoute un segment de courbe de Bézier cubique partant du dernier point du tracé, en passant par deux points de contrôle (cp1x, cp1y et cp2x, cp2y), jusqu'au point spécifié (x, y).

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

Voir également la norme W3C relativeau contexte 2D pour la fonction `bezierCurveTo`.

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

Crée un nouveau sous-trajet circulaire centré en ( centerX, centerY) avec radius.

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

void cleanupResources()

Programme la suppression des textures inutilisées du cache.

De plus, d'autres caches et pools peuvent être réduits lors de l'appel de cette fonction, afin de minimiser l'utilisation de la mémoire. Cela peut potentiellement entraîner des appels de dessin plus coûteux par la suite.

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

Efface les pixels d'une zone rectangulaire en remplissant de noir transparent le rectangle défini par x, y, width, height. L'effacement ne nécessitant pas de fusion, il peut s'avérer plus rapide que la fonction fillRect().

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

void closePath()

Ferme le sous-trajet courant en traçant une ligne jusqu'au début de celui-ci, ce qui lance automatiquement un nouveau trajet. Le point actuel du nouveau trajet correspond au premier point du sous-trajet précédent.

Voir également la norme W3C relativeau contexte 2D pour la propriété `closePath`.

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

Renvoie un objet ` boxgradient2d ` représentant un dégradé de boîte couvrant la zone rectangulaire (x, y, width, height) avec un adoucissement (feather) feather et un rayon de coin radius.

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);

Voir également boxgradient2d::addColorStop(), fillStyle et strokeStyle.

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

Renvoie un objet ` boxshadow2d ` représentant une ombre portée qui recouvre la zone rectangulaire (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();

Voir également drawBoxShadow().

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

Renvoie un objet ` boxshadow2d ` avec une couleur color représentant une ombre portée qui recouvre la zone du rectangle (x, y, width, height) avec un flou blur et un rayon de coin radius.

Voir également drawBoxShadow().

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

Renvoie un objet ` boxshadow2d ` avec des paramètres de couleur ( color ) représentant une ombre portée qui recouvre la zone du rectangle (x, y, width, height) avec un flou ( blur ) et un rayon de coin (radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft).

Voir également drawBoxShadow().

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

Renvoie un objet ` conicalgradient2d ` représentant un dégradé conique qui interpole les couleurs dans le sens antihoraire autour d'un point central (x, y) avec un angle de départ angle, exprimé en radians.

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

Voir également conicalgradient2d::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle et strokeStyle.

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

Renvoie un objet ` gridpattern2d ` qui couvre la zone rectangulaire (x, y, width, height). La grille utilise lineColor pour les lignes et backgroundColor pour l'arrière-plan. La largeur de ligne est lineWidth, le contour progressif des lignes est feather et l'angle de rotation est angle en radians.

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)

Renvoie un objet ` lineargradient2d ` représentant un dégradé linéaire qui effectue une transition de couleur le long d'une ligne entre le point de départ (x0, y0) et le point d'arrivée (x1, y1).

Les dégradés doivent comporter au moins deux arrêts de couleur, représentant des changements de couleur situés entre 0 et 1 entre les points de départ et d'arrivée du dégradé.

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);

Voir également lineargradient2d::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle et strokeStyle.

path2d createPath2D()

Renvoie un nouvel objet `path2d`. L'appel de cette méthode équivaut à la commande HTML `new Path2D()` du canevas.

Voir également fill() et stroke().

path2d createPath2D(path2d path)

Renvoie un nouvel objet `Path2D`, contenant une copie de ` path`. L'appel de cette méthode équivaut à la commande HTML `canvas` « `new Path2D(path)` ».

Voir également fill() et stroke().

path2d createPath2D(string svgPath)

Renvoie un nouvel objet `Path2D`, dont le contenu est celui de ` svgPath`. L'appel de cette méthode équivaut à la commande HTML `canvas "new Path2D(d)"`.

Voir également fill() et stroke().

imagepattern2d createPattern(Image image, string repetition)

Renvoie un objet ` imagepattern2d ` qui utilise l'image fournie et la répète dans la ou les directions indiquées par l'argument `repetition`.

Le paramètre ` image ` doit être un élément `Image` valide ou l'URL d'une image chargée. En l'absence de données d'image, cette fonction lève une exception `INVALID_STATE_ERR`.

Les valeurs autorisées pour ` repetition ` sont les suivantes :

Si l'argument de répétition est vide ou nul, la valeur « repeat » est utilisée.

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

Voir également strokeStyle et fillStyle.

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

Renvoie un objet ` radialgradient2d ` représentant un dégradé radial qui s'étend le long du cône défini par le cercle de départ, dont l'origine est (x0, y0) et le rayon r0, et le cercle de fin, dont l'origine est (x1, y1) et le rayon r1.

Avec seulement 4 paramètres, ceux-ci sont utilisés sous la forme (x, y, r0, r1), la position du centre étant la même pour les rayons intérieur et extérieur.

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);

Voir également radialgradient2d::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle et strokeStyle.

transform2d createTransform2D()

Renvoie un nouvel objet `transform2d`, initialisé à la matrice identité.

Voir également getTransform().

void drawBoxShadow(boxshadow2d shadow)

Dessine une boîte donnée shadow. L'ombre sera tracée selon la position, la taille, la couleur, le flou, etc. définis par shadow. Il n'est pas nécessaire d'appeler beginPath() avant cette méthode.

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

Voir également createBoxShadow().

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

Dessine l'image n fournie sur le canevas à la position (dx, dy). Remarque : le type « image » peut être un élément « Image » ou une URL d’image. Lorsqu’il s’agit d’un élément « Image », si l’image n’est pas entièrement chargée, cette méthode ne dessine rien. Lorsqu’il s’agit d’une chaîne de caractères représentant une URL, l’image doit être chargée au préalable en appelant la méthode « Canvas2D::loadImage() » de l’élément « Canvas ». Ce dessin est soumis au chemin de découpe du contexte actuel.

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

Voir également Image, Canvas2D::loadImage, Canvas2D::isImageLoaded, Canvas2D::imageLoaded et la norme W3C 2D Context relative à drawImage.

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

Il s'agit d'une fonction surchargée. Elle dessine l'élément donné sous la forme image sur le canevas, au point (dx, dy) et avec une largeur de dw et une hauteur de dh.

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

Voir également Image, Canvas2D::loadImage(), Canvas2D::isImageLoaded, Canvas2D::imageLoaded et la norme W3C relative au contexte 2D pour la méthode drawImage.

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

Il s'agit d'une fonction surchargée. Elle dessine l'élément donné sous la forme d'image à partir du point source (sx, sy), de la largeur source sw et de la hauteur source sh sur le canevas, au point (dx, dy) et avec une largeur de dw et une hauteur de dh.

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

Voir également Image, ` Canvas2D::loadImage()`, ` Canvas2D::isImageLoaded`, ` Canvas2D::imageLoaded` et la norme W3C 2D Context relative à la fonction `drawImage`.

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

Crée un nouveau sous-tracé de forme elliptique centré en ( centerX, centerY) avec radiusX et radiusY.

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

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

Crée un nouveau sous-tracé en forme d'ellipse à l'intérieur d'un rectangle : x, y, width, height. Cette ellipse recouvrira la zone du rectangle.

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

void fill()

Remplit le tracé actuel avec le style de remplissage et la règle de remplissage actuels.

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

Voir également fillStyle, fillRule et la norme W3C relative au contexte 2D pour le remplissage.

void fill(string fillRule)

Remplit le tracé actuel avec le style de remplissage actuel et la règle de remplissage fillRule.

Voir également fillStyle et fillRule.

void fill(path2d path, int pathGroup)

Remplit l'objet « path » avec le style et la règle de remplissage actuels, et l'intègre dans l'objet facultatif « pathGroup ». Le remplissage via « QCanvasPath » est optimal lorsque le tracé contient davantage de commandes et est principalement statique.

Lorsque pathGroup est défini sur -1, le tracé ne sera pas mis en cache côté GPU. Il s’agit du comportement par défaut. Pour demander la mise en cache des données de tracé, transmettez une valeur égale ou supérieure à 0. Vous trouverez plus d’informations sur l’utilisation des groupes de cache de tracé dans la documentation QCanvasPath.

Il n’est pas nécessaire d’appeler ` beginPath()` avant cette méthode.

// 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);

Voir également fillStyle et path2d.

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

Remplit l'élément « path » avec le style de remplissage actuel et en utilisant fillRule. Le paramètre de groupe de cache pathGroup est facultatif.

Voir également fillStyle, fillRule et path2d.

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

Dessine un rectangle rempli à l'emplacement spécifié ( x, y) avec les dimensions width, height.

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

Voir également fillStyle.

void fillText(text, x, y, maxWidth)

Affiche la chaîne « text » à l’emplacement spécifié ( x, y), avec les paramètres actuels textAlign et textBaseline. Pour que le texte s’affiche sur plusieurs lignes, définissez le mode de retour à la ligne à l’aide de textWrapMode en choisissant une valeur autre que la valeur par défaut "nowrap". Le paramètre facultatif maxWidth prend par défaut la valeur 0. Cela signifie que lorsque, par exemple, "wordwrap" a été défini, le texte est renvoyé à la ligne à chaque mot. Définissez le paramètre maxWidth sur la largeur de ligne souhaitée en pixels.

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);

Voir également font, textAlign, textBaseline et textWrapMode.

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

Dessine la chaîne « text » à l'intérieur du rectangle (x, y, width, height), en utilisant les paramètres actuels textAlign et textBaseline. La largeur du paramètre rect est utilisée comme maxWidth.

Il est souvent utile de définir la ligne de base du texte sur TextBaseline::Top ou TextBaseline::Middle lors du tracé de texte avec cette méthode.

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);

Voir également font, textAlign, textBaseline et textWrapMode.

transform2d getTransform()

Renvoie la matrice de transformation actuelle.

Voir aussi setTransform().

void lineTo(real x, real y)

Trace une ligne entre la position actuelle et le point situé aux coordonnées (x, y).

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

object measureText(text)

Renvoie un objet doté d'une propriété « width », dont la valeur correspond à l'appel de la fonction ` QFontMetricsF::horizontalAdvance()` avec l'text fournie, dans la police actuelle.

void moveTo(real x, real y)

Crée un nouveau sous-chemin dont un point se trouve à l'adresse (x, y).

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

Ajoute un segment de courbe de Bézier quadratique partant du dernier point du tracé, en passant par un point de contrôle (cpx, cpy), jusqu'au point spécifié (x, y).

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

Voir également la norme W3C relativeau contexte 2D pour la fonction `quadraticCurveTo`.

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

Crée un nouveau sous-trajet de forme rectangulaire à la position x, y, de taille width, height.

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

void removePathGroup(int pathGroup)

Supprime l'pathGroup du cache du peintre. L'appel de ` fill()` ou ` stroke()` pour ` pathGroup ` après cette opération régénérera le chemin dans le cache du groupe.

Voir également fill() et stroke().

void reset()

Réinitialise l'état actuel du peintre aux valeurs par défaut.

// 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);

Voir également save() et restore().

void resetClipping()

Réinitialise et désactive l'écrêtage.

Voir aussi setClipRect().

void resetTransform()

Réinitialiser la matrice de transformation à sa valeur par défaut (ce qui équivaut à appeler setTransform(1, 0, 0, 1, 0, 0)).

Voir également transform(), setTransform() et reset().

void restore()

Affiche et restaure l'état de rendu actuel. L'état précédemment enregistré sera donc restauré. Si la fonction save() n'a pas été appelée et que la pile d'états est vide, l'appel de cette fonction n'a aucun effet.

Voir également save().

void rotate(real angle)

Fait pivoter le système de coordonnées actuel dans le sens des aiguilles d'une montre d'angle.

L'angle est exprimé en radians.

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)

Crée un nouveau sous-trajet en forme de rectangle arrondi à la position x, y avec les dimensions width, height. L'arrondi des coins sera 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)

Crée un nouveau sous-trajet en forme de rectangle arrondi à la position x, y, avec les dimensions width, height. L'arrondi des coins peut varier d'un coin à l'autre, avec les valeurs radiusTopLeft, radiusTopRight, radiusBottomRight, radiusBottomLeft.

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

void save()

Ajoute et enregistre l'état de rendu actuel dans une pile d'états. Il faut utiliser la méthode correspondante ` restore()` pour restaurer cet état.

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);

Voir également restore().

void scale(real scale)

Mise à l'échelle du système de coordonnées actuel selon le rapport scale. Les coordonnées x et y sont mises à l'échelle de manière uniforme.

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)

Augmente ou réduit la taille de chaque unité de la grille du canevas en multipliant la matrice de transformation actuelle par les facteurs d'échelle. sx correspond au facteur d'échelle dans le sens horizontal et sy au facteur d'échelle dans le sens vertical.

Le code suivant double la taille horizontale d'un objet dessiné sur le canevas et divise par deux sa taille verticale :

ctx.scale(2.0, 0.5);

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

Définit le rectangle de découpe actuel sur (x, y, width, height). Le rectangle de découpe est transformé par la transformation actuelle.

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);

Voir également resetClipping().

void setPathWinding(string winding)

Définit le sens du sous-trajet winding sur « counterclockwise » (par défaut) ou « clockwise ». « counterclockwise » permet de tracer des sous-trajets pleins, tandis que « clockwise » permet de tracer des trous.

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

Voir également beginHoleSubPath() et beginSolidSubPath().

void setTransform(transform2d transform)

Réinitialise la transformation actuelle et utilise à la place 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();

Voir également transform() et getTransform().

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

Modifie la matrice de transformation pour lui attribuer la matrice indiquée par les arguments, comme décrit ci-dessous.

La modification directe de la matrice de transformation vous permet d’effectuer des transformations de mise à l’échelle, de rotation et de translation en une seule étape.

Chaque point du canevas est multiplié par la matrice avant tout tracé. La spécification HTML Canvas 2D Context définit la matrice de transformation où :

• a est le facteur d'échelle dans la direction horizontale (x)
• c est le facteur d'inclinaison dans la direction x
• e est la translation dans la direction x
• b est le facteur d'inclinaison dans la direction y (verticale)
• d est le facteur d'échelle dans la direction y
• f est la translation dans la direction y
• la dernière ligne reste constante

Les facteurs d'échelle et les facteurs d'inclinaison sont des multiples ; e et f sont des unités de l'espace de coordonnées, tout comme les unités de la méthode translate(x,y).

Voir également transform().

void skew(real angleX, real angleY)

Déforme (cisaille) le système de coordonnées actuel de angleX le long de l'axe X et de angleY le long de l'axe Y. La valeur par défaut de angleY est 0 lorsqu'un seul paramètre est fourni. Les angles sont exprimés en radians.

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

Trace le tracé actuel avec le style de trait actuel.

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

Voir également strokeStyle et la norme W3C relative au contexte 2D pour le trait.

void stroke(path2d path, int pathGroup)

Trace le chemin path avec le style de trait actuel et l'intègre dans pathGroup. Le tracé via QCanvasPath est optimal lorsque le chemin contient davantage de commandes et est essentiellement statique.

Lorsque pathGroup est défini sur -1, les données liées au rendu du tracé ne sont pas mises en cache. Il s’agit du comportement par défaut. Pour demander la mise en cache des données du tracé, transmettez une valeur égale ou supérieure à 0. Vous trouverez plus d’informations sur l’utilisation des groupes de cache de tracé dans la documentation « QCanvasPath ».

Il n’est pas nécessaire d’appeler beginPath() avant cette méthode.

// 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);

Voir également strokeStyle, path2d et la norme W3C 2d context relative au trait.

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

Dessine un rectangle avec contour à l'emplacement spécifié ( x, y) et de taille width, height.

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

Voir également strokeStyle, lineWidth, lineJoin et miterLimit.

void transform(transform2d transform)

Multiplie le système de coordonnées actuel par l'transform e spécifiée.

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(); }

Voir aussi ` setTransform()`.

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

Multiplie le système de coordonnées actuel par la transformation spécifiée (a, b, c, d, e, f).

Cette méthode est similaire à setTransform(), mais au lieu de remplacer l'ancienne matrice de transformation, elle applique la matrice de transformation fournie à la matrice actuelle en la multipliant par celle-ci.

Voir également setTransform().

void translate(real x, real y)

Transforme le système de coordonnées actuel selon les fonctions x et y.

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