现在的位置: 首页 > 综合 > 正文

贝塞尔曲线与翻页效果

2019年10月09日 ⁄ 综合 ⁄ 共 813字 ⁄ 字号 评论关闭

先来看一张翻页的效果图。假设从右下角开始翻页

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

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

接下来看一下三个颜色的区域怎么获取:

假设 a 为当前屏幕的触点。

f 为右下角的坐标。

g 是直线 af 的垂直平分线上的点

eh 是过 g 点垂直于 af 的直线。

—— —— —— —— —— —— ——  —— —— —— —— —— —— —— 

此时通过数学知识可以求得 

g 的坐标点: gx = (ax + fx) / 2;  gy = (ay + fy) / 2;

e点的坐标  通过公式  em * mf = gm * gm (其中em两点之间的长度)可以计算出来

同理计算出h的坐标

。。。。。。。。。。。。。。。。。

然后就剩下 i-j-k  b-d-c 这两条贝塞尔曲线的

其中 cj 是  ag 的垂直平分线

根据三角形的性质  ef / ec = gf / go = 2 

可以求出 c 点坐标, 同理求出 b k j

现在只剩下d i 两个点的坐标了。。。。

图中的 di 线话的不是很准。实际上 d 在ep的垂直平分线上。

关系为  de = dp 

d点坐标 dx = (ex - px) / 2

di为go的垂直平分线

—— —— —— —— —— —— ——  —— —— —— —— —— —— —— 

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

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

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

Canvas.clipPath(mPath0);   

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

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

抱歉!评论已关闭.