Nominate our 2022 Qt Champions!

Best way to implement zoom?

  • Hi,

    I'm working on a project using C++ and QML where I display some QDeclarativeItems and some QML basic elements (such as rectangles and text).
    Now, I need to be able to zoom. Im my main.cpp file I have a QDeclarativeView and I have tried to use it doing setScale(2.0,2.0) and all the elements drawn by paint() my class (which inherits from QDeclarativeItem) look great, but many of the elements drawn directly with QML are pixelized (strangely my Text elements aren't while all the TextEdit are).

    So I am now asking you if there is a good way of zooming in QML, like the "maintream" way to do it.
    The point is: I cannot change the size of my elements while zooming, I need a real zoom.

    Lets say we have this:
    import QtQuick 1.0

    id: base
    width: 400
    height: 400
    color: "white"

    id: circle
    color: "red"
    width: 100
    height: width;
    radius: width/2
    x: 150
    y: 150
    id: te
    text: "text"
    x: 50
    y: 50


    what I want is to use the mouse wheel to zoom in and out to see the circle and text bigger without changing their properties. It could also work for me if instead of using the mouse wheel I could simply click on the circle and double it's size. It's is just for testing ;)

    I could not find anythin such as "scale" or "zoom" on the Rectangle item. It would be great if there was something like that in order to woom the base rectangle.

    Any idea of how to do it?

    Thank you a lot!

  • Moderators

    property real: 1.0

    id: base
    scale: zoom

    MouseArea {
    id: zoomMouseArea
    acceptedButtons: Qt.Wheel
    onWheel: {
    base.zoom +=
    // you need to tweak factor above yourself.
    // 800 works for me, but might not be ok for you.

    // rest of your code

    And if you need to handle it with mouse click, just add relevant slot, acceptedButtons and modify "zoom" in your slot.

    This can also be steered from C++. Scale property is present in QML Item component, so all inheriting components have it.

  • Hi,

    thank you for your answer.
    But it actually didn't help me. I tried your solution and I discovered that mouse wheel events are only supported in QtQuick 2.0, but I have to use QtQuick 1.0.
    Anyway, I didn't knoew about the scale property. It is quite interesting! But the scaled image is still pixelized... is there any way to solve this (I have tries smooth: true, but doesn't help much...) what bothers me the most is that Text is well scalated, but TextEdit isn't....

    thank you again!

Log in to reply