Using PinchArea and MouseArea on the Canvas element

Synfony

Synfony about 4 hours ago

Hi,
I building a QtQuick app for the (Windows 10) Surface tablet.
It's a sketching application where we are using mouse/Pen along with Touch gestures.
So, I have placed the Canvas element with PinchArea and inside the PinchArea there is the MouseArea.
Both Pinching and Mouse/Pen events are working except for the following glitch:
I see that when I try to Pinch with fingers the first event that gets fired is the Mouse's onPressed event and then the pinch zoom happens.
How do I stop the mouse onPressed getting fired in this case?
I need to disable mouse event entirely when I am using my fingers to zoom.
Here is the code snippet I am using:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Canvas {
        id: myCanvas
        anchors.fill: parent

        property int pressedValue: 0
        property int pinchFlag: 0

        onPaint: {
            var ctx = getContext("2d");
            ctx.fillStyle = Qt.rgba(1, 0, 0, 1);

            ctx.moveTo(75, 50);
            ctx.lineTo(100, 75);
            ctx.lineTo(120, 50);
            ctx.lineTo(150, 50);
            ctx.lineTo(150, 25);
            ctx.lineTo(5, 15);
            ctx.fill();
        }
        PinchArea{
            anchors.fill: parent
            pinch.target: myCanvas
            pinch.maximumScale: 10.0
            pinch.minimumScale: 0.1
            pinch.maximumRotation: 0 //360
            pinch.minimumRotation: 0 //-360
            pinch.dragAxis: Pinch.XAndYAxis

            onPinchStarted: {
                if (pinch.active)
                    myCanvas.pinchFlag = 1
            }
            onPinchFinished: {
                myCanvas.pinchFlag = 0
            }

            MouseArea {
                anchors.fill: parent
                acceptedButtons: Qt.AllButtons

                onPressed: {
                    if(myCanvas.pinchFlag ===0){
                        myCanvas.pressedValue = myCanvas.pressedValue +1
                        console.log("Pressed: " + myCanvas.pressedValue)
                    }
                }
            }//end:MouseArea
        }//end: PinchArea
    }//end:Canvas
}

I am really struggling with this. Please provide your help.
Thank you.

DeltaSim

Hi,
I asked the same thing a month ago: https://forum.qt.io/topic/113763/pincharea-and-mousearea
No answer yet...

Simon Fojtu

Hello,

I've had a similar problem and solved it by storing the mouse position in the onPressed event, but using it only when onPressAndHold and onReleased is called as in the following code example:

import QtQuick 2.11

Item {
    id: root

    Rectangle {
        id: drawingArea

        anchors.fill: parent

        PinchArea {
            id: pinchArea
            anchors.fill: parent

            property bool isDragging: false

            pinch {
                target: pattern
                dragAxis: Pinch.XAndYAxis
            }

            onPinchStarted: pinchArea.isDragging = true
            onPinchFinished: pinchArea.isDragging = false
        } // end:PinchArea

        Rectangle {
            id: pattern
            color: 'blue'
            width: 20 
            height: 20
            x: 10
            y: 10
        }

        MouseArea {
            id: mouseArea
            property var _initialEvent: undefined
            enabled: ! pinchArea.isDragging
            anchors.fill: parent

            onPressed: _initialEvent = Qt.point(mouse.x, mouse.y)
            onPressAndHold: doStuff(Qt.point(mouse.x, mouse.y))
            onPositionChanged: doStuff(Qt.point(mouse.x, mouse.y))
            onReleased: doStuff(Qt.point(mouse.x, mouse.y))

            // nothing to do, took over by pinchArea
            onCanceled: _initialEvent = undefined

            function doStuff(position) {
                if (mouseArea._initialEvent !== undefined && mouseArea.enabled) {
                    console.log('Doing stuff with ', mouseArea._initialEvent.x, ':', mouseArea._initialEvent.y);
                }
                mouseArea._initialEvent = undefined;
                console.log('Doing stuff with ', position.x, ':', position.y);
            }
        }// end: MouseArea
    }
}

Simon