[SOLVED] How use pathElement in function



  • Hello,

    I want use pathElement of a Path in a funtion, but I don't find a way to do this.
    Here is my code :

    @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 }}

    signal trace
    
    onTrace : {
        myCurve2.pathElements = [PathCurve { x: 75; y : 75}, PathCurve {x:200; y:150}]      
    }
    
    Path {
        id: myCurve2
        startX: 20; startY: 120
        pathElements: [
            //PathCurve { x: 75; y: 75 },
            //PathCurve { x: 200; y: 150 },
            //PathCurve { x: 325; y: 25 },
            //PathCurve { x: 400; y: 100 }
        ]
    
    }
    
    onPaint: {
        trace()
        context.strokeStyle = Qt.rgba(0,1,0);
        context.path = myCurve2;
        context.stroke();
    }
    

    }
    @

    This use of pathElements does not. Do you know how to do it right? The goal is to be able to create a curve dynamically.

    In advance thank you

    Charlie



  • To clarify, what I want is just to use PathCurve dynamically, ie by creating the curve depusi coordinates calculated in my application.

    I find it hard to believe that this is not possible.


  • Moderators

    Hi,

    AFAIK pathElement requires a list and list does not allow to add/remove objects, so try with var type instead since it allows to add/remove items dynamically.

    @
    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[paths.length] = comp.createObject(c, {"x": 200, "y": 150} )
       myPath.pathElements = paths
    }
    

    }
    @

    So you can play with the code in Component.onCompleted to create more objects.
    Hope this helps...

    P.S: Don't forget to "requestPaint()":http://doc.qt.io/qt-5/qml-qtquick-canvas.html#requestPaint-method to repaint the changes.



  • Hello,

    The code you propose works well.

    Small note as paths is an array JavaScript we could replace:
    @paths [paths.length] = comp.createObject (c, {"x" 200, "y": 150})@

    by
    @paths.push (comp.createObject (c, {"x" 200, "y": 150}))@

    Thank you very much.

    Charlie


  • Moderators

    Right :) Still adhered to the old style ;)


Log in to reply
 

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