翻书效果原理
翻书效果原理
李光正 发表于3年前
翻书效果原理
  • 发表于 3年前
  • 阅读 8
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

实现真实的翻页效果,为了能在翻页的过程中看到下一页的内容,在翻页之前必须准备两张页面,一张是当前页,另一张是下一页。翻页的过程就是对这两张页面的剪切,组合过程。

用户看到的可以分为3部分:当前页的可见部分(下图绿色部分),把书页翻起来后看到的背面区域(下图黄色部分),把书页翻起来后看到的下一页的一角(下图绿色部分)。


假设我们已经求得了包含黄色区域和蓝色区域的Path, 假设为mPath0,那么绿色区域则可以使用

Canvas.clipPath(mPath0, Region.Op.XOR)来剪裁绘制;

而蓝色区域则可以通过使用(假设黄色区域的Path为mPath1)

Canvas.clipPath(mPath0);  

Canvas.clipPath(mPath1, Region.Op.DIFFERENCE);//绘制第一次不同于第二次的区域

下面我们来研究如何求取mPath0:

上图黄色和蓝色区域的mPath0,可以通过以下获取:

mPath0.moveTo(jx, jy);  

mPath0.quadTo(hx, hy, kx, ky);  

mPath0.lineTo(ax, ay);  

mPath0.lineTo(bx, by);  

mPath0.quadTo(ex, ey, cx,cy);     

mPath0.lineTo(fx, fy);  

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点坐标。

以下推导需要较多的数学知识,不记得的童鞋,自觉复习去~~

b点是ae的中点,

bx=(ax+ex)/2

by=(ay+ey)/2

同理可求出k

 

d点坐标:

d为pe的中点,所以:

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

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

同理 可求 i 点。

标签: path c
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 5
博文 64
码字总数 0
×
李光正
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: