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)
對clipPath不是很熟的童鞋可以去複習下 自帶apidemo的Clipping例子。
下面我們來研究如何求取mPath0:
上圖黃色和藍色區域的mPath0,可以通過以下獲取:
接着就是要求出繪製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 點。
通過上述求解,繪製翻頁效果的各個頂點均已得出,剩下的就是貼圖,繪製陰影。這部分將在於後的文章中介紹,嘻嘻,喜歡研究的童鞋可以自己試試,懶人們,可以等等,明天整理好代碼後貼出~~~