[SOLVED] How use pathElement in function

[CharlieDVP]

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

[CharlieDVP]

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.

[p3c0]

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.

[CharlieDVP]

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

[p3c0]

Right :) Still adhered to the old style ;)