文档章节

翻书效果原理

李光正
 李光正
发布于 2015/10/15 14:53
字数 561
阅读 10
收藏 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 点。

本文转载自:http://blog.csdn.net/liguangzhenghi/article/details/7575567

共有 人打赏支持
李光正
粉丝 5
博文 64
码字总数 0
作品 0
大兴
Full Screen Animations

这个代码实现了两种比较酷的动画效果: 1. 程序启动画面(splash画面)到程序界面(root view controller)之间的过渡动画效果是翻书的效果。即开机画面停留一小段时间后,慢慢像翻书一样翻到...

匿名
2012/07/06
689
0
6 个实现翻书效果的 jQuery 插件

jQuery的与现代网络技术相结合,可以创造奇迹,它可以用来实现大多数的逼真的效果。在大部分时间中,来自现实世界的例子影响着Web开发人员的灵感。而像书一样翻页效果是一种非常流行的Web开发...

oschina
2012/10/04
43K
5
请教文字自动填充两个div,类似看小说效果

想实现这样一个功能,利用turn.js 实现在线看小说,翻页翻书效果。 我通过初始化页面时用ajax调取PHP端读取数据库,取到1章,显示到页面上。 现在遇到如下问题: turn.js 显示翻书的页面 是两...

烧毁王
2017/02/16
252
2
自助书

自助书系统基于ajax的类似于ibook的翻书效果,社交网站。

asdf456
2014/07/27
385
0
怎么用turn.js啊?

下了 turn.js , 但是不知道怎么用, 谁能给个简单的例子啊!只要能做出翻书的效果就行了

田叶清
2012/11/22
388
2

没有更多内容

加载失败,请刷新页面

加载更多

关于pip

我在更新pip的时候碰到的一些问题。 第一次安装,直接安装就ok了,所以也没研究,没想到后来由于安装了python2.x和python3.x之后出现了问题。 如果要将pip更新到最新版本需要指明是哪个版本的...

恰东
33分钟前
1
0
对硬盘进行分区时,GPT和MBR有什么区别

在Windows 8或8.1中设置新磁盘时,系统会询问你是想要使用MBR还是GPT分区。GPT是一种新的标准,并在逐渐取代MBR。 GPT带来了很多新特性,但MBR仍然拥有最好的兼容性。GPT并不是Windows专用的...

yizhichao
35分钟前
3
0
区块链教程btcpool矿池源码分析StratumServer模块解析

兄弟连区块链教程btcpool矿池源码分析StratumServer模块解析 核心机制总结 接收的job延迟超过60秒将丢弃 如果job中prevHash与本地job中prevHash不同,即为已产生新块,job中isClean状态将置为...

兄弟连区块链入门教程
36分钟前
1
0
JS中的异常捕获

JS中的异常捕获(目的:把抛出的错误捕获到,不让其阻断浏览器的继续执行) try{//需要执行的JS代码(可能会报错)}catch(e){//try中代码报错,会执行catch}finally{//不管try中的代...

NDweb
46分钟前
2
0
ObjectARX_AcDb2dPolyline复杂实体

1遍历:访问或者编辑复杂实体也需要通过特定的方式。 AcDb2dPolyline的顶点信息不能通过AcDb2dPolyline对象直接得到,需要遍历AcDb2dPolyline所包含的AcDb2dVertex对象: void IteratePolylin...

一个小妞
48分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部