Voir le flux RSS

Jiyuu

Création d'une courbe en QML

Noter ce billet
par , 16/01/2015 à 01h54 (1645 Affichages)
à 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 :
Nom : exemple.png
Affichages : 394
Taille : 15,3 Ko


Il ne vous reste plus qu'à vous amusez

Envoyer le billet « Création d'une courbe en QML » dans le blog Viadeo Envoyer le billet « Création d'une courbe en QML » dans le blog Twitter Envoyer le billet « Création d'une courbe en QML » dans le blog Google Envoyer le billet « Création d'une courbe en QML » dans le blog Facebook Envoyer le billet « Création d'une courbe en QML » dans le blog Digg Envoyer le billet « Création d'une courbe en QML » dans le blog Delicious Envoyer le billet « Création d'une courbe en QML » dans le blog MySpace Envoyer le billet « Création d'une courbe en QML » dans le blog Yahoo

Mis à jour 19/01/2015 à 16h32 par Jiyuu

Catégories
Qt Quick - QML

Commentaires

  1. Avatar de kolodz
    • |
    • permalink
    Je ne connais absolument pas QML. D'après wikipédia, c'est influencé par JavaScript. Mais,c'est bien pour du Qt application "Desktop" ?
    D'ailleurs, cela ressemble beaucoup au libraire JavaScript utilisant canvas. C'est similaire dans l'usage ?
    Car, la transformation est très siminiare :
    Code qml : Sélectionner tout - Visualiser dans une fenêtre à part
    transform: Rotation { origin.x: 0; origin.y: height/2; angle: 180; axis { x: 1; y: 0; z: 0 }}

    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var rotate = d3.svg.transform().rotate(-45);
    var translate = d3.svg.transform().translate(200, 100);

    Cordialement,
    Patrick Kolodziejczyk.
  2. Avatar de Jiyuu
    • |
    • permalink


    QML permet de faire des appli Desktop et mobile. Ce langage est issu en majorité de Qt, mais possède en effet beaucoup de points communs avec JavaScript à tel point, que les fonctions JavaScripts sont reconnues par QML.

    Dans un autre registre, tu verras à quel point ces deux langages sont très proches dans mon prochain billet : Connexion et Gestion d'une base de données (act I)


    Si tu as des commentaires, conseils, ... n'hésite surtout pas

    ++

    J
    Mis à jour 19/01/2015 à 16h47 par Jiyuu