QML PhotoShop like Transform Control

[deus_duke]

!https://lh3.googleusercontent.com/-2gr-oT-7swQ/Tnqtv-06zpI/AAAAAAAAAGM/OjSExWkKFgs/s360/TransformControlEx.gif(TransfromControlEx)!

I am trying to create a PhotoShop like transform control as a QML Component. I am doing this by creating a series of circles and line, and then parenting them to a draggable image. Moving the different circles around the the image scale and rotate the image just like in PS. The problem is that since the transform control is a child of the image, the circle are getting scaled also. How would I go about keep this from happening the child of a component from scaling with the parent?

[deus_duke]

Tranform Control
@import QtQuick 1.0

Rectangle {
id: transControl
width: parent.width
height: parent.height
color: "#00000000"
anchors.fill: parent

property int gripSize: 10
property int gripZ: 25
property double originalWidth: width

Rectangle {
    id: border
    width: parent.width
    height: parent.height
    color: "#00000000"
    border.color: "#000000"
    z: 0

    ResizeGrip {
        id: topLeftGrip
        type: "topLeft"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 0 - parent.width / 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: 0 - parent.height / 2
        z: gripZ
    }

    ResizeGrip {
        id: topMiddleGrip
        type: "topMiddle"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: 0 - parent.height / 2
        z: gripZ
    }

    ResizeGrip {
        id: topRightGrip
        type: "topRight"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 0 + parent.width / 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: 0 - parent.height / 2
        z: gripZ
    }

    ResizeGrip {
        id: midLeftGrip
        type: "middleLeft"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 0 - parent.width / 2
        anchors.verticalCenter: parent.verticalCenter
        z: gripZ
    }

    ResizeGrip {
        id: midRightGrip
        type: "middleRight"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 0 + parent.width / 2
        anchors.verticalCenter: parent.verticalCenter
        z: gripZ
        Scale{
            id: mrScale
            origin.x: midLeftGrip.x
            origin.y: midLeftGrip.y
            xScale: .5
        }
        MouseArea{
            id: ma
            anchors.fill: parent
            drag.axis: Drag.XAxis
            drag.target: midRightGrip
            onPressed: {
                console.log(midRightGrip.type + " was pressed");
                midRightGrip.anchors.horizontalCenter = undefined;
            }
            onReleased: {
                console.log(midRightGrip.type + " was released");
                midRightGrip.anchors.horizontalCenter = midRightGrip.parent.horizontalCenter;
            }
        }
        onXChanged: {
            var parent = transControl.parent
            if (ma.drag.active){
                var distance = Math.abs(midRightGrip.x - midLeftGrip.x)
                mrScale.xScale = distance
                mrScale.xScale = distance / transControl.originalWidth
                parent.transform = mrScale
                console.log(transControl.originalWidth)
                console.log("Distance is " + distance)
                console.log("Scale is " + mrScale.xScale)
                console.log(midRightGrip.type + " moved to " + midRightGrip.x)
            }
        }
    }

    ResizeGrip {
        id: rgtLeftGrip
        type: "rightLeft"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 0 - parent.width / 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: parent.height / 2
        z: gripZ
    }

    ResizeGrip {
        id: rgtMiddleGrip
        type: "rightMiddle"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: parent.height / 2
        z: gripZ
    }

    ResizeGrip {
        id: rgtRightGrip
        type: "rightRight"
        width: transControl.gripSize
        height: transControl.gripSize
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.horizontalCenterOffset: 0 + parent.width / 2
        anchors.verticalCenter: parent.verticalCenter
        anchors.verticalCenterOffset: parent.height / 2
        z: gripZ
    }
}

}
@

[deus_duke]

Code that instantiates it onto the draggable image
@ var component = Qt.createComponent("Transform.qml");
console.log("creating transform control");
if (component.status == Component.Ready){
var transform = component.createObject(di);
transform.x = di.x - transform.width / 2
transform.y = di.y - transform.height / 2
}@

[mbrasser]

Hi,

Rather than making your control a child of the Image you want to manipulate, can you make it a sibling? You could e.g. add a target property to transControl:

@property Item target@

which would be used internally where transControl.parent is currently used. Externally, you would then assign the target wherever the control is used:

@Rectangle {
Image { id: myImage }
TransformControl { target: myImage }
}@

Regards,
Michael

[deus_duke]

I have updated the transControl as you have said with
@property Item target@

Then, on the javascript side when I create the control with
@var component = Qt.createComponent("Transform.qml");
component.target = target;@

I get this error:
Error: Cannot assign to non-existent property "target"

Do you know what I am doing wrong?

[mbrasser]

Hi,

The target property is defined for the instances of the component, rather than the component itself, so it needs to be set on the objects returned from createObject:

@var obj = component.createObject(parent)
obj.target = targetItem
@

If you are using QtQuick 1.1 you can also do something like the following (which is faster and should potentially generate fewer warnings):

@var obj = component.createObject(parent, { target: targetItem })

Regards,
Michael