android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算)
为什么80%的码农都做不了架构师?>>>
实现真实的翻页效果,为了能在翻页的过程中看到下一页的内容,在翻页之前必须准备两张页面,一张是当前页,另一张是下一页。翻页的过程就是对这两张页面的剪切,组合过程。
用户看到的可以分为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点坐标。
以下推导需要较多的数学知识,不记得的童鞋,自觉复习去~~
一条直线的函数为:
Y=ax+b;
通过已知两点求直线: a = (y2-y1)/(x2-x1);
b = (x2*y1-y2*x1)/(x2-x1);
两条相交直线交点的坐标为:x= (b2-b1)/(a1-a2);
y=a1x+b1或者y=a2x+b2
综上,4点相交的直线的交点为:
x=( (x4*y3-y4*x3)/(x4-x3)-(x2*y1-y2*x1)/(x2-x1)) /
((y2-y1)/(x2-x1)- (y4-y3)/(x4-x3) )
= ( (x4*y3-y4*x3) (x2-x1)- (x2*y1-y2*x1) (x4-x3) ) /
( (y2-y1) (x4-x3)- (y4-y3) (x2-x1) )
将之前求得的 a,e,c,j四个点带入上式则可以求出 b. 同理可求k点。
d点坐标:
d为pe的中点,所以:
dx=((cx+bx)/2+ex)/2
dy=((cy+by)/2+ey)/2
同理 可求 i 点。
转载于:https://my.oschina.net/ykai/blog/38876
android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算)相关推荐
- 贝塞尔曲线绘制原理 unity 3d实现绘制贝塞尔曲线
贝塞尔曲线是一种绘制曲线的方法,它的原理很简单: 以二阶贝塞尔曲线为例 如图,在p0,p1之间移动着一个点,我们先称之为a0,同样在p1,p2之间移动着一个点,我们称之为a1.他们需要满足的条件是这样 ...
- Android利用贝塞尔曲线实现翻书效果(适配AndroidX)
实现背景 不知道你有没有遇到同样的问题,要实现翻书效果,如果你是使用github上的demo或者好多博客上写的方式,你会发现,当api从28开始,会抛出Invalid Region.Op.REPLAC ...
- Android App开发手机阅读中实现平滑翻书效果和卷曲翻书动画实战(附源码 简单易懂 可直接使用)
需要图片集和源码请点赞关注收藏后评论区留言~~~ 一.平滑翻书效果 与纸质书籍类似,手机上的电子书也有很多页,逐页浏览可采用翻页视图,然而翻页视图犹如一幅从左到右的绵长画卷,与现实生活中上下层叠的书籍 ...
- 自定义控件android特效,Android自定义控件eBook实现翻书效果实例详解
本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import androi ...
- html翻页特效实现原理,CSS3实现超炫3D翻书效果(二)
上回书,我们已经简单实现如何翻一页.好,现在我们复习一下.翻书效果的基本原理,请看下html布局: 简单再次说明下:box为大盒子,主要提供显示区域的左部分:page为要翻转的页面,其包含正面(fro ...
- 【Android UI】贝塞尔曲线 ⑥ ( 贝塞尔曲线递归算法原理 | 贝塞尔曲线递归算法实现 )
文章目录 一.贝塞尔曲线递归算法 二.贝塞尔曲线递归算法实现 贝塞尔曲线参考 : https://github.com/venshine/BezierMaker 一.贝塞尔曲线递归算法 一阶贝塞尔曲线 ...
- settimeout怎么用_怎么实现一个3d翻书效果
本篇主要讨论以下两种翻书动画的实现: 第一种是整页翻转的效果: 这种整页翻转的效果主要是做rotateY的动画,并结合一些CSS的3d属性实现. 第二种折线翻转的效果,如下图所示: 主要是通过计算页面 ...
- 3d饼图 vue_怎么实现一个3d翻书效果
本篇主要讨论以下两种翻书动画的实现: 第一种是整页翻转的效果: 这种整页翻转的效果主要是做rotateY的动画,并结合一些CSS的3d属性实现. 第二种折线翻转的效果,如下图所示: 主要是通过计算页面 ...
- 贝塞尔曲线公式推导原理
贝塞尔曲线(Bézier curve),又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线.1962,由法国工程师皮埃尔·贝塞尔(Pierre Bézier)所广泛发表,他运用贝塞尔曲线来为 ...
最新文章
- state.sls与state.highstate区别
- 1.2 Name That Number
- 常见的蓝牙4.0模块
- 本周Web2.0小工具推荐[2008-09-13]
- php 存储过程 sqlsrv_query,php-PHP如何得用sqlsrv函数来调用MSSQL中的存储过程,并返回数据集?...
- 中国军用装甲车和反IED车市场趋势报告、技术动态创新及市场预测
- Linux SSHD服务安装与维护详解(二)——SSHD调优和fail2ban联动
- 基于java的康泰小区物业管理系统的设计与实现毕业设计源码101926
- 用java程序实现记单词_GitHub - whypro/Hello-Word: 用 JAVA(J2SE) 实现的一个背单词程序,可自由选择词库。...
- RS码-LDPC码-喷泉码之比较
- 互联网金融指导意见或引发P2P跑路狂潮
- 搜索python设计题的微信公众号_appium+python自动化42-微信公众号 (可能以后会遇到也遇到切换不了webview的问题 记录再此 还没试)...
- CMakeLists.txt文件常见编译错误
- MySQL索引数据结构及算法原理
- 怎么搭建在线网校系统,靠谱的网校平台搭建开发公司
- wget命令 scp命令 rcp命令
- WiFi6模块AP6275S
- 录屏程序之屏幕实时录制保存成AVI视频文件
- 计算机趣味数学社团活动管理制度,小学趣味数学社团活动管理制度
- linux安装win镜像文件,如何在Windows,Mac和Linux上安装ISO和其他光盘映像 | MOS86
热门文章
- 接受密码和用户名,若用户名为‘admin‘,密码为‘‘123456‘则显示用户登录成功,否则一直登录
- iOS-检查版本更新
- 一文读懂babel的使用
- java awt canvas_java.awt 类 Canvas - Java 中文参考手册
- ts 手动实现 ts 中的map
- C#控件开发---控件属性编辑器
- 2023年全国最新二级建造师精选真题及答案62
- 标准型微电脑酸碱度氧化还原电位控制器(UPH -100C)
- android 发送短信例子
- 如何挖到人生当中第一本CNVD