Best way to implement zoom?

excalibur1491

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

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

Rectangle{
id: circle
color: "red"
width: 100
height: width;
radius: width/2
x: 150
y: 150
TextEdit{
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!

sierdzio

@
Rectangle{
property real: 1.0

id: base
scale: zoom

MouseArea {
id: zoomMouseArea
acceptedButtons: Qt.Wheel
onWheel: {
base.zoom += mouse.delta.y/800
// 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.

excalibur1491

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!