Chinaunix首页 | 论坛 | 博客
  • 博客访问: 3398250
  • 博文数量: 864
  • 博客积分: 14125
  • 博客等级: 上将
  • 技术积分: 10634
  • 用 户 组: 普通用户
  • 注册时间: 2007-07-27 16:53
个人简介

https://github.com/zytc2009/BigTeam_learning

文章分类

全部博文(864)

文章存档

2023年(1)

2021年(1)

2019年(3)

2018年(1)

2017年(10)

2015年(3)

2014年(8)

2013年(3)

2012年(69)

2011年(103)

2010年(357)

2009年(283)

2008年(22)

分类: C/C++

2010-12-11 15:08:56

翻页(folding)特效在 UI 中用的多,如转场、电子书的翻页等。翻页(folding) 效果如下图所示:

图1. from 参考资料1
图1. from 参考资料1

实现 folding 特效有很多方法,包括 2D 的和 3D 的,下面将分别介绍。

2D 方法

总的思路是: 截屏 + 直角三角形 + 三边形(bezier1/bezier2/line) + timer 更新。如下图所示。

图2. folding特效分解
图2. folding特效分解

folding 特效可分解成三部分:

  1. 未翻完的部分,如图2的区域1;
  2. 翻过去,露出的底图部分,如图2的区域2;
  3. 褶皱部分,如图2的区域3。

仔细分析,可以得到如下的思路:

  1. 区域1是个五变形,用上层的图填充;
  2. 区域2是个直角三角形,用下层的图填充;
  3. 区域3是由两条 bezier 曲线加一条直线构成的三边形,区域3和区域1之间运用半透明效果。

已知鼠标当前位置 (x, y)、窗口 width 和 height,很容易算出三个区域各个 顶点的坐标,见图2。根据顶点坐标,通过 path 接口,可以画出三个区域的形 状。 再通过设置剪切域(clip),就可以在三个区域中绘制想要的图形。

以 为例,伪代码如下所示:

    ... ...

// set composition mode
painter->setCompositionMode (QPainter::CompositionMode_Source);

QPainterPath path;

/* Draw region 1 */

painter->save ();
path.moveTo (0,0);
path.lineTo (mouse_pos.x, 0);
path.lineTo (WIN_WIDTH, mouse_pos.y);
path.lineTo (WIN_WIDTH, WIN_HEIGHT);
path.lintTo (0, WIN_HEIGHT);
path.closeSubpath ();
painter->setClipPath (path);
painter->drawPixmap (0,0, image_up);
painter->restore();

/*Draw region 2*/
painter->save();
path.clear();
path.moveTo (mouse_pos.x, 0);
path.lineTo (WIN_WIDTH, mouse_pos.y);
path.lineTo (WIN_WIDTH, 0);
path.closeSubpath ();
painter->setClipPath (path);
painter->drawPixmap (0,0,image_down);
painter->restore();


/* Draw region 3 */
path.clear();
path.moveTo (mouse_pos.x, 0);
path.cubicTo (c1x, c1y, c2x, c2y, mouse_pos.x, mouse_pos.y);
path.cubicTo (c1x, c1y, c2x, c2y, WIN_WIDTH, mouse_pos.y);
path.closeSubpath ();
painter->setBrush (color);
painter->drawPath (path);

... ...

3D 方法

To be continued...

Reference

  1. Folding
阅读(2159) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~