Affichage 2D avec Canvas
Niveau : intermédiaire
Objectifs : dessiner des formes arbitraires avec Canvas
Prérequis : Premiers pas avec Qt Quick, Présentation de JavaScript, Utiliser la
méthodologie modèle - vue
Qt Quick a la particularité de n'avoir qu'une seule forme géométrique à sa disposition :
le rectangle. Ce choix se justifie, puisque la majorité des interfaces peut s'écrire à
l'aide de rectangles, de texte et d'images. Le composant Rectangle dispose quand même
d'une option pour des coins arrondis, ce qui permet de dessiner des cercles et des
ellipses. Par contre, les composants de base ne proposent rien d'autre : impossible de
dessiner un triangle ou une courbe, par exemple.
Une technique pour contourner ces manques est d'implémenter soi-même les formes
requises en Python avec une intégration au niveau du graphe de scène (voir Section 3,
Communication par composant). Il est aussi possible de tout effectuer en JavaScript,
bien confortablement au sein de Qt Quick, à l'aide du composant Canvas. Celui-ci
implémente l'API Canvas de HTML5, ce qui permet de capitaliser sur sa
documentation.
Note > À cause de quelques différences entre Qt Quick et les navigateurs web au
niveau de l'interpréteur JavaScript, le code HTML5 existant qui utilise l'API Canvas
ne fonctionnera pas tel quel dans Qt Quick, mais l'adapter sera très simple. La plus
grande différence est qu'il faut déclarer les variables avec le mot clé var dans le code
JavaScript. Pour le reste, la documentation présente les changements à apporter.
Note > Le code des exemples de ce chapitre est disponible dans le dossier canvas
.
430
Niveau : intermédiaire
Objectifs : dessiner des formes arbitraires avec Canvas
Prérequis : Premiers pas avec Qt Quick, Présentation de JavaScript, Utiliser la
méthodologie modèle - vue
Qt Quick a la particularité de n'avoir qu'une seule forme géométrique à sa disposition :
le rectangle. Ce choix se justifie, puisque la majorité des interfaces peut s'écrire à
l'aide de rectangles, de texte et d'images. Le composant Rectangle dispose quand même
d'une option pour des coins arrondis, ce qui permet de dessiner des cercles et des
ellipses. Par contre, les composants de base ne proposent rien d'autre : impossible de
dessiner un triangle ou une courbe, par exemple.
Une technique pour contourner ces manques est d'implémenter soi-même les formes
requises en Python avec une intégration au niveau du graphe de scène (voir Section 3,
Communication par composant). Il est aussi possible de tout effectuer en JavaScript,
bien confortablement au sein de Qt Quick, à l'aide du composant Canvas. Celui-ci
implémente l'API Canvas de HTML5, ce qui permet de capitaliser sur sa
documentation.
Note > À cause de quelques différences entre Qt Quick et les navigateurs web au
niveau de l'interpréteur JavaScript, le code HTML5 existant qui utilise l'API Canvas
ne fonctionnera pas tel quel dans Qt Quick, mais l'adapter sera très simple. La plus
grande différence est qu'il faut déclarer les variables avec le mot clé var dans le code
JavaScript. Pour le reste, la documentation présente les changements à apporter.
Note > Le code des exemples de ce chapitre est disponible dans le dossier canvas
.
430