Results 1 to 4 of 4

Thread: Zoom an object from center

  1. #1
    Join Date
    Aug 2011
    Location
    Pune, India
    Posts
    18
    Qt products
    Qt4
    Platforms
    Windows

    Default Zoom an object from center

    Hi,

    I m trying to increase the size of an object(rectangle transformed to circle).
    My objective is to increase the size of an object using some predefined data in js file. But increment should looks like the object is zoomed from center and not from the lefttop corner.
    Below code is incrementing from topleft.
    Please suggest how to do it from center.
    Code:

    ------sim_ani.qml
    import QtQuick 1.0
    import "simulation_data.js" as Sd

    Rectangle
    {
    id: myRect;
    width: 1000;
    height: 1000;
    state: "OldState"
    color:"white"
    Rectangle
    {
    id: s0;
    width: 20;
    height: 20;
    color: "red"
    radius: 10

    x: 250
    y: 50
    }

    Rectangle
    {
    id: s1;
    width: 40;
    height: 40;
    color: "red"
    radius: 20
    x: 250
    y: 200
    }

    Rectangle
    {
    id: s2;
    width: 20;
    height: 20;
    color: "red"
    radius: 10
    x: 200
    y: 350
    }
    Rectangle
    {
    id: s3;
    width: 20;
    height: 20;
    color: "red"
    radius: 10
    x: 300
    y: 350
    }
    Rectangle
    {
    id: start;
    width: 60;
    height: 40;
    color: "red"
    radius: 30
    x: 250
    y: 500

    Text {
    id: name
    text: "Start"
    color: "White"
    anchors.centerIn: parent;



    }
    MouseArea
    {
    anchors.fill: parent;
    onClicked: {
    if (myRect.state == "OldState") myRect.state = "NewState";
    else myRect.state = "OldState"
    }
    }

    }
    }


    states:
    [
    State
    {
    name: "NewState"


    //0.000000 0.000000 10.000000 0.000000 0.000000
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 20; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 10; color: "green";x:300;y:350 }


    //1.000000 0.098023 9.900498 0.000493 0.000986
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.098023*50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.900498; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 50* 0.000493 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 50* 0.000986 + 10; color: "green";x:300;y:350 }

    //2.000000 0.192176 9.801986 0.001946 0.003892
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.192176*50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.801986; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.001946 * 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.003892 * 50 + 10; color: "green";x:300;y:350 }

    //3.000000 0.282582 9.704455 0.004321 0.008642
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.282582 * 50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.704455; color: "green" ;x:250;y:200}
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.004321 * 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.008642 * 50 + 10; color: "green" ;x:300;y:350}

    //4.000000 0.369357 9.607893 0.007583 0.015167
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.369357 * 50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.607893; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.007583 * 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.015167 * 50 + 10; color: "green" ;x:300;y:350}

    //5.000000 0.452661 9.512226 0.011704 0.023409
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.452661*50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.512226; color: "green" ;x:250;y:200}
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.011704* 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.023409* 50 + 10; color: "green" ;x:300;y:350}

    //6.000000 0.532547 9.417414 0.016680 0.033359
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.532547* 50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.417414; color: "green" ;x:250;y:200}
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.016680* 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.033359 * 50+ 10; color: "green";x:300;y:350 }

    //7.000000 0.609014 9.323457 0.022509 0.045019
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.609014* 50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.323457; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.022509* 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.045019* 50 + 10; color: "green";x:300;y:350 }

    // 8.000000 0.682063 9.230357 0.029193 0.058387
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.682063* 50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.230357; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.029193* 50 + 10; color: "green";x:200;y:350 }
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.058387* 50 + 10; color: "green";x:300;y:350 }

    //9.000000 0.751692 9.138112 0.036732 0.073464
    PropertyChanges { target: s0; width:radius * 2; height: radius * 2; radius: 10 + 0.751692* 50; color: "green";x:250;y:50;}
    PropertyChanges { target: s1; width:radius * 2; height: radius * 2; radius: 10 + 9.138112; color: "green";x:250;y:200 }
    PropertyChanges { target: s2; width:radius * 2; height: radius * 2; radius: 0.036732* 50 + 10; color: "green" ;x:200;y:350}
    PropertyChanges { target: s3; width:radius * 2; height: radius * 2; radius: 0.073464* 50 + 10; color: "green";x:300;y:350 }



    }
    ]
    transitions:
    [
    Transition
    {
    from: "OldState"; to: "NewState"
    PropertyAnimation { properties: "width,height,color,radius"; duration: 10000}
    },
    Transition {
    from: "NewState"; to: "OldState"
    PropertyAnimation { properties: "width,height,color,radius"; duration: 10000}
    }
    ]
    }

    ------sim_data.js
    var sim_data;



    var sim_data = new Array(4);

    for(var i = 0;i<4;i++)
    sim_data[i] = new Array(10);

    sim_data[0]= [0.000000,0.098023, 0.192176,0.282582,0.369357,0.452661,
    0.532547,0.609014,0.682063,0.751692,0.817902];
    sim_data[1]= [10.000000,9.900498,9.801986,9.704455,9.607893,9.51 2226,
    9.417414,9.323457,9.230357,9.138112,9.046724];
    sim_data[2] = [0.000000,0.000493,0.001946,0.004321,0.007583,0.011 704,
    0.016680,0.022509,0.029193,0.036732];
    sim_data[3]= [0.000000,0.000986,0.003892,0.008642,0.015167 ,0.023409,
    0.033359 ,0.045019, 0.058387 , 0.073464];
    -----
    thanks in advance

  2. #2
    Join Date
    Jan 2011
    Location
    Pearl of the Orient Seas
    Posts
    40
    Thanks
    12
    Thanked 3 Times in 3 Posts
    Qt products
    Qt4
    Platforms
    Windows Symbian S60 Maemo/MeeGo

    Default Re: Zoom an object from center

    try using

    transformOrigin: Item.Center

    for the elements you want to zoom.

  3. #3
    Join Date
    Aug 2011
    Location
    Pune, India
    Posts
    18
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Zoom an object from center

    HI,
    Thanks for the reply,
    I tried to using this option as below:
    Rectangle
    {
    id: s0;
    width: 20;
    height: 20;
    color: "red"
    radius: 10
    transformOrigin: Item.Center / transformOrigin: s2.Center
    x: 250
    y: 50
    }

    In both cases there is no change in output.

    Could you please let me know where the code should be changed to get that effect.

    Thanks,
    Akash

  4. #4
    Join Date
    May 2011
    Posts
    11
    Thanked 1 Time in 1 Post
    Qt products
    Qt/Embedded
    Platforms
    Unix/X11 Windows

    Default Re: Zoom an object from center

    My objective is to increase the size of an object using some predefined data in js file. But increment should looks like the object is zoomed from center and not from the lefttop corner.
    Do you want to zoom in? Then you have to set the Scale-Factor....
    Look at Scale

    Try it like this:
    Qt Code:
    1. Rectangle
    2. {
    3. id: s0;
    4. width: 20;
    5. height: 20;
    6. color: "red"
    7. radius: 10
    8. transform: customScale
    9. // or transformOrigin: Item.Center; scale: 1.5
    10. x: 250
    11. y: 50
    12.  
    13. Scale {
    14. id: customScale
    15. origin.x: 10
    16. origin.y: 10
    17. xScale: 1.5
    18. yScale: 1.5
    19. }
    20. }
    To copy to clipboard, switch view to plain text mode 

Similar Threads

  1. how to zoom in zoom out tableview in QT programming?
    By nageshvk in forum Qt Programming
    Replies: 0
    Last Post: 27th October 2010, 06:05
  2. QWTPlot Zoom: cannot zoom negative value
    By jwieland in forum Qwt
    Replies: 0
    Last Post: 8th January 2010, 17:16
  3. Replies: 1
    Last Post: 16th November 2009, 06:25
  4. How to rotate an object by its center?
    By tszzp in forum Qt Programming
    Replies: 1
    Last Post: 10th November 2009, 05:25
  5. QGLWidget with text - zoom in / zoom out
    By h123 in forum Qt Programming
    Replies: 1
    Last Post: 16th November 2008, 10:56

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.