Discussion :

[dourouc05]

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 - Visualiser dans une fenêtre à part

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 }
    }
}

Cependant, le module en l’état n’est pas forcément à même de battre la vue graphique en termes de composants à afficher, chaque forme ayant un surcoût en performance à l’affichage — surtout sans accélération graphique, où un trop grand nombre de formes ou d’animations posera rapidement problème. Il est déjà possible de demander le calcul asynchrone de la géométrie, ce qui permet d’afficher rapidement l’interface, les formes Shape venant plus tard, sans retarder le reste de l’interface.

Source : Let There Be Shapes!.

[GilbertLatranche]

J'ai envie de dire c'est pas trop tôt :/

Ça fait 5 ans que les seules solutions disponibles pour ça étaient d'utiliser le rasterizer software ou du Canvas JS tout pourri. Ça faisait un peu tâche.