[Interest] Using MultiPointTouchArea for Multiple Touch points

[Pasiak, Emily]

Hi all,
I am working on developing a user interface that displays an animated camera view. I need to be able to pan, rotate and zoom the view. I have implemented the use of the QML Camera component and managed to get both zoom and rotate working via PinchArea and MultipPointTouchArea. My current issue is that I am not able to understand how to define separate functionalities for various touch points. Ie. I would like it to behave differently if the user swipes with one finger, or multiple fingers. A one finger swipe should allow for view rotation and a two finger swipe should translate the view. I have tried to find examples online but have come up short. All though the documentation for MultiPointTouchArea does describe the capability to nest MultiPointTouchAreas to handle two finger or one finger touches separately I have not been able to find any examples demonstrating how this might be done. I have tried using the Boolean 'pressed' values to see if each touch point is selected how ever this does not seem to work as anticipated. If anyone could point me to some examples or explain to me a solution it would be greatly appreciated!

Relevant Code:

SimpleCamera.qml

               Connections {
                              target: window
                              onZoomChanged: {
                                             root.zoom = zoom;
                              }
                              onRelativeZoomChanged: {
                                             root.zoom *= zoom;
                              }
                              onRotateView: {
                                             camera.tiltAboutViewCenter(a, Qt.vector3d(0,     1,   0));
                                             camera.panAboutViewCenter(b, upVector);
                              }
                              onTranslateView: {
                                             camera.translate(Qt.vector3d(x,y,0));
                              }
               }


               property Camera camera : Camera {
                              id: camera
                              position:   root.positionOffset.plus(Qt.vector3d(0, 0, -2))
                              viewCenter: Qt.vector3d(0, 0, -2)

                              upVector:   root.upVector

                              onPositionChanged: {
                              }
               }

               components: [ camera ]
}

PTZController.qml

Rectangle {
               id: pinchUser
               PinchArea {
                              id: pa
                              anchors.fill: parent
                              pinch.target: pinchUser

                              pinch.dragAxis: Pinch.XAndYAxis

                              onPinchStarted:  {
                                             pinchUser.zoom_ini = shipScene.cameraSet.user.cameraView.zoom;
                              }
                              onPinchUpdated:  {
                                             zoomChanged(pinchUser.zoom_ini * pinch.scale);
                              }
                              onPinchFinished: {
                                             pinchUser.zoom = pinchUser.zoom_ini * pinch.scale;
                              }

                              MouseArea {
                                             id: mouseUser
                                             anchors.fill: parent
                                             scrollGestureEnabled: false
                                             onWheel: {
                                                            relativeZoomChanged(1 + (wheel.angleDelta.y/1200));
                                             }
                              }
                              MultiPointTouchArea {
                                             anchors.fill: parent
                                             touchPoints: [
                                                            TouchPoint { id: rotate },
                                                            TouchPoint { id: pan},
                                                            TouchPoint { id: pan2}
                                             ]
                                             onPressed: {
                                                            if (!pan.pressed) {
                                                                           xDistance = rotate.x;//sets the initial x and y values to
                                                                           yDistance = rotate.y;//discern the distance the mouse has travelled
                                                            }
                                                            if ( rotate.pressed && pan.pressed) {
                                                                           xDistance = rotate.x;//sets the initial x and y values to
                                                                           yDistance = rotate.y;//discern the distance the mouse has travelled
                                                            }
                                             }
                                             onUpdated: {
                                                            if ( !pan.pressed ) {
                                                                           currentxDistance = xDistance - rotate.x;//find the distance the mouse has travelled
                                                                           currentyDistance = -(yDistance - rotate.y);
                                                                           rotateView(currentyDistance, currentxDistance);
                                                            }
                                                            else if ( rotate.pressed && pan.pressed) {
                                                                           currentxDistance = xDistance - rotate.x;//find the distance the mouse has travelled
                                                                           currentyDistance = -(yDistance - rotate.y);
                                                                           translateView(currentxDistance, currentyDistance);
                                                            }
                                                            xDistance = rotate.x;//reset x and y values to last point used
                                                            yDistance = rotate.y;//to maintain consistent distance increments
                                             }
                              }
               }
}


Emily
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20170501/fecfb000/attachment.html>