Sur cette page

Context2D QML Type

Fournit un contexte 2D pour les formes sur un élément Canvas. Plus d'informations...

Import Statement: import QtQuick

Propriétés

Méthodes

Description détaillée

L'objet Context2D peut être créé par la méthode getContext() de l'article Canvas:

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

L'API Context2D met en œuvre la même 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. La procédure suivante attribue le contexte de rendu du canevas à une variable context:

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

L'API Context2D rend le canevas sous la forme d'un système de coordonnées dont l'origine (0,0) se trouve dans le coin supérieur gauche, comme le montre la figure ci-dessous. Les coordonnées augmentent le long de l'axe x de gauche à droite et le long de l'axe y de haut en bas du canevas.

Documentation sur les propriétés

canvas : QtQuick::Canvas

Détient l'élément de la toile sur lequel le contexte peint.

Cette propriété est en lecture seule.

fillRule : enumeration

Indique la règle de remplissage actuellement utilisée pour remplir les formes. Les règles de remplissage suivantes sont prises en charge :

ConstanteDescription
Qt.OddEvenFillQt::OddEvenFill
Qt.WindingFill(par défaut) Qt::WindingFill

Remarque : contrairement à QPainterPath, l'API Canvas utilise le remplissage par enroulement comme règle de remplissage par défaut. La propriété fillRule fait partie de l'état de rendu du contexte.

Voir également fillStyle.

fillStyle : variant

Indique le style actuellement utilisé pour remplir les formes. Le style peut être une chaîne contenant une couleur CSS, un objet CanvasGradient ou CanvasPattern. Les valeurs non valides sont ignorées. Cette propriété accepte plusieurs syntaxes de couleur :

  • 'rgb(red, green, blue)' - par exemple : 'rgb(255, 100, 55)' ou 'rgb(100%, 70%, 30%)'
  • rgba(red, green, blue, 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'
  • Qt.rgba(red, green, blue, alpha) - par exemple : Qt.rgba(0.3, 0.7, 1, 1.0)

Si la valeur fillStyle ou strokeStyle est assignée plusieurs fois dans une boucle, la dernière syntaxe de Qt.rgba() devrait être choisie, car elle a les meilleures performances, parce qu'il s'agit déjà d'une valeur QColor valide, qui n'a pas besoin d'être analysée à chaque fois.

La valeur par défaut est '#000000'.

Voir aussi createLinearGradient(), createRadialGradient(), createPattern(), et strokeStyle.

font : string

Contient les paramètres actuels de la police de caractères.

Un sous-ensemble de la norme w3C 2d context pour les polices est pris en charge :

  • font-style (facultatif) : normal | italic | oblique
  • font-variant (facultatif) : normal | small-caps
  • font-weight (optionnel) : 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

Note : Les propriétés font-size et font-family sont obligatoires et doivent être présentées dans l'ordre indiqué ci-dessus. En outre, une famille de polices dont le nom contient des espaces doit être citée.

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

globalAlpha : real

Détient la valeur alpha actuelle appliquée aux opérations de rendu. La valeur doit être comprise entre 0.0 (totalement transparent) et 1.0 (totalement opaque). La valeur par défaut est 1.0.

globalCompositeOperation : string

Indique l'opération de composition en cours. Les opérations autorisées sont les suivantes

ConstanteDescription
"source-atop"QPainter::CompositionMode_SourceAtop A atop B. Affiche l'image source lorsque les deux images sont opaques. Affiche l'image de destination lorsque l'image de destination est opaque mais que l'image source est transparente. Afficher la transparence ailleurs.
"source-in"QPainter::CompositionMode_SourceIn A dans B. Affiche l'image source lorsque l'image source et l'image de destination sont toutes deux opaques. Afficher la transparence ailleurs.
"source-out"QPainter::CompositionMode_SourceOut A out B. Affiche l'image source lorsque l'image source est opaque et que l'image de destination est transparente. Afficher la transparence ailleurs.
"source-over"QPainter::CompositionMode_SourceOver (par défaut) A sur B. Affiche l'image source partout où l'image source est opaque. Afficher l'image de destination ailleurs.
"destination-atop"QPainter::CompositionMode_DestinationAtop B atop A. Identique à source-atop mais en utilisant l'image de destination au lieu de l'image source et vice versa.
"destination-in"QPainter::CompositionMode_DestinationIn B in A. Identique à source-in mais en utilisant l'image de destination au lieu de l'image source et vice versa.
"destination-out"QPainter::CompositionMode_DestinationOut B out A. Identique à source-out mais en utilisant l'image de destination au lieu de l'image source et vice versa.
"destination-over"QPainter::CompositionMode_DestinationOver B over A. Identique à source-over mais en utilisant l'image de destination au lieu de l'image source et vice versa.
"lighter"QPainter::CompositionMode_Plus A plus B. Affiche la somme de l'image source et de l'image de destination, avec des valeurs de couleur approchant 255 (100 %) comme limite.
"copy"QPainter::CompositionMode_Source A (B est ignoré). Affiche l'image source au lieu de l'image de destination.
"xor"QPainter::CompositionMode_Xor A xor B. OU exclusif de l'image source et de l'image de destination.
"qt-clear"QPainter::CompositionMode_Clear
"qt-destination"QPainter::CompositionMode_Destination
"qt-multiply"QPainter::CompositionMode_Multiply
"qt-screen"QPainter::CompositionMode_Screen
"qt-overlay"QPainter::CompositionMode_Overlay
"qt-darken"QPainter::CompositionMode_Darken
"qt-lighten"QPainter::CompositionMode_Lighten
"qt-color-dodge"QPainter::CompositionMode_ColorDodge
"qt-color-burn"QPainter::CompositionMode_ColorBurn
"qt-hard-light"QPainter::CompositionMode_HardLight
"qt-soft-light"QPainter::CompositionMode_SoftLight
"qt-difference"QPainter::CompositionMode_Difference
"qt-exclusion"QPainter::CompositionMode_Exclusion

Conformément à la norme W3C, les modes de composition étendus au-delà des modes requis sont fournis en tant que syntaxe "vendorName-operationName", par exemple : QPainter::CompositionMode_Exclusion est fourni en tant que "qt-exclusion".

lineCap : string

Indique le style de chapeau de ligne actuel. Les styles possibles sont les suivants

ConstanteDescription
"butt"(par défaut) Qt::FlatCap L'extrémité de chaque ligne a un bord plat perpendiculaire à la direction de la ligne.
"round"Qt::RoundCap un demi-cercle d'un diamètre égal à la largeur de la ligne est ajouté à l'extrémité de la ligne.
"square"Qt::SquareCap un rectangle de longueur égale à la largeur de la ligne et de largeur égale à la moitié de la largeur de la ligne, placé à plat contre le bord perpendiculaire à la direction de la ligne.

Les autres valeurs sont ignorées.

lineDashOffset : real [since QtQuick 2.11]

Indique le décalage actuel du tiret de ligne. La valeur par défaut du décalage du tiret de ligne est 0.

Cette propriété a été introduite dans QtQuick 2.11.

Voir aussi getLineDash() et setLineDash().

lineJoin : string

Indique le style de jonction de lignes en cours. Une jointure existe en tout point d'un sous-chemin partagé par deux lignes consécutives. Lorsqu'un sous-chemin est fermé, une jointure existe également en son premier point (équivalent à son dernier point) reliant la première et la dernière ligne du sous-chemin.

Les styles de jonction de lignes possibles sont les suivants

ConstanteDescription
"bevel"Qt::BevelJoin L'encoche triangulaire entre les deux lignes est remplie.
"round"Qt::RoundJoin Un arc de cercle entre les deux lignes est rempli.
"miter"(par défaut) Qt::MiterJoin Les bords extérieurs des lignes sont prolongés pour former un angle et cette zone est remplie.

Les autres valeurs sont ignorées.

lineWidth : real

Indique la largeur de ligne actuelle. Les valeurs qui ne sont pas des valeurs finies supérieures à zéro sont ignorées.

miterLimit : real

Indique le rapport de limite d'onglet actuel. La valeur par défaut de la limite d'onglet est de 10,0.

shadowBlur : real

Détient le niveau actuel de flou appliqué aux ombres

shadowColor : string

Conserve la couleur actuelle de l'ombre.

shadowOffsetX : real

Maintient le décalage actuel de l'ombre dans la distance horizontale positive.

Voir aussi shadowOffsetY.

shadowOffsetY : real

Maintient le décalage actuel de l'ombre dans la distance verticale positive.

Voir aussi shadowOffsetX.

strokeStyle : variant

Le style peut être soit une chaîne contenant une couleur CSS, soit un objet CanvasGradient ou CanvasPattern. Les valeurs non valides sont ignorées.

La valeur par défaut est "#000000".

Voir également createLinearGradient(), createRadialGradient(), createPattern() et fillStyle.

textAlign : string

Indique les paramètres d'alignement du texte en cours. Les valeurs possibles sont les suivantes :

ConstanteDescription
"start"(par défaut) Alignement sur le bord de départ du texte (côté gauche dans un texte de gauche à droite, côté droit dans un texte de droite à gauche).
"end"Alignement sur le bord final du texte (côté droit dans un texte de gauche à droite, côté gauche dans un texte de droite à gauche).
"left"Qt::AlignLeft
"right"Qt::AlignRight
"center"Qt::AlignHCenter

Les autres valeurs sont ignorées.

textBaseline : string

Indique les paramètres actuels d'alignement de la ligne de base. Les valeurs possibles sont les suivantes

ConstanteDescription
"top"Le haut du carré em
"hanging"Ligne de base suspendue
"middle"Le milieu du carré em
"alphabetic"(par défaut) La ligne de base alphabétique
"ideographic"La ligne de base idéographique
"bottom"Le bas du carré em

Les autres valeurs sont ignorées. La valeur par défaut est "alphabétique".

Documentation de la méthode

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

Ajoute un arc au sous-chemin actuel qui se trouve sur la circonférence du cercle dont le centre est au point (x, y) et dont le rayon est radius.

Les paramètres startAngle et endAngle sont tous deux mesurés en radians par rapport à l'axe des x.

Le paramètre anticlockwise est false pour chaque arc de la figure ci-dessus car ils sont tous dessinés dans le sens des aiguilles d'une montre.

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

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

Ajoute un arc avec les points de contrôle et le rayon donnés au sous-chemin actuel, relié au point précédent par une ligne droite. Pour dessiner un arc, vous commencez par les mêmes étapes que celles suivies pour créer une ligne :

  • Appelez la méthode beginPath() pour définir un nouveau chemin.
  • Appelez la méthode moveTo(x, y) pour définir votre position de départ sur le canevas au point (x, y).
  • Pour dessiner un arc ou un cercle, appelez la méthode arcTo(x1, y1, x2, y2, radius). Cette méthode ajoute un arc avec un point de départ (x1, y1), un point d'arrivée (x2, y2) et radius au sous-chemin actuel et le relie au sous-chemin précédent par une ligne droite.

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

object beginPath()

Réinitialise le chemin actuel à un nouveau chemin.

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

Ajoute une courbe de bézier cubique entre la position actuelle et le point final donné en utilisant les points de contrôle spécifiés par (cp1x, cp1y) et (cp2x, cp2y). Une fois la courbe ajoutée, la position actuelle est mise à jour pour se situer au point final (x, y) de la courbe. Le code suivant produit le chemin illustré ci-dessous :

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

Voir aussi W3C 2d context standard for bezierCurveTo et The beautiful flower demo by using bezierCurveTo.

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

Efface tous les pixels de la toile dans le rectangle spécifié par (x, y, w, h) et les transforme en noir transparent.

object clip()

Crée la région d'écrêtage à partir de la trajectoire actuelle. Les parties de la forme situées en dehors de la zone d'écrêtage ne sont pas affichées. Pour créer une forme complexe à l'aide de la méthode clip():

  1. Appelez la méthode context.beginPath() pour définir le chemin de détourage.
  2. Définissez la trajectoire d'écrêtage en appelant n'importe quelle combinaison des méthodes lineTo, arcTo, arc, moveTo, etc. et closePath.
  3. Appelez la méthode context.clip().

La nouvelle forme s'affiche. La figure suivante montre comment un chemin de détourage peut modifier l'affichage d'une image :

Voir également beginPath(), closePath(), stroke(), fill() et la norme de contexte 2d du W3C pour clip.

object closePath()

Ferme le sous-chemin actuel en traçant une ligne jusqu'au début du sous-chemin, démarrant ainsi automatiquement un nouveau chemin. Le point actuel du nouveau chemin est le premier point du sous-chemin précédent.

Voir également la norme de contexte 2d du W3C pour closePath.

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

Renvoie un objet CanvasGradient qui représente un dégradé conique interpolant les couleurs dans le sens inverse des aiguilles d'une montre autour d'un point central (x, y) avec un angle de départ angle en unités de radians.

Voir aussi CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle, et strokeStyle.

CanvasImageData createImageData(CanvasImageData imageData)

Crée un objet CanvasImageData avec les mêmes dimensions que l'argument imageData.

CanvasImageData createImageData(Url imageUrl)

Crée un objet CanvasImageData avec l'image donnée chargée à partir de imageUrl.

Remarque : L'image imageUrl doit être déjà chargée avant cet appel de fonction, sinon un objet CanvasImageData vide sera renvoyé.

Voir aussi Canvas::loadImage(), QtQuick::Canvas::unloadImage() et QtQuick::Canvas::isImageLoaded.

CanvasImageData createImageData(real sw, real sh)

Crée un objet CanvasImageData avec les dimensions données(sw, sh).

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

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

Un dégradé est une transition douce entre les couleurs. Il existe deux types de dégradés : linéaire et radial. Les dégradés doivent comporter au moins deux arrêts de couleur, représentant des changements de couleur positionnés de 0 à 1 entre les points ou cercles de départ et d'arrivée du dégradé.

Voir aussi CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle, et strokeStyle.

variant createPattern(Image image, string repetition)

Renvoie un objet CanvasPattern qui utilise l'image donnée et se répète dans le(s) sens indiqué(s) par l'argument de répétition.

Le paramètre image doit être un élément Image valide, un objet CanvasImageData valide ou une url d'image chargée. S'il n'y a pas de données d'image, cette fonction lève une exception INVALID_STATE_ERR.

Les valeurs autorisées pour repetition sont les suivantes

ConstanteDescription
"repeat"les deux directions
"repeat-xhorizontal uniquement
"repeat-y"vertical uniquement
"no-repeat"ni l'une ni l'autre

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

Voir également strokeStyle et fillStyle.

variant createPattern(color color, enumeration patternMode)

Il s'agit d'une fonction surchargée. Renvoie un objet CanvasPattern qui utilise les données color et patternMode. Les modes de motifs valides sont les suivants :

ConstanteDescription
Qt.SolidPatternQt::SolidPattern
Qt.Dense1PatternQt::Dense1Pattern
Qt.Dense2PatternQt::Dense2Pattern
Qt.Dense3PatternQt::Dense3Pattern
Qt.Dense4PatternQt::Dense4Pattern
Qt.Dense5PatternQt::Dense5Pattern
Qt.Dense6PatternQt::Dense6Pattern
Qt.Dense7PatternQt::Dense7Pattern
Qt.HorPatternQt::HorPattern
Qt.VerPatternQt::VerPattern
Qt.CrossPatternQt::CrossPattern
Qt.BDiagPatternQt::BDiagPattern
Qt.FDiagPatternQt::FDiagPattern
Qt.DiagCrossPatternQt::DiagCrossPattern

Voir également Qt::BrushStyle.

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

Renvoie un objet CanvasGradient qui représente un dégradé radial qui peint le long du cône donné par le cercle de départ avec l'origine (x0, y0) et le rayon r0, et le cercle de fin avec l'origine (x1, y1) et le rayon r1.

Voir aussi CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle, et strokeStyle.

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

Dessine l'image image sur le canevas à la position (dx, dy). Remarque : le type image peut être un élément Image, une url d'image ou un objet CanvasImageData. Lorsque l'élément est une image, si l'image n'est pas entièrement chargée, cette méthode ne dessine rien. Lorsqu'elle est donnée comme une chaîne d'url, l'image doit être chargée en appelant d'abord la méthode Canvas::loadImage() de l'élément Canvas. Le dessin de cette image est soumis au chemin de clip du contexte actuel, même si l'objet image est un objet CanvasImageData.

Voir également CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded, et la norme de contexte 2d du W3C pour drawImage.

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

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

Remarque : le type image peut être un élément Image, une image url ou un objet CanvasImageData. Lorsque l'élément est une image, si l'image n'est pas entièrement chargée, cette méthode ne dessine rien. Lorsque l'élément est une chaîne d'url, l'image doit être chargée en appelant d'abord la méthode Canvas::loadImage() de l'élément Canvas. Le dessin de cette image est soumis au chemin de clip du contexte actuel, même si l'objet image est un objet CanvasImageData.

Voir également CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded, et la norme de contexte 2d du W3C pour 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. Dessine l'élément donné comme image à partir du point source (sx, sy) et de la largeur source sw, de la hauteur source sh sur le canevas au point (dx, dy) et avec la largeur dw, la hauteur dh.

Remarque : le type image peut être un élément Image ou Canvas, une url d'image ou un objet CanvasImageData. Lorsque l'élément est une 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 d'url, l'image doit être chargée en appelant d'abord la méthode Canvas::loadImage() de l'élément Canvas. Le dessin de cette image est soumis au chemin de clip du contexte actuel, même si l'objet image est un objet CanvasImageData.

Voir également CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded, et la norme de contexte 2d du W3C pour drawImage.

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

Crée une ellipse dans le rectangle délimité par son coin supérieur gauche à (x, y), de largeur w et de hauteur h, et l'ajoute au chemin en tant que sous-chemin fermé.

L'ellipse est composée d'une courbe dans le sens des aiguilles d'une montre, commençant et finissant à zéro degré (position 3 heures).

object fill()

Remplit les sous-chemins avec le style de remplissage actuel.

Voir également la norme de contexte 2d du W3C pour le remplissage et fillStyle.

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

Peint une zone rectangulaire spécifiée par (x, y, w, h) en utilisant fillStyle.

Voir aussi fillStyle.

object fillText(text, x, y)

Remplit le site text spécifié à la position donnée (x, y).

Voir aussi font, textAlign, textBaseline, et strokeText.

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

Renvoie un objet CanvasImageData contenant les données d'image pour le rectangle de toile spécifié par (x, y, w, h).

[since QtQuick 2.11] array getLineDash()

Renvoie un tableau de qreals représentant le motif des tirets de la ligne.

Cette méthode a été introduite dans QtQuick 2.11.

Voir aussi setLineDash() et lineDashOffset.

object isPointInPath(real x, real y)

Renvoie true si le point (x, y) se trouve dans le chemin actuel.

Voir également la norme de contexte 2d du W3C pour isPointInPath.

object lineTo(real x, real y)

Dessine une ligne depuis la position actuelle jusqu'au point situé à (x, y).

object measureText(text)

Renvoie un objet avec une propriété width, dont la valeur est équivalente à l'appel de QFontMetrics::horizontalAdvance() avec la valeur text dans la police actuelle.

object moveTo(real x, real y)

Crée un nouveau sous-chemin avec un point à (x, y).

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

Peint les données de l'objet imageData donné sur le canevas à (dx, dy).

Si un rectangle sale (dirtyX, dirtyY, dirtyWidth, dirtyHeight) est fourni, seuls les pixels de ce rectangle sont peints.

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

Ajoute une courbe de Bézier quadratique entre le point actuel et le point final (x, y) avec le point de contrôle spécifié par (cpx, cpy).

Voir également la norme de contexte 2d du W3C pour quadraticCurveTo.

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

Ajoute un rectangle à la position (x, y), avec la largeur w et la hauteur h, en tant que sous-chemin fermé.

object reset()

Réinitialise l'état et les propriétés du contexte aux valeurs par défaut.

object resetTransform()

Réinitialise 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().

object restore()

Ouvre l'état supérieur de la pile et restaure le contexte à cet état.

Voir aussi save().

object rotate(real angle)

Rotation de la toile autour de l'origine actuelle par angle en radians et dans le sens des aiguilles d'une montre.

ctx.rotate(Math.PI/2);

La matrice de transformation de la rotation est la suivante :

angle de la rotation est en radians.

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

Ajoute au chemin un rectangle aux coins arrondis, spécifié par (x, y, w, h). Les arguments xRadius et yRadius spécifient le rayon des ellipses définissant les coins du rectangle arrondi.

object save()

Repousse l'état actuel dans la pile d'états.

Avant de modifier les attributs d'un état, vous devez enregistrer l'état actuel pour référence ultérieure. Le contexte maintient une pile d'états de dessin. Chaque état se compose de la matrice de transformation actuelle, de la région de détourage et des valeurs des attributs suivants :

Le chemin actuel ne fait PAS partie de l'état de dessin. Le chemin peut être réinitialisé en invoquant la méthode beginPath().

object scale(real x, real y)

Augmente ou diminue la taille de chaque unité dans la grille du canevas en multipliant les facteurs d'échelle à la matrice de transformation actuelle. x est le facteur d'échelle dans la direction horizontale et y est le facteur d'échelle dans la direction verticale.

Le code suivant double la taille horizontale d'un objet dessiné sur le canevas et réduit de moitié sa taille verticale :

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

Définit le motif du tiret en fonction du motif donné.

pattern une liste de nombres qui spécifie les distances pour dessiner alternativement une ligne et un espace.

Si le nombre d'éléments du tableau est impair, les éléments du tableau sont copiés et concaténés. Par exemple, [5, 15, 25] deviendra [5, 15, 25, 5, 15, 25].

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

Cette méthode a été introduite dans QtQuick 2.11.

Voir aussi getLineDash() et lineDashOffset.

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

Modifie la matrice de transformation en la matrice donné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 que quoi que ce soit ne soit dessiné. La spécification HTML Canvas 2D Context définit la matrice de transformation comme suit :

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'obliquité 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 d'inclinaison sont des multiples ; e et f sont des unités d'espace de coordonnées, tout comme les unités de la méthode translate(x,y).

Voir aussi transform().

object shear(real sh, real sv)

Coupe la matrice de transformation par sh dans la direction horizontale et sv dans la direction verticale.

object stroke()

Trace les sous-chemins avec le style de trait actuel.

Voir également strokeStyle et la norme de contexte 2d du W3C pour le trait.

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

Trace le chemin du rectangle spécifié par (x, y, w, h) en utilisant les attributs strokeStyle, lineWidth, lineJoin, et (le cas échéant) miterLimit.

Voir également strokeStyle, lineWidth, lineJoin, et miterLimit.

object strokeText(text, x, y)

Frappe le fichier text à la position spécifiée par (x, y).

Voir aussi font, textAlign, textBaseline, et fillText.

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

Ajoute le site text au chemin sous la forme d'un ensemble de sous-chemins fermés créés à partir de la police contextuelle actuelle fournie.

Les sous-chemins sont positionnés de manière à ce que l'extrémité gauche de la ligne de base du texte se trouve au point spécifié par (x, y).

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

Cette méthode est très similaire à setTransform(), mais au lieu de remplacer l'ancienne matrice de transformation, elle applique la matrice de transformation donnée à la matrice actuelle en la multipliant.

La méthode setTransform(a, b, c, d, e, f) réinitialise en fait la transformation actuelle à la matrice d'identité, puis invoque la méthode transform(a, b, c, d, e, f) avec les mêmes arguments.

Voir aussi setTransform().

object translate(real x, real y)

Traduit l'origine du canevas d'une distance horizontale de x, et d'une distance verticale de y, en unités d'espace de coordonnées.

La translation de l'origine vous permet de dessiner des motifs de différents objets sur la toile sans avoir à mesurer manuellement les coordonnées de chaque forme.

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.