Change the origin.x and origin.y to rotate a Path

[JaySDC]

Hi again,

I guess the problem is fairly simple but even with my friends that know QT quick more than me we couldn't achieve a solution .



Right now I have a simple animation that rotates my path 360 degrees.
This code and the animation WORKS.
I run the animation when SPACE is pressed.

However I want to change the origin of the rotation transformation. By default it's x=0, y=0.



What code should I use?
And specifically where should I put it?



My animation:

SequentialAnimation {
            id: testAnimationDuPath2
            running: false
            loops: 1
            NumberAnimation { target: itemPrincipal; property: "rotation"; to: 360; duration: 1500 }
        }

SequentialAnimation {
            id: testAnimationDuPath2
            running: false
            loops: 1
            NumberAnimation { target: itemPrincipal; property: "rotation"; to: 360; duration: 1500 }
        }

To copy to clipboard, switch view to plain text mode 

The item containing Path, PathView and Delegate:

Item {
        id: itemPrincipal
 
        // initial state
        z:0
 
 
        ListModel {
                id: subTypeModel
                ListElement { name: "toto"; path: "file:///D:/test/toto"; }
                ListElement { name: "tata"; path: "file:///D:/test/tata"; }
                ListElement { name: "tutu"; path: "file:///D:/test/tutu"; }
            }
 
        PathView {
            id: currentWheel
 
            // Properties (THIS IS WHAT I TRIED, BUT THEN I PLACED THIS SAME CODE LIKE EVERYWHERE, WITHOUT ANY RESULT)
            transform:
                Rotation {
                    id:rotationPath
                        origin.x: 408;
                        origin.y: 225;
                        angle: 0;
                    }
 
            focus: true
 
            model : gameListModel
 
            FolderListModel {
                   id: gameListModel
            }
 
            path: Path {
                id:myPath
 
                startX: 95; startY: 160
 
                PathQuad { x: 43; y: 53 ; controlX: 18; controlY: 78}
                PathAttribute { name: "angle"; value: itemAngle }
 
                PathQuad { x: 180; y: 22 ; controlX: 108; controlY: 26}
                PathAttribute { name: "angle"; value: itemAngle*2 }
 
                PathQuad { x: 320; y: 19 ; controlX: 250; controlY: 21}
                PathAttribute { name: "angle"; value: itemAngle*3 }
 
                PathQuad { x: 460; y: 22 ; controlX: 390; controlY: 21}
                PathAttribute { name: "angle"; value: itemAngle*4 }
 
                PathQuad { x: 597; y: 53 ; controlX: 528; controlY: 37}
                PathAttribute { name: "angle"; value: itemAngle*5 }
 
                PathQuad { x: 545; y: 159 ; controlX: 571; controlY: 106}
                PathAttribute { name: "angle"; value: itemAngle*6 }
            }
 
 
 
            // Delegate Component:
            delegate: Image {
                id: wheelicon
 
                z: PathView.z
 
            }
 
        }
 
    }

Item {
        id: itemPrincipal

        // initial state
        z:0


        ListModel {
                id: subTypeModel
                ListElement { name: "toto"; path: "file:///D:/test/toto"; }
                ListElement { name: "tata"; path: "file:///D:/test/tata"; }
                ListElement { name: "tutu"; path: "file:///D:/test/tutu"; }
            }

        PathView {
            id: currentWheel

            // Properties (THIS IS WHAT I TRIED, BUT THEN I PLACED THIS SAME CODE LIKE EVERYWHERE, WITHOUT ANY RESULT)
            transform:
                Rotation {
                    id:rotationPath
                        origin.x: 408;
                        origin.y: 225;
                        angle: 0;
                    }

            focus: true

            model : gameListModel

            FolderListModel {
                   id: gameListModel
            }

            path: Path {
                id:myPath

                startX: 95; startY: 160

                PathQuad { x: 43; y: 53 ; controlX: 18; controlY: 78}
                PathAttribute { name: "angle"; value: itemAngle }

                PathQuad { x: 180; y: 22 ; controlX: 108; controlY: 26}
                PathAttribute { name: "angle"; value: itemAngle*2 }

                PathQuad { x: 320; y: 19 ; controlX: 250; controlY: 21}
                PathAttribute { name: "angle"; value: itemAngle*3 }

                PathQuad { x: 460; y: 22 ; controlX: 390; controlY: 21}
                PathAttribute { name: "angle"; value: itemAngle*4 }

                PathQuad { x: 597; y: 53 ; controlX: 528; controlY: 37}
                PathAttribute { name: "angle"; value: itemAngle*5 }

                PathQuad { x: 545; y: 159 ; controlX: 571; controlY: 106}
                PathAttribute { name: "angle"; value: itemAngle*6 }
            }



            // Delegate Component:
            delegate: Image {
                id: wheelicon

                z: PathView.z

            }

        }

    }

To copy to clipboard, switch view to plain text mode 

Yours,
--Jay

[anda_skoa]

I am not sure what the problem is.

You don't want to rotate the path view but the parent item?

Cheers,
_

[JaySDC]

I guess you are right.
I am still confused about all this.
I spoke about rotation of the PATH because that is what VISUALLY happen on my screen, the path rotates, but with the wrong origin : )

So first, for what I want to achieve, is this code right or do I need something else or in addition?

transform:
                Rotation {
                    id:rotationPath
                        origin.x: 408;
                        origin.y: 225;
                        angle: 0;
                    }

transform:
                Rotation {
                    id:rotationPath
                        origin.x: 408;
                        origin.y: 225;
                        angle: 0;
                    }

To copy to clipboard, switch view to plain text mode 

2) if the code is right, WHERE should I put it?
I tried these places:
a) as properties of the ITEM containing the listmodel, model, path, pathview, delegate
b) in the path
c) in the pathview
d) in de delegate
e) directly in the SequentialAnimation as PropertyChanges {}


Arghh this is driving me crazy

Yours,
--Jay

[anda_skoa]

transform:
                Rotation {
                    id:rotationPath
                        origin.x: 408;
                        origin.y: 225;
                        angle: 0;
                    }

transform:
                Rotation {
                    id:rotationPath
                        origin.x: 408;
                        origin.y: 225;
                        angle: 0;
                    }

To copy to clipboard, switch view to plain text mode 

2) if the code is right, WHERE should I put it?

If you want this to be the rotation of itemPrincipal, then put it into that item's transform property.

You also need to change the target of you number animation to rotationPath, property angle.

Cheers,
_

[JaySDC]

Working Thx!

I was referencing/calling anything BUT the id of the transform: rotation object.

++
--Jay