Qt on ANDROID:QT Quick event handling pinch-and-pull scaling and rotation

On a "Qt on ANDROID:QT Quick Event processing mouse, keyboard, timer" We introduced the common mouse, keyboard, timer processing, mouse, keyboard is the computer we most often use the event, this section we introduce Android A very important gesture on your smartphone: pinch and pull gestures. The pinch-and-pull gesture was first applied on the iphone, and Apple has tried to patent the operation to clamp down on Samsung's phone and tablet sales in the United States. We don't care about it, we just talk about how to handle pinch gestures in Qt Quick.

Advertise: I am participating in the CSDN blog contest, please give me the entry of the article " the signal and slot of Qt on ANDROID:QT Quick event processing "vote, thank you.

Qt Quick Pincharea bring pinch gestures to see if the name is similar to Mousearea? Wood fault, is jiangzi. Take a look at what properties and signals Pincharea have, and learn how to use it.

Pincharea Introduction

The Pincharea itself is an invisible item and is usually used with a visible item to handle pinch gestures. For example, with a Rectangle, or with the image to achieve the image zoom, rotation and other effects. pinch-and-pull gesture recognition is actually accomplished by handling several touch events.

Properties

Pincharea is a derived class of item that has two exclusive properties, in addition to the properties inherited from item: Enabled and pinch.

The default value of the Enabled property is true, and if you set it to false, then the Pincharea is not working, and the pinch-and-pull area becomes transparent to the mouse and touch events.

The Pinch property is well known with the pinch gesture details, which is a combination of properties, including Target, active, MinimumScale, MaximumScale, Minimumrotation, Maximumrotation, Dragaxi S, Minimumx, Maximumx, Minimumy, Maximumy, and other attributes.

Target indicates the item to be manipulated by the pinch gesture, and the active (BOOL type) property indicates whether the target item is being dragged.

Minimumscale/maximumscale set the minimum and maximum scaling factor. Minimuxrotation/maximumrotation set to small, maximum rotation angle. These four properties are all real types.

Dragaxis settings are dragged along the X-axis (Pinch.xaxis), Y-axis (Pinch.yaxis), or XY (Pinch.xandyaxis) Two axes, you can also disable dragging, as long as Dragaxis is assigned Pinch.nodrag. When Dragaxis is allowed to drag, minimumx/maximumx sets the minimum and maximum drag position of the X-axis, Minimumy/maximumy sets the minimum and maximum drag position of the Y-axis.

Signal

The Pincharea has three signals: onpinchstarted (), onpinchupdated (), onpinchfinished (). They all have a parameter named pinch, and the type is pinchevent. In order to effectively respond to these signals, you must understand the pinchevent type, which we introduce first.

Pinchevent has the following properties:

• Accepted, set to true in the onpinchstarted () signal processor indicates that you want to respond to Pinchevent, QT will continue to send you update events, set to False, QT will no longer send Pinchevent event to you.
• angle, which represents the angle between the last two contact points, Previousangle is the angle of the last event, rotation is the total rotation angle from the pinch gesture to the current event.
• scale, which represents the scaling factor between the last two contacts, Previousscale is the scaling factor for the last event.
• Center, central point of two contacts, Previouscenter is the center point of the last event, Startcenter is the center point at the beginning of the event .
• Point1, Point2 saves the position of the current contact, StartPoint1, startPoint2 the position of the two contacts when the second contact is pressed.
• Pointcount the total number of contacts saved so far.

The onpinchstarted () signal is emitted the first time a pinch gesture is identified, and if you want to handle it, set it to true. You can then set the Item to be transformed by using the pinch parameter.

When you accept the TouchEvent event in the onpinchstarted () signal processor, QT will constantly send new events to you, and the onpinchupdated () signal will be continuously emitted, and you can pass the pinch parameter in its signal processor, Retrieve the value you need to update your Item.

The onpinchfinished () signal is triggered when the user's finger leaves the screen.

How to use

Introducing Pincharea and Pinchevent, it's time to see how to use them.

There are two ways to use Pincharea to transform an Item:

1. Set the target property, point it to the Item you want to transform, and Pincharea will help you transform it at the right time.
2. Handles the onpinchstarted ()/onpinchupdated ()/onpinchfinished () signal and transforms the target Item in the signal processor. This is more flexible and you can even handle multiple Item at the same time.

Once you have selected a method, you may also want to configure the Pincharea.pinch property to set reasonable values for different parameters, such as how many times the maximum can be magnified.

scaling and Rotating instances

Here is a simple example of using Pincharea, and we use Pincharea to rotate and scale a rectangle.

The creation of the project is referenced in the "Qt on ANDROID:QT Quick's Hello World Graphic", which is not detailed here.

using Pinch.target

First, we specify Pinch.target. Look directly at the MAIN.QML documentation:

Import QtQuick 2.0Rectangle {    width:360;    height:360;    Focus:true;    Rectangle {        width:100;        height:100;        Color: "Blue";        Id:transformrect;        anchors.centerIn:parent;    }    Pincharea {        anchors.fill:parent        pinch.maximumscale:20;        pinch.minimumscale:0.2;        pinch.minimumrotation:0;        pinch.maximumrotation:90;        Pinch.target:transformRect;}    }

The code is simple, initializes the minimum, maximum zoom factor, minimum, maximum rotation angle, and then points pinch.target to the blue rectangle with ID transformrect. So, everything is working normally, between two fingers pinch pull, zoom and rotation effect is out.

Figure 1 is the starting effect of running on an Android phone:

Figure 1 Pincharea example Start effect

Figure 2 is the effect of my two fingers pulling a few clicks:

Figure 2 Pincharea Zoom and rotation effect

Using Pinch.target this way, you don't have to worry about anything, you don't even need to figure out what the pinch attribute really means, you can get a nice transformation effect, and Qt Quick defaults to help you deal with everything.

Here's how to use the signal.

using signals

Using onpinchstarted ()/onpinchupdated ()/onpinchfinished () to be a little more troublesome, you have to understand the meaning of each of the pinchevent parameters and design your own transformation strategy. But the advantage is that you control 72 of the changes.

See the new MAIN.QML document directly:

Import QtQuick 2.0Rectangle {    width:360;    height:360;    Focus:true;    Rectangle {        width:100;        height:100;        Color: "Blue";        Id:transformrect;        anchors.centerIn:parent;    }    Pincharea {        anchors.fill:parent        pinch.maximumscale:20;        pinch.minimumscale:0.2;        pinch.minimumrotation:0;        pinch.maximumrotation:90;        onpinchstarted: {            pinch.accepted = true;        }        onpinchupdated: {            transformrect.scale *= pinch.scale;            Transformrect.rotation + = pinch.rotation;        }        Onpinchfinished: {            transformrect.scale *= pinch.scale;            Transformrect.rotation + = Pinch.rotation;}}}    

Most of the code is the same as the pinch.target, except that the "Pinch.target:transformRect" statement is removed and the signal processor is used instead. The code is straightforward and no longer explains it.

OK, this is the end of this article.

Look Back:

• Qt on ANDROID:QT Quick Introduction
• Qt on ANDROID:QML Language basics
• Qt on ANDROID:QT Quick's Hello World text
• Qt on ANDROID:QT Quick Simple tutorial
• The signal and slot of Qt on ANDROID:QT Quick event processing
• Qt on ANDROID:QT Quick event handling mouse, keyboard, timer