Dessiner des formes arbitraires n’a jamais été chose aisée avec Qt Quick. De base, on ne peut dessiner que des rectangles (avec des bords carrés ou arrondis, au choix). Impossible de dessiner une autre forme, à moins de faire appel à du code JavaScript et l’API Canvas ou de coder soi-même la forme en C++. C’est d’ailleurs l’une des limitations historiques de Qt Quick par rapport à la vue graphique. Avec Qt 5.10, la situation évolue : le module QtQuick.Shapes apporte justement ces éléments manquants… avec une performance inégalée (sauf pour des formes codées en C++).L’implémentation de ce module a été délicatement pensée. Ainsi, il n’y a aucune pixélisation du rendu : les formes dessinées le sont de manière vectorielle (sans passer par QImage ou un tampon OpenGL), ce qui laisse la possibilité de les afficher avec n’importe quelle résolution, voire de les animer. En effet, l’API est entièrement déclarative et tous les attributs des formes peuvent être animés avec les mécanismes habituels de Qt Quick — sans relancer des calculs inutiles.
Le rendu est implémenté de différentes manières, avec cependant la même API. L’implémentation de base réutilise le moteur de triangulation de QPainter en OpenGL, mais, sur les GPU NVIDIA, il est possible d’utiliser l’extension GL_NV_path_rendering pour accélérer le rendu. Pour le moteur de rendu logiciel de Qt Quick, tout se passe avec QPainter. Dans le futur, il sera ainsi possible d’ajouter un rendu par OpenVG ou Direct3D 12.
Ces formes sont dessinées par un composant Shape, mais la description est effectuée par un ou plusieurs ShapePath. Par exemple, pour dessiner un triangle avec une animation sur la largeur du trait et la couleur de remplissage :
| Code : | Sélectionner tout |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | Shape {
id: tri
anchors.fill: parent
ShapePath {
id: tri_sp
strokeColor: "red"
strokeWidth: 4
SequentialAnimation on strokeWidth {
running: tri.visible
NumberAnimation { from: 1; to: 20; duration: 2000 }
NumberAnimation { from: 20; to: 1; duration: 2000 }
}
ColorAnimation on fillColor {
from: "blue"; to: "cyan"; duration: 2000; running: tri.visible
}
startX: 10; startY: 10
PathLine { x: tri.width - 10; y: tri.height - 10 }
PathLine { x: 10; y: tri.height - 10 }
PathLine { x: 10; y: 10 }
}
} |
Source : Let There Be Shapes!.
