Android 實現書籍翻頁效果—-原理篇

            By 何明桂（http://blog.csdn.net/hmg25） 轉載請註明出處

    之前看到像ipad上的ibook的類比書籍翻頁的特效感覺很炫，在android上也有像laputa和ireader等應用實現有這個特效，在網上搜尋了一下好像也沒有現成的例子，所以自己動手實現了一個，現在將實現的過程記錄下來。

          By 何明桂（http://blog.csdn.net/hmg25） 轉載請註明出處

實現真實的翻頁效果，為了能在翻頁的過程中看到下一頁的內容，在翻頁之前必須準備兩張頁面，一張是當前頁，另一張是下一頁。翻頁的過程就是對這兩張頁面的剪下，組合過程。

使用者看到的可以分為3部分：當前頁的可見部分(綠色部分)，把書頁翻起來後看到的背面地區(黃色部分)，把書頁翻起來後看到的下一頁的一角(綠色部分)。

           

      By 何明桂（http://blog.csdn.net/hmg25） 轉載請註明出處                      

假設我們已經求得了包含黃色地區和藍色地區的Path, 假設為mPath0,那麼綠色地區則可以使用Canvas.clipPath(mPath0, Region.Op.XOR)來剪裁繪製；而藍色地區則可以通過使用(假設黃色地區的Path為mPath1) 

     

view plaincopy to clipboardprint?

1. Canvas.clipPath(mPath0);  
2. Canvas.clipPath(mPath1, Region.Op.DIFFERENCE); //繪製第一次不同於第二次的地區  

  

 

  對clipPath不是很熟的童鞋可以去複習下 內建apidemo的Clipping例子。

 

下面我們來研究如何求取mPath0：

          

黃色和藍色地區的mPath0，可以通過以下擷取：

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, by);  
5. mPath0.quadTo(ex, ey, cx,cy);     
6. mPath0.lineTo(fx, fy);  
7. mPath0.close();  

 

 

接著就是要求出繪製path0所需的各個頂點。

我們已知的條件是：a點座標(觸摸點)，f點座標(顯示介面的大小)，直線eh是af的垂直平分線。

剩下的就變成數學問題啦~~

先來求出g點座標因為g為af中點：

顯然gx=(ax+fx)/2; gy=(ay+fy)/2;

e點座標：

    添加補助線gm，m點座標為(gx, mHeight);

    由相似垂直三角形egm和gmf可知：

      em=gm*gm/mf;

這樣e點座標為：(gx-em, mHeight)

同理可以求出h點座標。

C點座標：

為簡化計算，我們令n點為ag中點，這樣有三角形cjf和ehf得：

     cx=ex- ef/2 ;

c點座標為:（ex- ef/2, mHeight）

同理求得j點座標。

以下推導需要較多的數學知識，不記得的童鞋，自覺複習去~~

一條直線的函數為：

Y=ax+b;

通過已知兩點求直線：  a = (y2-y1)/(x2-x1);

                         b = (x2*y1-y2*x1)/(x2-x1);

 

兩條相交直線交點的座標為：x= (b2-b1)/(a1-a2);

                           y=a1x+b1或者y=a2x+b2

 

綜上，4點相交的直線的交點為：

     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) )

將之前求得的 a,e,c,j四個點帶入上式則可以求出 b. 同理可求k點。

 

d點座標：

d為pe的中點，所以：

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

dy=((cy+by)/2+ey)/2

同理 可求 i 點。

     通過上述求解，繪製翻頁效果的各個頂點均已得出，剩下的就是貼圖，繪製陰影。這部分將在於後的文章中介紹，嘻嘻，喜歡研究的童鞋可以自己試試，懶人們，可以等等，明天整理好代碼後貼出~~~