[Sorin Stefan]

Hi,

we would like to implement zooming (touch device, pinch gesture) on a flickable item. We have a big are that can be horizontalli but at the same time the user should be able to zoom in/out with a pinch gesture.

Do you have any pointers as to how this could be implemented? The flickable item looks like this

        Flickable {
            id: flickable
            width: 320
            height: 480

            contentWidth: gardenScene.displayRatio === 1.7 ? 1455 : 1415
            contentHeight: gardenScene.height

            flickableDirection: Flickable.HorizontalFlick
            boundsBehavior: Flickable.StopAtBounds

          //...
        {

 

Thanks,

Stefan

• This topic was modified 8 years, 6 months ago by  Nicolinux.

[AlexFelgo Team]

Hi,

there are several resources online regarding this. You may have a look at those 2 links:

https://gitorious.org/spena-playground/xmcr/source/87a2bfcb6a1f6688e0ed7169c6b72308ad08778d:src/qml/ZoomableImage.qml
http://stackoverflow.com/questions/19877018/proper-way-to-implement-zoom-scale-in-qt-quick-qml-flickable

Also googling “qml flickabe zoom” brought me some other promising results.

Cheers,
Alex

[Sorin Stefan]

Hi Alex,

And thanks for the pointers. The is a problem though. We use the PinchArea to control the zooming but then all buttons inside that area do not register touches any more. Here is a test project to illustrate the problem:

https://dl.dropboxusercontent.com/u/9726674/PinchTest.zip

Maybe you haven an idea.

Thanks

Stefan

[AlexFelgo Team]

Hi Stefan,

the MouseAreas need to be on top of the Pincharea, like in this example: http://paazmaya.com/pincharea-and-mousearea-working-together
So either make them a child of the Pincharea or change the z ordering either with the z property of move the add the PinchArea item before the other items in your qml file. Hope this works for you.

Cheers,
Alex

[AlexFelgo Team]

Hi again,

I also just found this example while playing around with your sample myself, this should be what you need:
http://doc.qt.io/qt-5/qtquick-touchinteraction-pincharea-flickresize-qml.html

Cheers,
Alex