QT QMatrix4x4 matrix for scale and rotation with origin x and y

Question

I am working on image transformation,I want to scale and rotate image at the same time from x origin and y origin. I tried to use separate Scale,Rotate but they work one at the same time. here is my code

function setRotation(rotation){
    rt.origin.x=imagQuickitem.anchorPoint.x;
    rt.origin.y=imagQuickitem.anchorPoint.y;
    rt.angle=rotation
    image.transform=rt;
    image.transform=sc;
}

function setScale(scale){
    sc.origin.x=imagQuickitem.anchorPoint.x;
    sc.origin.y=imagQuickitem.anchorPoint.y;
    sc.xScale=scale;
    sc.yScale=scale;
    image.transform=sc;
}

Scale { id:sc; }
Rotation { id:rt; }

Well, It seems the solution is QMatrix4x4,I tried to use QMatrix4x4 and found this link Qt Transform matrix but I have no idea how to write matrix to work for both scale and rotation, should I multiple scale matrix with rotation matrix?

Hi. Your code is not complete. We can't see the object (e.g. a simple `Rectangle`) that you want to rotate, and how you *apply* the rotation and scaling, and where you call those functions. Further a small illustration of the expected result would be awsome so we can validate our solutions before posting them. — derM - not here for BOT dreams, Nov 26 '17 at 21:25
And in regard of your comment `should I multiple scale matrix with rotation matrix?`: Generally curiosity is great. As long as you don't destroy anything or cause harm - just try it! https://en.wikipedia.org/wiki/Transformation_matrix#Composing_and_inverting_transformations — derM - not here for BOT dreams, Nov 26 '17 at 21:34

absolute.madness · Accepted Answer · 2017-11-27T06:28:05.933

There are 2 solutions I could think of so far. Solution 1: combine Rotation with Scale. Solution 2: explicitly calculate the transformation matrix. See the following code snippet:

Image {
    id: img
    source: "Lenna.png"
    property real rotD: 45 // angle (degrees)
    property real rotR:  rotD * Math.PI / 180 // angle (radians)
    property real scale: 2 // scaling value
    property real x0: 264 // origin.x
    property real y0: 264 // origin.y
    // solution 1: combine 2 transforms
    transform: [
        Rotation{origin.x: img.x0; origin.y: img.y0; angle: img.rotD; },
        Scale{origin.x: img.x0; origin.y: img.y0; xScale: img.scale; yScale: img.scale}
    ]
    // solution 2: do the math to calculate the matrix
//    transform: Matrix4x4 {
//    matrix: Qt.matrix4x4(
//        img.scale*Math.cos(img.rotR), -img.scale*Math.sin(img.rotR), 0, -img.scale*Math.cos(img.rotR)*img.x0 + img.scale*Math.sin(img.rotR)*img.y0 + img.x0,
//        img.scale*Math.sin(img.rotR), img.scale*Math.cos(img.rotR),  0, -img.scale*Math.sin(img.rotR)*img.x0 - img.scale*Math.cos(img.rotR)*img.y0 + img.y0,
//        0, 0, 1, 0,
//        0, 0, 0, 1)
//    }
}

QT QMatrix4x4 matrix for scale and rotation with origin x and y

1 Answers1