本文详细探讨了实现翻页效果的数学原理，包括贝塞尔曲线在其中的作用。通过分析翻页过程中的三个关键区域——当前页的可见部分、背面区域和下一页的一角，介绍了如何计算各点坐标，特别是利用贝塞尔曲线生成蓝色和黄色区域的路径。最后，阐述了如何结合canvas的clipPath方法来绘制和剪裁这些区域，以达到逼真的翻页视觉效果。
先来看一张翻页的效果图。假设从右下角开始翻页
实现真实的翻页效果，为了能在翻页的过程中看到下一页的内容，在翻页之前必须准备两张页面，一张是当前页，另一张是下一页。翻页的过程就是对这两张页面的剪切，组合过程。
用户看到的可以分为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
最低0.47元/天 解锁文章
扫一扫
1401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
