Custom transform origin point during rotation



  • Hi,

    I am having problems to set a custom transform origin point and rotate an image around it.
    That's how I do it now (without success):

    That's the definition of the image and the state
    @Image {
    id: image1
    smooth: true
    source: "image1.png"
    }

            State {
                name: "rotated"
                PropertyChanges {
                    target: image1
                    transformOriginPoint: Qt.point(20, 40)
                }
            }@
    

    That's my animation--

    @SequentialAnimation{
    loops: Animation.Infinite
    running: true

            PropertyAction { target: image1; property: "transformOriginPoint" }
             RotationAnimation { target: image1; to: 180; direction: RotationAnimation.Clockwise; duration: 2000}
    
            PropertyAction { target: image1; property: "transformOriginPoint" }
             RotationAnimation { target: image1; to: 0; direction: RotationAnimation.Counterclockwise; duration: 2000
        }@
    

    I couldn't find any example in the documentation about custom transform origin points.

    Thanks



  • Does an Image even have a transformOriginPoint? I cannot find it in the documentation.
    And what do you expect the PropertyActions to do? They do not specify a value.



  • see the wheeling indicator on RssNews example "link":http://developer.qt.nokia.com/doc/qt-4.8/demos-declarative-rssnews-qml-rssnews-content-busyindicator-qml.html#id-b1b2c7a2-5ba8-4c66-9740-dea97e4e049b

    a "number animation" has set to the image "rotate" property.
    also take a look at "QML Rotation Element":http://doc.qt.nokia.com/4.7-snapshot/qml-rotation.html



  • ludde: the image element inherits from item
    And item has the transformOriginPoint

    Mohsen Mohsen: the rssnews example doesn't use a custom origin point.

    But, still no success with the rotation... it doesn't even rotate

    That's how I tried it:

    @State {
    name: "rotated"
    PropertyChanges {
    target: image1
    transformOriginPoint: Qt.point(20, 40)
    rotation: 180
    }
    }

                Transition{
                    RotationAnimation {
                        duration: 2000
                        direction: RotationAnimation.Clockwise
                    }
    
                }@
    

    That's the animation:

    @
    SequentialAnimation{
    loops: Animation.Infinite
    running: true

            PropertyAction { target: rechteck_links; property: "state"; value: "rotated" }
    
        }@
    

    And that's the output that I get:
    It doesn't make any sense to me.
    QColor::setNamedColor: Unknown color name 'rotated'

    Any Ideas?



  • Ok finally I solved the problem with the help of the qml mailing list.

    That's how it works:

    @Image {
    anchors.centerIn: parent
    source: "qt-logo.png"
    transform: Rotation {
    id: myRot
    }
    SequentialAnimation {
    running: true
    loops: Animation.Infinite
    PropertyAction { target: myRot; property: "origin.x"; value: 0 }
    PropertyAction { target: myRot; property: "origin.y"; value: 0 }
    NumberAnimation { target: myRot; property: "angle"; to: 180; duration: 2000}
    PropertyAction { target: myRot; property: "origin.x"; value: 40 }
    PropertyAction { target: myRot; property: "origin.y"; value: 40 }
    NumberAnimation { target: myRot; property: "angle"; to: 0; duration: 2000}
    }
    }
    @



  • [quote author="qtd1d1" date="1324472112"]
    Mohsen Mohsen: the rssnews example doesn't use a custom origin point.
    [/quote]

    RssNews example was a simple face for your demand. The other link has more explained about how to give a custom origin.

    BTW, Nice to see your problem has resolved.


Log in to reply
 

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