[QtQuick - QML] Dynamic curves



  • Hello,

    I would like to display a graph in which there's a curve which has to evolve over time.

    A timer would be what i'm thinking of to make it happen but i haven't found how to display curves in my QML...

    What i've made actually is :

    @ Rectangle {
    id: rect3;
    //x: 25
    anchors.fill: parent
    width: 720;
    height: 480;
    color: "#00000000"
    PathView {
    id: paV3;
    opacity: 0.7
    anchors.fill: parent;
    model: 950;
    delegate: Rectangle {
    id: dot3;
    width: 1.0625; height: 1.0625;
    color: "#00c0ff";
    smooth: true
    }

                    path: Path {
                        id: ph3;
                        startX: 16.0; startY: paV3.height/2.0;
                        pathElements: [
                            PathQuad {
                                x: 40.0; y: paV3.height/2.0;
                                controlX: 20.0; controlY: ph3.startY +145.0;
                            },
                            PathQuad {
                                x: 80.0; y: paV3.height/2.0;
                                controlX: 60.0; controlY: ph3.startY -60.0;
                            },
                            PathQuad {
                                x: 120.0; y: paV3.height/2.0;
                                controlX: 100.0; controlY: ph3.startY +145.0;
                            },
                            PathQuad {
                                x: 160.0; y: paV3.height/2.0;
                                controlX: 140.0; controlY: ph3.startY -60.0;
                            },
                            PathQuad {
                                x: 200.0; y: paV3.height/2.0;
                                controlX: 180.0; controlY: ph3.startY +145.0;
                            },
                            PathQuad {
                                x: 240.0; y: paV3.height/2.0;
                                controlX: 220.0; controlY: ph3.startY -60.0;
                            },
                            PathQuad {
                                x: 284.0; y: paV3.height/2.0;
                                controlX: 260.0; controlY: ph3.startY +120.0;
                            }
                        ]
                    }
                }
            }@
    

    And a function that swap values to move the curves up and down.

    But how can I put data in to draw the curves dynamically ?



  • Hi,

    QtQuick 2.0 introduces a Canvas element that might be useful for this. Another option might be creating a custom item for drawing the curve (there are no built-in curve drawing items, besides the newly added Canvas).

    Regards,
    Michael


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.