Création dynamique d'une courbe et interactions en QML

à l'aide du composant Canvas, un billet de Jiyuu

Le 9 octobre 2015, par Jiyuu

0PARTAGES

Bonjour,

Dans un précédent billet, nous avions vu comment créer une courbe en QML depuis une liste de points connus.

Je vous propose maintenant de voir comment créer une courbe dynamiquement, c'est-à-dire en exploitant, par exemple, une liste de coordonnées depuis une base de données ou d'un calcul.

En nous inspirant du premier billet, nous allons créer la fenêtre, le canvas et les différents éléments qui nous permettront de créer notre courbe ou d'interagir avec celle-ci.
Voici ce que cela donnerait :

Code qml :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
 
 
Window {
    visible: true
    width: 800; height: 500
    x: 100 ; y: 100
    title: "Create curve with QML"
 
 
    Rectangle{
        id: root
        anchors.fill: parent
 
        ColumnLayout {
            id: grid
            anchors.fill: parent
 
 
            RowLayout {
                id: control
                Layout.fillWidth: true
                implicitHeight: 25
                Button {
                    text: "Trace"
                }
 
                Button {
                    text: "Efface"
                }
 
                Slider {
                    id: slider
                    value: 0
                    maximumValue: 20
                }
 
                Item {
                    Layout.fillWidth: true
                }
 
                Label {
                    id: posiX
                }
 
                Label {
                    id: posiY
                }
 
                Label {
                    id: posiX2
                }
            }
 
            Rectangle {
                id: area
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "lightgray"
                Canvas {
                    id: canvas
                    anchors.fill: parent
                    transform: Rotation { origin.x: area.x; origin.y: area.height/2; angle: 180; axis { x: 1; y: 0; z: 0 }}
                    property int origX: 0
                    property int origY: 0
                    property int maxX: width - origX
                    property int maxY: height - origY
 
                    property alias pointCurve: pointCurve
 
                    /* c'est ici que ça commence à devenir intéressant. Comme précédemment nous allons créer au démarrage de l'application nos axes, mais nous n'irons pas plus loin.*/
 
                    onPaint: {
                        getContext("2d")
 
/* getContext("2d") est nécessaire pour indiquer dans quel type de context nous nous trouvons. 
Ici on déclare donc un Context2D (http://doc.qt.io/qt-5/qml-qtquick-context2d-members.html) qui a notamment deux méthodes qui nous intéresseront tout  particulièrement :
   - beginPath()
   - closePath()
 
Entre ces deux méthodes, vous pouvez créer comme bon vous semble différents chemins et y appliquer un style unique (couleur, épaisseur du trait...) .
Pour appliquer d'autres styles il faudra redéclarer un nouveau Path (chemin en anglais).*/
 
                        /* Trace Axes */
                        context.beginPath()
                        context.lineWidth = 2
                        context.moveTo(origX, origY)  // permet de se déplacer sans tracer de points
                        context.lineTo(maxX, origY)    // permet de tracer une ligne
                        context.moveTo(origX, origY)
                        context.lineTo(origX, maxY)
                        context.strokeStyle = Qt.rgba(0,0,0);
                        context.stroke()
                        context.closePath()
                    }
 
                    ListModel{id: pointCurve}
 
 
                }
            }
        }
    }
}

À ce stade vous devriez avoir quelque chose qui ressemble à ceci :

Nous allons maintenant créer notre courbe.

Nous allons tout d'abord compléter nos composants Button et Slider afin de permettre l'interaction avec notre Canvas. Commençons par remplir notre ListModel des points à tracer :

Code qml :

Sélectionner tout

1
2
3
4
5
6
7
8
9
Button {
    text: "Trace"
    onClicked: {
        for (var i=0; i<=20; i++){
            pointCurve.append({"x":i*20, "y":Math.pow(i,2)})
        }
         canvas.traceCurve() // nous verrons cette fonction un peu plus bas.
    }
}

Puis la gestion de l'effacement de notre courbier :

Code qml :

Sélectionner tout

1
2
3
4
5
6
7
Button {
    text: "Efface"
    onClicked: {
        slider.value = 0
        canvas.clear() // Comme pour canvas.traceCurve() nous verrons bientôt cette fonction.
    }
}

Et enfin notre Slider qui nous permettra d'afficher un curseur :

Code qml :

Sélectionner tout

1
2
3
4
5
6
7
8
9
Slider {
    id: slider
    value: 0
    maximumValue: 20
    onValueChanged: {
        if (value !== 0)canvas.point(root.valueX*20, Math.pow(root.valueX,2))
        canvas.traceCurve()
    }
}

Et voici enfin le moment tant attendu : le traçage de la courbe.

Pour cela nous allons implémenter la fonction suivante :

Code qml :

Sélectionner tout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function traceCurve() {
    if (context){
        context.beginPath()                           // comme précédemment nous créons un nouveau Path
        context.lineWidth = 1
        for (var i = 0; i < pointCurve.count; i++) {  // Pour chaque élément de notre ListModel, nous créons une nouvelle ligne
           var posiX = origX + pointCurve.get(i).x
           var posiY = origY + pointCurve.get(i).y
           context.lineTo(posiX, posiY)
       }
       context.moveTo(origX, origY)
       context.strokeStyle = Qt.rgba(0,0,1);
       context.stroke()                               // Nous appliquons le style voulu
       context.closePath()                            // Nous fermons notre chemin
    }
 
requestPaint()                                        // et nous lançons la requête de rendu

Le principe pour tracer le curseur (fonction point () utilisée dans le Slider) est sensiblement le même.
Pour effacer le contenu de notre Canvas il suffit d'effacer le contenu de notre ListModel, faire un reset du context et redonner l'ordre de tracer les nouveaux éléments : c'est à dire rien du tout.

Code qml :

Sélectionner tout

1
2
3
4
5
6
7
function clear(){
    if (context){
        pointCurve.clear()
        context.reset()
        requestPaint()
    }
}

Voici ce que donne le code complet :

Code qml :

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2
 
 
Window {
    visible: true
    width: 800; height: 500
    x: 100 ; y: 100
    title: "Create curve with QML"
 
 
    Rectangle{
        id: root
        anchors.fill: parent
 
        property alias valueX: slider.value
 
        ColumnLayout {
            id: grid
            anchors.fill: parent
 
 
            RowLayout {
                id: control
                Layout.fillWidth: true
                implicitHeight: 25
                Button {
                    text: "Trace"
                    onClicked: {
                        for (var i=0; i<=20; i++){
                            pointCurve.append({"x":i*20, "y":Math.pow(i,2)})
                        }
                        canvas.traceCurve()
                    }
                }
                Button {
                    text: "Efface"
                    onClicked: {
                        slider.value = 0
                        canvas.clear()
                    }
                }
                Slider {
                    id: slider
                    value: 0
                    maximumValue: 20
                    onValueChanged: {
                        if (value !== 0)canvas.point(root.valueX*20, Math.pow(root.valueX,2))
                        canvas.traceCurve()
                    }
                }
                Item {
                    Layout.fillWidth: true
                }
 
                Label {
                    id: posiX
                    text: "x : " + (root.valueX*20).toFixed(2)
                }
                Label {
                    id: posiY
                    text: "y : " + Math.pow(root.valueX,2).toFixed(2)
                }
                Label {
                    id: posiX2
                }
            }
 
            Rectangle {
                id: area
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "lightgray"
                Canvas {
                    id: canvas
                    anchors.fill: parent
                    transform: Rotation { origin.x: area.x; origin.y: area.height/2; angle: 180; axis { x: 1; y: 0; z: 0 }}
                    property int origX: 0
                    property int origY: 0
                    property int maxX: width - origX
                    property int maxY: height - origY
 
                    property alias pointCurve: pointCurve
 
 
 
                    function clear(){
                        if (context){
                            pointCurve.clear()
                            context.reset()
                            requestPaint()
                        }
                    }
 
                    function point(q, h){
                        context.reset()
                        context.beginPath()
                        context.lineWidth = 1
                        context.moveTo(origX, h+origY)
                        context.lineTo(maxX, h+origY)
                        context.moveTo(q+origX, origY)
                        context.lineTo(q+origX, maxY)
                        context.strokeStyle = Qt.rgba(1,0,0);
                        context.stroke()
                        context.closePath()
                        requestPaint()
                    }
 
                    function traceCurve() {
                        if (context){
                            context.beginPath()
                            context.lineWidth = 1
                            for (var i = 0; i < pointCurve.count; i++) {
                                var posiX = origX + pointCurve.get(i).x
                                var posiY = origY + pointCurve.get(i).y
                                context.lineTo(posiX, posiY)
                            }
                            context.moveTo(origX, origY)
                            context.strokeStyle = Qt.rgba(0,0,1);
                            context.stroke()
                            context.closePath()
                        }
 
                        requestPaint()
                    }
 
                    onPaint: {
                        getContext("2d")
 
                        /* Trace Axes */
                        context.beginPath()
                        context.lineWidth = 2
                        context.moveTo(origX, origY)
                        context.lineTo(maxX, origY)
                        context.moveTo(origX, origY)
                        context.lineTo(origX, maxY)
                        context.strokeStyle = Qt.rgba(0,0,0);
                        context.stroke()
                        context.closePath()
                    }
 
                    ListModel{id: pointCurve}
                }
            }
        }
    }
}

Vous avez maintenant en main de quoi réaliser de belles courbes dynamiquement, alimentées par vos calculs les plus fous ou votre super base de données

Vous avez lu gratuitement 19 articles depuis plus d'un an.
Soutenez le club developpez.com en souscrivant un abonnement pour que nous puissions continuer à vous proposer des publications.

Une erreur dans cette actualité ? Signalez-nous-la !

Votre nom : Votre e-mail :

Décrivez l'erreur que vous souhaitez porter à notre connaissance :

Identifiez-vous

Créer un compte

Création dynamique d'une courbe et interactions en QML

à l'aide du composant Canvas, un billet de Jiyuu

Identifiant
Mot de passe

Mot de passe oublié ?

Identifiez-vous

Créer un compte

Création dynamique d'une courbe et interactions en QML à l'aide du composant Canvas, un billet de Jiyuu

Création dynamique d'une courbe et interactions en QML

à l'aide du composant Canvas, un billet de Jiyuu