Custom transform origin point during rotation

qtd1d1

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

ludde

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.

mohsen

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

qtd1d1

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?

qtd1d1

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

mohsen

[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.