Qt on Android: pinning, zooming, and rotating Qt Quick event processing

In the previous article "Qt on Android: Qt Quick event processing: Mouse, keyboard, and timer", we introduced common processing of mouse, keyboard, and timer, mouse and keyboard are the most commonly used events on computers. In this section, we will introduce a very important gesture on Android smartphones: holding hands. As early as Apple's mobile phone, Apple tried to apply for a patent for the Operation to hold down Samsung's mobile phone and Tablet sales in the United States. Let's just talk about how to handle the handle in Qt Quick.

I'm participating in the CSDN blog contest. please vote for my article Qt on Android: signals and slots for Qt Quick event processing. Thank you.

PinchArea in Qt Quick brings about a pinch-in-hand situation. Is the name similar to MouseArea? The trojan is the sauce purple. First, let's take a look at the attributes and signals of PinchArea and learn about them before using them.

Introduction to PinchArea

PinchArea itself is an invisible Item, which is usually used with a visible Item to handle the pinch-in-hand trend. For example, it can be used with a Rectangle, or with an Image to achieve Image scaling, rotation, and other effects. The handling of several touch events is actually implemented by means of the recognition of pinch-in-hand potential.

Attribute

PinchArea is a derived class of an Item. In addition to inheriting the attributes of an Item, PinchArea has two exclusive attributes: enabled and pinch.

The default value of the enabled attribute is true. If you set it to false, PinchArea will not do anything, and the mouse and touch events will be transparent in the pinch area.

The details of pinch attributes are well-known and pinch-in-hand. It is a combination attribute, including target, active, minimumScale, maximumScale, minimumRotation, maximumRotation, dragAxis, minimumX, maximumX, minimumY, and maximumY.

Target indicates the Item to be operated by pressing the handle, and the active (bool type) attribute indicates whether the target Item is being dragged.

MinimumScale/maximumScale sets the minimum and maximum scaling coefficients. MinimuxRotation/maximumRotation sets the minimum and maximum rotation angles. These four attributes are of the real type.

DragAxis is set along the X axis (Pinch. XAxis), Y axis (Pinch. YAxis) or XY (Pinch. XAndYAxis) to drag two axes, you can also disable drag, as long as you assign Pinch to dragAxis. noDrag. When dragAxis allows dragging, minimumX/maximumX sets the minimum and maximum drag positions for the X axis, and minimumY/maximumY sets the minimum and maximum drag positions for the Y axis.

Signal

PinchArea has three signals: onPinchStarted (), onPinchUpdated (), and onPinchFinished (). They all have a parameter named pinch, whose type is PinchEvent. To effectively respond to these signals, you must understand the PinchEvent type. Let's first introduce it.

PinchEvent has the following attributes:

• Accepted: if it is set to true in the onPinchStarted () signal processor, it indicates that you want to respond to PinchEvent. Qt will send you updates continuously. If it is set to false, Qt will not send PinchEvent events to you again.
• Angle, which indicates the angle between the last two contacts. previusangle is the angle of the last event, and rotation is the overall rotation angle from the moment of holding the handle to the current event.
• Scale: the scaling factor between the last two contacts. previusscale is the scaling factor of the last event.
• Center, the center of the two contacts. previousCenter is the center of the last event, and startCenter is the center of the event.
• Point1 and point2 Save the position of the current contact. startPoint1 and startPoint2 Save the position of the two contacts when the second contact is pressed.
• The total number of contacts that pointCount saves until now.

The onPinchStarted () signal is sent when it is recognized for the first time. If you want to handle it, set it to true. Then you can use the pinch parameter to set the Item to be changed.

When you accept TouchEvent events in the onPinchStarted () signal processor, Qt will continuously send new events to you, And the onPinchUpdated () signal will be continuously transmitted, you can use the pinch parameter in its signal processor to 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

I introduced PinchArea and PinchEvent. It's time to see how to use them.

There are two ways to use PinchArea to change an Item:

After selecting a method, you may also need to configure the PinchArea. pinch attribute to set reasonable values for different parameters, for example, how many times the maximum value can be enlarged.

Scaling and rotating instances

Here is a simple example of using PinchArea. We use PinchArea to rotate and scale a rectangle.

For details about Project Creation, see Qt on Android: Hello World for Qt Quick.

Use pinch.tar get

First, specify pinch.tar get. Directly read the main. qml document:

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. initialize the minimum, maximum scaling factor, minimum, and maximum rotation angle, and then point pinch.tar get to the blue rectangle with the id transformRect. As a result, everything works normally, and the zoom and rotation effect between the two fingers is displayed.

Figure 1 shows the initial effect of running on the Android phone:

Figure 1 pinchArea example startup Effect

Figure 2 shows the effect of a few clicks on my fingers:

Figure 2 pinchArea scaling and Rotation

Using pinch.tar get, you don't have to worry about anything, or even understand what the pinch attribute actually means, you can get a good transformation effect, by default, Qt Quick can help you deal with everything.

The following describes how to use signals.

Signal used

Using onPinchStarted ()/onPinchUpdated ()/onPinchFinished () requires a little trouble. You must understand the meaning of each parameter of PinchEvent and design your own transformation policy. But the advantage is that you control the changes.

Directly read the new main. qml document:

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.tar get method, but the "pinch.tar get: transformRect" statement is removed and the signal processor is used instead. The code is very straightforward and will not be explained.

OK. This article ends.

Review:

• Qt on Android: Qt Quick introduction
• Qt on Android: Basic QML Language
• Qt on Android: Hello World for Qt Quick
• Qt on Android: simple Qt Quick tutorial
• Qt on Android: signals and slots of Qt Quick event processing
• Qt on Android: Mouse, keyboard, and timer for handling Qt Quick events