转载:
http://www.open-open.com/lib/view/open1326265166952.html
实现真实的翻页效果,为了能在翻页的过程中看到下一页的内容,在翻页之前必须准备两张页面,一张是当前页,另一张是下一页。翻页的过程就是对这两张页面的剪切,组合过程。
用户看到的可以分为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 点。
- 大小: 30.3 KB
- 大小: 31.6 KB
分享到:
相关推荐
Qt 中有相当方便的绘制接口 ( 由 QPainter 提供 ) 。 例如贝塞尔曲线的 API: QPainterPath 的 quadTo() 和 ...因此,我想到利用贝塞尔的公式生成曲线点,然后用直线来连接,即可实现「 N阶贝塞尔曲线绘制 」。
解决androidP以上Android利用贝塞尔曲线实现翻书效果XOR方法无法使用的难题
实现贝塞尔曲线的绘制,并可以移动控制点来改变曲线形状
这里采用的一种贝塞尔计算方法:WiKi:Bézier-求贝塞尔曲线控制点 具体相关 效果图 轮廓样式(contour_style) 效果(这里只是轮廓的样式,默认效果都是白色,这里显示的颜色是自己设置的) Sand(默认) ...
C++实现的三次贝塞尔曲线绘制,可拖动控制点修改曲线形状,包含源代码和可执行文件,VS2008的工程。 C++实现的三次贝塞尔曲线绘制,可拖动控制点修改曲线形状,包含源代码和可执行文件,VS2008的工程。
使用OpenGL实现三次贝塞尔曲线的绘制。
这是一个最简单的程序框架,点击屏幕会绘制一个贝塞尔曲线。仅仅是一个示例而已。
应用QT和贝塞尔曲线绘制复杂曲线
一个用Android实现的贝塞尔曲线,包括二阶、三阶贝塞尔曲线。
QT绘制贝塞尔曲线及控制点
python绘制贝塞尔曲线
Android 贝塞尔曲线动画 拿去直接用
一个在OpenGL上实现交互式贝塞尔曲线绘制的例子,非常简单,适合初学者。 本例通过鼠标点击画布拾取贝塞尔曲线的4个控制点,从而绘制3次贝塞尔曲线。
HTML实现贝塞尔曲线
贝塞尔曲线实现直播点赞效果
贝塞尔曲线,图片的3D旋转,增大按钮的触控范围,进度表,富文本显示等等功能
Android自定义View的一些Demo;Android贝塞尔曲线实现水纹波动效果、车辆监控效果的完整代码。
易语言贝塞尔曲线绘制源码例程程序调用API函数PolyBezier根据坐标点画贝塞尔曲线,或根据贝塞尔曲线特点在画板上画直线连接各坐标点。
贝塞尔曲线绘制系统
这是一份C语言版本的bezier曲线(贝塞尔曲线)绘制代码,实现了二次和三次bezier曲线的绘制,可用于一系列给定的离散点的曲线平滑。此代码封装成函数,可以直接调用。脚本里边有参数和代码的注释,可供使用者学习和...