android 翻頁效果

這兩天在研究閱讀軟體的翻頁效果，其中iReader的效果覺得不錯，效果如下：

 

好了，下面看下我自己弄的效果：

在裡面畫了一個紅色的線條，是用來確定畫圖的範圍。

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 點。

 

Ok,  在些需要繪製的各個點和地區都已經找到，貼圖、繪製陰影就可以了，  其它的改天再寫