Jiyuu

à tous,

Voici un petit bout de code qui montre comment on peut créer une courbe en QML avec un système d'axes "normal". J'entends par là avec l'origine en bas à gauche et non pas en haut à gauche comme le système de coordonnées de base le prévoit.

Les deux plus "grosses" difficultés résident dans :

• le déplacement de l'origine à l'endroit souhaité ;
• garder à l'esprit que l'on a potentiellement déplacer l'origine dans le canvas.

Dans le premier cas on va utiliser la propriété transform qui nous permettra de faire faire tourner notre canvas sur un ou plusieurs axes.
Dans le deuxième cas, il faut juste faire attention ;-).

Allez, passons à aux choses concraites... voici le code :

Code qml :

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
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
import QtQuick 2.4
 
Canvas {
    width: 500; height: 500
    contextType: "2d"
    transform: Rotation { origin.x: 0; origin.y: height/2; angle: 180; axis { x: 1; y: 0; z: 0 }}
 
    Path {
        id: myCurve1
        startX: 20; startY: 120
        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 }
    }
 
    Path {
        id: myCurve2
        startX: 20; startY: 120
        PathCurve { x: 75; y: 75 }
        PathCurve { x: 200; y: 150 }
        PathCurve { x: 325; y: 25 }
        PathCurve { x: 400; y: 100 }
    }
 
    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: {
        context.strokeStyle = Qt.rgba(0,0,1);
        context.path = myAxis;
        context.stroke();
 
        context.strokeStyle = Qt.rgba(1,0,0);
        context.path = myCurve1;
        context.stroke();
 
        context.strokeStyle = Qt.rgba(0,1,0);
        context.path = myCurve2;
        context.stroke();
        }
}

Et voila ce que cela donne :



Il ne vous reste plus qu'à vous amusez