先来看一张翻页的效果图。假设从右下角开始翻页
实现真实的翻页效果,为了能在翻页的过程中看到下一页的内容,在翻页之前必须准备两张页面,一张是当前页,另一张是下一页。翻页的过程就是对这两张页面的剪切,组合过程。
用户看到的可以分为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: