Shulou(Shulou.com)06/03 Report--

This article shows you how to carry out the analysis of gesture principles and the practice of mathematical knowledge in HTML5. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Introduction

In this era of touch screens, humanized gestures have penetrated into every part of our lives. Modern applications pay more and more attention to interaction and experience with users. Gesture is the most direct and effective way of interaction. A good gesture interaction can reduce the user's cost and process, and greatly improve the user's experience.

Recently, there is a high demand for gestures in many of the company's projects, and the existing gesture library can not fully cover, so we have created a lightweight and easy-to-use mobile gesture library. The main purpose of this blog is to analyze the principle of common gestures on the mobile end and the mathematical knowledge used in the learning process from the front-end point of view. I hope it can enlighten you a little bit, and I also expect the great gods to point out their shortcomings and even mistakes and be grateful.

This paper mainly explains five kinds of gestures commonly used in projects:

Dragging: drag

Double finger scaling: pinch

Double finger rotation: rotate

Single finger zoom: singlePinch

Single finger rotation: singleRotate

Tips:

Because tap and swipe are included in many basic libraries, they are not included for portability, but can be extended if necessary

Realization principle

As we all know, all gestures are encapsulated at the upper level based on browser native events touchstart, touchmove, touchend, and touchcancel, so the idea of encapsulation is to call back the repository handleBus through independent events, and then trigger and transmit the calculated parameter values in the native touch event to complete the gesture operation. The realization principle is relatively simple and clear, there is no hurry, let's first sort out some mathematical concepts used and combine the code, and apply mathematics to practical problems, the mathematical part may be relatively boring, but I hope you will continue to read it. I believe it will benefit a lot.

Basic mathematical knowledge function

Our common coordinate system belongs to linear space, or vector space (Vector Space). This space is a set of Point and Vector.

Point (Point)

It can be understood as our coordinate points, such as the origin O (0) and A (- 1). The coordinates of the touch point can be obtained through the touches of the original event object, and the parameter index represents the contact number.

Vector (Vector)

Is a line segment with both size and direction in the coordinate system. For example, the arrow line segment pointing from the origin O (0Magne0) to the point A (1Magne1) is called the vector a, then a = (1-0prime1-0) = (1Magne1)

As shown in the following figure, where the I and j vectors are called the unit vectors of the coordinate system, also known as the base vector, our common coordinate system unit is 1, that is, I = (1); j = (0)

The function that gets the vector:

Vector module

Represents the length of the vector, marked as | a |, which is a scalar with only size and no direction.

The geometric meaning represents the oblique edge of the right triangle with the right side of XBI y, which is calculated by Pythagorean theorem.

GetLength function:

Quantitative product of vectors

Vectors also have properties that can be calculated, such as addition, subtraction, multiplication, quantitative product and vector product. Then we introduce the concept of quantitative product, also known as dot product, which is defined as a formula:

When a = (x1), b = (x2), then a ·b = | a | b | cos θ = x1 ·x2 + y1 ·y2

Collinear theorem

Collinear, that is, when two vectors are in a parallel state, when a = (x1diary y1), b = (x2jiny2), then there is a real number λ of * *, such that a = λ b, after substituting it into the coordinate point, x1 ·y2 = y1 ·x2 can be obtained.

Therefore, when x1 ·y2-x2 ·y1 > 0, the slope ka > kb, so the b vector rotates clockwise relative to a vector, and vice versa, it is counterclockwise.

Rotation angle

Through the quantity product formula, we can deduce the angle between the two vectors:

Cos θ = (x1 ·x2 + y1 ·y2) / (| a | | b |)

Then we can judge the direction of rotation through the collinear theorem, and the function is defined as:

Matrix and transformation

Because the most essential feature of space is that it can accommodate motion, so in linear space

We use vectors to describe objects, and matrices are used to describe the motion of objects.

And how does the matrix describe motion?

We know that a vector can be determined by a coordinate system basis vector, for example, a = (- 1). We usually agree that the basis vectors are I = (1) 0) and j = (0); therefore:

A =-1i + 2j =-1 (1) + 2 (0) = (- 1) = (- 1)

In fact, the matrix transformation is through the matrix transformation of the basis vector, thus completing the transformation of the vector.

For example, in the chestnut above, the a vector is transformed by the matrix (1), and the base vector I is transformed from (1) to (1) and j from (0) to (3).

A =-1i + 2j =-1 (- 1m 2) + 2 (3m 0) = (5m m 2)

As shown in the following figure:

A figure represents the coordinate system before the transformation, at this time a = (- 1p2). After the matrix transformation, the transformation of the base vector iMagnej causes the transformation of the coordinate system, which becomes the following figure B. therefore, the a vector is transformed from (- 1pj2) to (5magnum 2).

In fact, the relationship between the vector and the coordinate system is constant (a =-1i+2j). It is the base vector that causes the change of the coordinate system, and then the use of the correlation in the coordinate system leads to the change of the vector.

Combination code

In fact, CSS transform and other transformations are carried out through the matrix, we usually write the syntax such as translate/rotate is similar to a packaged syntax sugar, easy to use quickly, and at the bottom will be converted into the form of matrix. For example, transform:translate (- 30px) will be compiled and converted to transform: matrix (1mem0memo 0memlore 30px).

Usually in a two-dimensional coordinate system, only the matrix of 2X2 is sufficient to describe all the transformations, but because CSS is in a 3D environment, the matrix of 3X3 is used in CSS, which is represented as:

Zero one in the third line represents the default parameter of the z axis. In this matrix, (translate b) is the I-base of the coordinate axis, while (c-matrix d) is the offset of the x-axis, the offset of the x-axis and the offset of the y-axis. Therefore, it is easy to understand that does not cause a change in the iForce j-base, but that it just shifts, so it is translate (- 30px) = > matrix.

The corresponding conversion occurs in all transform statements, as follows:

/ / shift occurs, but the base vector remains the same; transform:translate (x) = = > transform:matrix) / / the base vector rotates; transform:rotate (θ deg) = > transform:matrix (cos (θ ·π / 180), sin (θ ·π / 180),-sin (θ ·π / 180), cos (θ ·π / 180) / the base vector is enlarged and the direction remains the same; transform:scale (s) = > transform:matrix

Syntax such as translate/rotate/scale is very powerful, making our code more readable and easy to write, but matrix has more powerful conversion features. Through matrix, changes can take place in any way, such as our common mirror symmetry, transform:matrix.

MatrixTo

However, although matrix is powerful, it is not readable, and we write through the properties of translate/rotate/scale, while the transform read through getComputedStyle is matrix:

Transform:matrix (1.41421, 1.41421,-1.41421, 1.41421,-50,-50)

How has this element changed? This is a look of confusion. -_-|

Therefore, we must have a way to translate matrix into translate/rotate/scale, which we are more familiar with. After understanding its principle, we can begin to perform.

We know that the first four parameters are affected by both rotate and scale, and have two variables, so we need to list two inequalities according to the above conversion method through the first two parameters:

Cos (θ ·π / 180) * spore 1.41421; sin (θ ·π / 180) * slug 1.41421

Divide the two inequalities and you can easily find out θ and s. Functions are as follows:

Gesture principle

Next, we apply the above functions to the actual environment, simulate the operation of gestures by illustration, and briefly explain the principle of gesture calculation. I hope that after you understand these basic principles, you can create more cool gestures, like the ones we use on the mac trackpad.

The following illustration:

Dot: the touch point that represents the finger.

A dashed line segment between two dots: a vector that represents a two-finger operation

A vector / A point: represents the initial vector / initial point obtained at touchstart

B vector / B point: represents the real-time vector / real-time point obtained in touchmove

The formula at the bottom of the axis represents the value to be calculated.

Drag (drag event)

The figure above simulates the drag gesture, moving from point A to point B. what we want to calculate is the offset of this process.

So we record the coordinates of the initial point An in touchstart:

/ / get the initial point A; let startPoint = getPoint (ev,0)

Then get the current point in the touchmove event and calculate △ x and △ y in real time:

/ / get the initial point B; let curPoint = getPoint (ev,0) in real time; / / calculate the displacement increment in real time through points An and B, trigger drag events and send out parameters; _ eventFire ('drag', {delta: {deltaX: curPoint.x-startPoint.x, deltaY: curPoint.y-startPoint.y,}, origin: ev,})

Tips: the fire function can simply traverse the callback repository corresponding to the execution drag event.

Pinch (double finger scaling)

The above image is a double-finger zoom simulation diagram, which is magnified from a vector to b vector. The scaling value can be obtained by calculating the module of a vector in the initial state and the module of b vector obtained in touchmove.

/ / calculate the initial double-finger vector module in touchstart; let vector1 = getVector (secondPoint, startPoint); let pinchStartLength = getLength (vector1); / / touchmove calculate real-time double-pointing vector module; let vector2 = getVector (curSecPoint, curPoint); let pinchLength = getLength (vector2); this._eventFire ('pinch', {delta: {scale: pinchLength / pinchStartLength,}, origin: ev,}); Rotate (double-finger rotation)

At the beginning, the double finger vector a, rotates to the b vector, and θ is the value we need, so as long as we use the getAngle function we constructed above, we can find out the angle of rotation:

/ / a vector; let vector1 = getVector (secondPoint, startPoint); / / b vector; let vector2 = getVector (curSecPoint, curPoint); / / trigger event; this._eventFire ('rotate', {delta: {rotate: getAngle (vector1, vector2),}, origin: ev,}); singlePinch (single-finger zoom)

Unlike the gestures above, single-finger scaling and single-finger rotation require several unique concepts:

Operation element (operator): the element that needs to be operated. In fact, the above three gestures do not care about the operation element, because the correct parameter values can be calculated by the gesture itself, while scaling and rotation depend on the base point of the operation element (the center point of the operation element).

Button: because the gesture of single finger and drag gesture conflict with each other, it needs a special interactive way to distinguish. Here, it is distinguished by a specific area, which is similar to a button. When operating on a button, it refers to zooming or rotating, while outside the button area, it is a conventional drag. Practice has proved that this is a mode of operation that is easy for users to accept and experience.

In the figure, the single finger of the a vector is magnified to the b vector, and the operation element (square) element is enlarged in the center, and the scaling value is the module of the b vector / a vector.

/ / calculate the reference point of single finger operation to get the center point of operator; let singleBasePoint = getBasePoint (operator); / / calculate the initial vector module in touchstart; let pinchV1 = getVector (startPoint,singleBasePoint); singlePinchStartLength = getLength (pinchV1); / / calculate real-time vector module in touchmove; pinchV2 = getVector (curPoint, singleBasePoint); singlePinchLength = getLength (pinchV2); / / trigger event This._eventFire ('singlePinch', {delta: {scale: singlePinchLength / singlePinchStartLength,}, origin: ev,}); singleRotate (single rotation)

With the combination of single-finger scaling and double-finger rotation, it is easy to know that θ is the rotation angle we need.

/ / get initial vector and real-time vector let rotateV1 = getVector (startPoint, singleBasePoint); let rotateV2 = getVector (curPoint, singleBasePoint); / / obtain rotation angle through getAngle and trigger events; this._eventFire ('singleRotate', {delta: {rotate: getAngle (rotateV1, rotateV2),}, origin: ev,}); Motion increment

Because the touchmove event is a high-frequency real-time trigger event, and a drag operation actually triggers N touchmove events, the calculated value is only an increment, that is, it represents a value increased by a touchmove event, which only represents a small value, not the final result value, so a location data needs to be maintained externally by mtouch.js, similar to:

/ / Real location data; let dragTrans = {x = 0 drag,dragTrans y = 0}; / / add the incremental deltaX and deltaY; dragTrans.x + = ev.delta.deltaX; dragTrans.y + = ev.delta.deltaY; / / passed by mtouch to directly manipulate the element through transform; set ($drag,dragTrans); initial position

To maintain the external location data, if the initial value is taken as 0 directly as above, the element that uses css to set the transform attribute cannot be correctly identified, which will cause the operation element to jump back to the point where the operation element starts. Therefore, we need to initially obtain the real location value of an element, and then carry out maintenance and operation. At this point, you need to use the getComputedStyle method and the matrixTo function we mentioned above:

/ / get the css transform attribute. What you get is a matrix data. / / transform:matrix (1.41421, 1.41421); let style = window.getComputedStyle (el,null); let cssTrans = style.transform | | style.webkitTransform; / / convert according to the rules to get: let initTrans = _ .matrixTo (cssTrans); / / {xvvlev 50 quotation scale50 rotate 45}}; / / that is, this element sets: transform:translate (- 50px) scale (2) rotate (45deg)

At this point, I believe you already have a basic understanding of the principle of gesture. Based on these principles, we can encapsulate more gestures, such as double-click, long press, sweep, and even cooler three-finger and four-finger operation. Let the application have more human characteristics.

Based on the above principles, I encapsulated several common tools: (ask star -. -)

Tips: because it is only for mobile devices, you need to open demo on the mobile device, or turn on mobile debug mode on the pc side!

Mtouch.js: mobile gesture library, encapsulating the above five gestures, simplified api design, covering common gesture interactions, which can also be easily extended.

Touchkit.js: based on mtouch encapsulated a layer closer to the business toolkit, can be used to make a variety of gesture operation services, one-click open, one-stop service.

Mcanvas.js: one-click export of pictures based on canvas open and minimalist api.

The above content is how to carry on the gesture principle analysis and the practice of mathematical knowledge in HTML5. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.