Création dynamique de courbes (acte II)

Version imprimable

:salut: à tous,

Acte II, car il y a 2 ans 1/2, la même question a été posée avec des éléments de réponses : http://www.developpez.net/forums/d12...es-dynamiques/
Le sujet ayant été marqué RESOLU, j'ai préféré en refaire un, d'autant qu'au fond de moi, j'espère sincèrement que depuis une solution 100% QML a été mise en place.

Contrairement au premier sujet, pour ma part je souhaite uniquement récupérer des valeurs depuis un BDD et m'en servir pour tracer une courbe. Comme ça cela semble très simple, mais malheureusement je tourne en rond depuis un petit moment pour réaliser ceci.

Afin d'illustrer simplement mon cas, voici un morceau de code
Code:

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 import QtQuick 2.4 Canvas { id : canvas width: 500; height: 400 contextType: "2d" transform: Rotation { origin.x: 0; origin.y: height/2; angle: 180; axis { x: 1; y: 0; z: 0 }} Component.onCompleted: { } Path { id: myCurve1 startX: 20; startY: 120 } Path { id: myAxis startX: 20; startY: 20 pathElements : [ PathLine { x: 20 ; y: 300 }, PathLine { x: 20 ; y: 20 }, PathLine { x: 450 ; y: 20 }, PathLine { x: 20 ; y: 20 }] } onPaint: { context.strokeStyle = Qt.rgba(0,0,1); context.path = myAxis; context.stroke(); context.strokeStyle = Qt.rgba(1,0,0); context.path = myCurve1; context.stroke(); } }
Dans mon programme, la courbe doit se charger lorsque je cliquerai sur un bouton. Pour simplifier l'exemple je pars non pas sur le signal onClicked de mon bouton mais sur Componet.onCompleted.

L'idée que j'ai eu ai de faire ceci :
Code:

1 2 3 4 5 6 7 8 9 10 Componet.onCompleted : { myCurve1.pathElements = [PathCurve { x: 40; y: 116 }, PathCurve { x: 60; y: 112 }, PathCurve { x: 80; y: 104 }, PathCurve { x: 100; y: 96 }, PathCurve { x: 120; y: 86 }, PathCurve { x: 140; y: 76 }, PathCurve { x: 160; y: 60 }, PathCurve { x: 180; y: 44 }, PathCurve { x: 200; y: 20 }]
Avec l'idée par la suite de récupérer mes infos depuis ma BDD et via une boucle for ajouter mes points dans une liste.

Mais la syntaxe ne convient pas.
J'ai beau chercher sur le web, je n'ai rien trouvé de concluant, ou sinon je suis vraiment passé à coté de quelque chose.

Avez-vous une idée ?

D'avance merci.

++

J

Salut,

En fait, je me demande s'il est judicieux de passer par un Path et pas par une liste JS/modèle qui stocke des objets (les points de la courbe) et qui permet d'écrire après quelque chose comme ceci :

Code:

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
import QtQuick 2.0
 
Canvas {
    id: root
    // canvas size
    width: 200; height: 200
    // handler to override for drawing
    onPaint: {
        // get context to draw with
        var ctx = getContext("2d")
        // setup the stroke
        ctx.lineWidth = 4
        ctx.strokeStyle = "blue"
        // setup the fill
        ctx.fillStyle = "steelblue"
        // begin a new path to draw
        ctx.beginPath()
        // top-left start point
        ctx.moveTo(50,50)
        // upper line
        ctx.lineTo(150,50)
        // right line
        ctx.lineTo(150,150)
        // bottom line
        ctx.lineTo(50,150)
        // left line through path closing
        ctx.closePath()
        // fill using fill style
        ctx.fill()
        // stroke using line width and stroke style
        ctx.stroke()
    }
}

Mais plutôt à partir de la liste elle-même pour les lineTo() ?

Bonne soirée,
Louis

:salut: et merci à toi,

Entre temps je suis en effet tombé sur une exemple montrant cette solution.
L'inconvénient majeur, me semble-t-il, est que cette solution ne permettra pas d'avoir un rendu si net que PathCurve lors de la création d'une courbe sinus par exemple.

Dans l'immédiat, ce n'est pas forcément impératif pour moi, mais dans le cadre d'une évolution des fonctionnalités ça risque de bloquer.

Qui sait, peut-être que d'ici là il y aura une solution intégré à QML et facile d'accès... à moins que quelqu'un l'ai déjà trouvé ;)

[EDIT]
Re,

J'ai pris quelques minutes pour retravailler cette solution (et au passage y ajouter un commencement de curseur) :

Code:

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
import QtQuick 2.4
 
Canvas {
    id: canvas
    width: 500; height: 400
    transform: Rotation { origin.x: 0; origin.y: height/2; angle: 180; axis { x: 1; y: 0; z: 0 }}
    property var myCtx
    property real lastX
    property real lastY
 
    signal toto
    signal mouseChange
    signal mouseExit
 
    property var lst : [
        {"x":"0","y":"122"},
        {"x":"20","y":"120"},
        {"x":"40","y":"116"},
        {"x":"60","y":"112"},
        {"x":"80","y":"104"},
        {"x":"100","y":"96"},
        {"x":"120","y":"86"},
        {"x":"140","y":"76"},
        {"x":"160","y":"60"},
        {"x":"180","y":"44"},
        {"x":"200","y":"20"}]
 
    onToto: {
        for (var i = 0; i < lst.length; i++) {
            var posiX = lst[i]["x"]
            var posiY = lst[i]["y"]
            myCtx.lineTo(posiX, posiY)
        }
    }
 
    Path {
        id: myAxis
        startX: 20; startY: 20
        PathLine { x: 20 ; y: 300 }
        PathLine { x: 20 ; y: 20 }
        PathLine { x: 450 ; y: 20 }
        PathLine { x: 20 ; y: 20 }
    }
 
    onPaint: {
        lastX = area.mouseX
        lastY = area.mouseY
 
        var ctx = getContext("2d")
        myCtx = ctx
        myCtx.lineWidth = 1
        myCtx.strokeStyle = "blue"
        myCtx.fillStyle = "transparent"
        myCtx.beginPath()
        toto()
        myCtx.fill()
        myCtx.stroke()
 
        context.strokeStyle = Qt.rgba(0,0,1);
        context.path = myAxis
        context.stroke()
 
    }
    MouseArea {
        id: area
        anchors.fill: parent
        hoverEnabled : true
        onExited: mouseExit()
        onPressed: {
            canvas.lastX = mouseX
            canvas.lastY = mouseY
        }
        onPositionChanged: {
            canvas.requestPaint()
            mouseChange()
        }
    }
}

L'idée étant évidemment de réutiliser ce document QML dans un autre ;)

Je reste assez déçu, étonné voire frustré qu'il n'y ai pas une façon simple de faire avec PathCurve ... pourtant ce pathElements, me semble bien :scarymov:

:salut:

Je cherche toujours le moyen d'injecter les coordonnées des PathCurve depuis une base de données, liste, ...
Je suis tombé sur l'item Repeater qui aurait pu m'aider à faire ceci, mais à priori il ne fonctionne pas dans un Path.

Je suis tout de même assez étonné qu'il ne soit pas possible d'utiliser PathCurve de "manière dynamique". La création d'une courbe nécessite forcément d'aller piocher les coordoonées ici ou là...

Qu'en pensez-vous ?

[EDIT]
Un membre du forum Qt/Digia a pu m'aider. Voici le code qu'il propose et qui fonctionne au poil :
Code:

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 import QtQuick 2.4 Canvas { id: c width: 400; height: 200 contextType: "2d" Component { id: comp PathCurve { } } property var paths : [ comp.createObject(c, {"x": 75, "y": 75} ) ] Path { id: myPath startX: 0; startY: 100 pathElements: paths } onPaint: { context.strokeStyle = Qt.rgba(.4,.6,.8); context.path = myPath; context.stroke(); } Component.onCompleted: { paths.push(comp.createObject(c, {"x": 200, "y": 150} )) // ou paths[paths.lenght] = comp.createObject(c, {"x": 200, "y": 150} ) myPath.pathElements = paths } }
Merci à lui.

20/01/2015, 18h29
Amnell

Intéressant comme technique ! Attention à bien libérer la mémoire allouée après, par contre.
20/01/2015, 18h57
Jiyuu

Citation:

Envoyé par Amnell

Intéressant comme technique !

Oui et très rassurante ... ça me fait dire que QML est vraiment magnifique ;)

Citation:

Envoyé par Amnell

Attention à bien libérer la mémoire allouée après, par contre.

Je sais que cette préoccupation est assez fréquente en C++, mais j'avoue ne jamais m'être posée la question en QML ... sûrement du au fait que j'ai l'habitude de que mon petit Python le fasse comme un grand :mouarf:

Tu vois ça comment ?
20/01/2015, 21h05
Amnell

Salut,

À ce propos, la doc raconte ceci :

Citation:

In many user interfaces, it is sufficient to set an item's opacity to 0 or to move the item off the screen instead of deleting the item. If you have lots of dynamically created items, however, you may receive a worthwhile performance benefit if unused items are deleted.

Je ne sais pas si ça s'applique également à Python, je pense que oui parce que s'il garde une référence sur l'objet, ça le maintient en vie, et une suppression via QML mènera à perdre cette référence et à détruire l'objet. La fonction à appeler sur l'élément est destroy() avec comme argument optionnel une durée en msecs (exemple : mycomp.destroy(1000);).

Bonne soirée,
Louis