Canvas2D QML Type

Fournit un élément « canvas » 2D permettant de dessiner via JavaScript. En savoir plus…

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

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

Propriétés

• available : bool
• context : object
• contextType : string

Signaux

• imageLoaded()
• paint(rect region)
• painted()

Méthodes

• void cancelRequestAnimationFrame(int handle)
• object getContext(string contextId, ... args)
• bool isImageError(url image)
• bool isImageLoaded(url image)
• bool isImageLoading(url image)
• void loadImage(url image, size sourceSize)
• void markDirty()
• int requestAnimationFrame(callback)
• void requestPaint()
• void unloadImage(url image)

Description détaillée

L'élément Canvas2D permet de tracer des lignes droites et courbes, de dessiner des formes simples et complexes, de représenter des graphiques et d'afficher des images graphiques référencées. Il permet également d'ajouter du texte, des couleurs, des dégradés et des motifs.

Le rendu sur le Canvas s'effectue à l'aide d'un objet ` Canvas2DContext `, généralement à la suite du signal ` paint `.

Pour définir une zone de dessin dans l’élément Canvas2D, configurez les propriétés ` width ` et ` height `. Par exemple, le code suivant crée un élément Canvas2D dont la zone de dessin mesure 100 pixels de hauteur et 200 pixels de largeur :

import QtCanvas2D

Canvas2D {
    id: mycanvas
    width: 100
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
        ctx.fillRect(0, 0, width, height);
    }
}

Conseils pour le portage d’applications HTML5 Canvas existantes

Bien que l’élément Canvas fournisse une API similaire à celle de HTML5, les applications HTML5 Canvas doivent être modifiées pour fonctionner dans l’élément Canvas :

• Remplacez tous les appels à l’API DOM par des liaisons de propriétés QML ou des méthodes de l’élément Canvas.
• Remplacez tous les gestionnaires d'événements HTML par l'élément « MouseArea ».
• Remplacez les appels aux fonctions `setInterval`/`setTimeout` par l’élément ` FrameAnimation ` ou par l’utilisation de ` requestAnimationFrame()`.
• Placez le code de dessin dans le gestionnaire « onPaint » et déclenchez le dessin en appelant les méthodes « markDirty() » ou « requestPaint() ».
• Pour dessiner des images, chargez-les en appelant la méthode loadImage() du Canvas, puis demandez leur affichage dans le gestionnaire onImageLoaded.

Voir également Canvas2DContext, QCanvasPainterItem et QCanvasPainter.

Documentation sur les propriétés

available : bool

Indique quand Canvas est en mesure de fournir un contexte de dessin sur lequel effectuer des opérations.

context : object

Contient le contexte de dessin actif.

Si le canevas est prêt et qu'un appel à ` getContext()` a abouti, ou si la propriété ` contextType ` a été définie avec un type de contexte pris en charge, cette propriété contiendra le contexte de dessin actuel ; sinon, elle sera nulle.

contextType : string

Le type de contexte de dessin à utiliser.

Cette propriété est définie sur le nom du type de contexte actif.

Si elle est définie explicitement, le canevas tentera de créer un contexte du type indiqué dès qu'il sera disponible.

Le nom du type est le même que celui utilisé dans l'appel getContext() ; pour le canevas 2D, la valeur sera « 2d ».

Voir également getContext() et available.

Documentation sur les signaux

imageLoaded()

Ce signal est émis lorsqu'une image a été chargée.

Voir également loadImage().

paint(rect region)

Ce signal est émis lorsque l'region doit être affiché. Si un contexte est actif, il peut être référencé via la propriété « context ».

Ce signal peut être déclenché par les méthodes ` markDirty()`, ` requestPaint()` ou par la modification de la fenêtre de canevas actuelle.

painted()

Ce signal est émis une fois que toutes les commandes de dessin contextuelles ont été exécutées et que le Canvas a été affiché.

Documentation de la méthode

void cancelRequestAnimationFrame(int handle)

Cette fonction annulera la fonction de rappel d'animation référencée par handle.

object getContext(string contextId, ... args)

Renvoie un contexte de dessin, ou ` null ` si aucun contexte n'est disponible.

Le paramètre ` contextId ` désigne le contexte requis. L'élément ` Canvas2D ` renvoie un contexte qui implémente le mode de dessin requis. Après le premier appel à `getContext`, tout appel ultérieur à `getContext` avec le même `contextId` renverra le même objet de contexte. Tout argument supplémentaire (args) est actuellement ignoré.

Si le type de contexte n'est pas pris en charge ou si le canevas a déjà été sollicité pour fournir un type de contexte différent et incompatible, la valeur « null » sera renvoyée.

Canvas2D Ne prend en charge qu’un contexte 2D.

bool isImageError(url image)

Renvoie « true » si le chargement de l'image a échoué, « false » dans le cas contraire.

Voir également loadImage().

bool isImageLoaded(url image)

Renvoie « true » si l'image a été chargé avec succès et est prêt à être utilisé.

Voir aussi loadImage().

bool isImageLoading(url image)

Renvoie « true » si l'image est en cours de chargement.

Voir aussi loadImage().

void loadImage(url image, size sourceSize = undefined)

Charge l'image spécifiée de manière asynchrone.

Une fois l'image prête, le signal ` imageLoaded()` sera émis. L'image chargée peut être déchargée à l'aide de la méthode ` unloadImage()`.

Si sourceSize est spécifié, l’image sera redimensionnée à cette taille lors du chargement. Cela est utile pour charger des images redimensionnables (vectorielles) (par exemple, des SVG) à leur taille d’affichage prévue.

Voir également unloadImage(), imageLoaded(), isImageLoaded(), Context2D::createImageData() et Context2D::drawImage().

void markDirty()

Marque le canevas comme étant « sale ». Cela déclenchera le signal « paint ».

Voir également paint et requestPaint().

int requestAnimationFrame(callback)

Cette fonction planifie l'appel de la méthode ` callback ` avant la composition de la scène ` Qt Quick `.

void requestPaint()

Demander le rafraîchissement de toute la région visible.

Voir également markDirty().

void unloadImage(url image)

Décharge l'image.

Une fois qu'une image est déchargée, elle ne peut plus être dessinée par le contexte du canevas, à moins d'être rechargée.

Voir également loadImage(), imageLoaded(), isImageLoaded(), Context2D::createImageData() et Context2D::drawImage.