Implementation of book paging in Android-principles

By he minggui (http://blog.csdn.net/hmg25) reprint please indicate the source

Previously, I saw the special effects of simulating book pages like iBook on iPad. on Android, there were also apps such as Laputa and ireader to implement this special effect, there seems to be no ready-made examples for searching on the Internet, so I implemented one by myself, and now I will record the implementation process.

By he minggui (http://blog.csdn.net/hmg25) reprint please indicate the source

To achieve the real page turning effect, in order to view the content of the next page during the page turning process, you must prepare two pages, one for the current page and the other for the next page. The process of page turning is to cut and combine the two pages.

Users can see the visible part of the current page (green part). After turning the page up, the area on the back (yellow part) is displayed ), turn the page to the corner of the next page (green part ).

By he minggui (http://blog.csdn.net/hmg25) reprint please indicate the source

Assume that we have obtained a path that contains the yellow and blue regions. If it is mpath0, you can use canvas in the green region. clippath (mpath0, region. op. XOR) to crop the painting, while the blue area can be used (assuming the path of the yellow area is mpath1)

View plaincopy to clipboardprint?

1. Canvas. clippath (mpath0 );
2. Canvas. clippath (mpath1, Region. Op. Difference); // draw a region different from that of the second time

 

If you are not familiar with clippath, you can review the clipping example of apidemo.

 

Next we will study how to obtain mpath0:

Mpath0 in the yellow and blue areas can be obtained through the following:

View plaincopy to clipboardprint?

1. Mpath0.moveto (JX, JY );
2. Mpath0.quadto (HX, Hy, kx, KY );
3. Mpath0.lineto (ax, ay );
4. Mpath0.lineto (BX, );
5. Mpath0.quadto (ex, ey, CX, CY );
6. Mpath0.lineto (FX, FY );
7. Mpath0.close ();

 

 

The next step is to specify the vertices required to draw path0.

The conditions we know are: A Point Coordinate (touch point), F point coordinate (display interface size), and a straight line Eh is the vertical split line of AF.

The rest is a mathematical problem ~~

First, obtain the coordinates of the gpoint because G is the point of AF:

Apparently GX = (AX + FX)/2; Gy = (Ay + FY)/2;

Ecoordinate:

Add the subsidy line GM. The M coordinate is (GX, mheight );

According to the EGM and GMF of similar vertical triangles:

Em = GM * GM/MF;

In this way, the coordinates of the evertex are: (GX-Em, mheight)

Similarly, the coordinates of the H point can be obtained.

Coordinate C:

To simplify the calculation, we set the N point to the AG point. In this way, the triangle CJF and EHF are obtained:

Cx = ex-EF/2;

The coordinates of the cpoint are: (ex-EF/2, mheight)

Similarly, the J-point coordinate is obtained.

The following derivation requires a lot of mathematical knowledge. If you do not remember the shoes, you can consciously review them ~~

The function of a straight line is:

Y = AX + B;

Calculate the line by knowing two points: a = (y2-y1)/(x2-x1 );

B = (X2 * y1-y2 * X1)/(x2-x1 );

 

The coordinates of the intersection lines are: x = (b2-b1)/(a1-a2 );

Y = a1x + B1 or Y = a2x + b2

 

In summary, the intersection of the four points is:

X = (X4 * y3-y4 * X3)/(x4-x3)-(X2 * y1-y2 * X1)/(x2-x1 ))/

(Y2-y1)/(x2-x1)-(y4-y3)/(x4-x3 ))

= (X4 * y3-y4 * X3) (x2-x1)-(X2 * y1-y2 * X1) (x4-x3 ))/

(Y2-y1) (x4-x3)-(y4-y3) (x2-x1 ))

If the preceding four vertices A, E, C, and J are brought into the formula, B can be obtained. Similarly, K can be obtained.

 

D coordinate:

D is the midpoint of PE, so:

DX = (cx + bx)/2 + ex)/2

DY = (CY + by)/2 + ey)/2

Similarly, I points can be obtained.

Through the above solution, each vertex of the page flip effect has been obtained, and the rest is the texture and shadow. This part will be introduced in later articles. You can try out some of your favorite shoes, lazy people, and so on. You can sort out the codes and post them out tomorrow ~~~