区块链技术博客
www.b2bchain.cn

Qt翻页效果实现(三):2D图像绘制求职学习资料

本文介绍了Qt翻页效果实现(三):2D图像绘制求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

  • 绘制方法
  • 特别一点的区域2
  • 阴影效果

绘制方法

上文讲完了坐标计算,通过代码我们很容易知道:
m_ports1 代表土黄色区域点的集合,以下称为区域1;
m_ports2 代表粉红色区域点的集合,以下称为区域2;
m_ports3 代表棕色区域点的集合,以下称为区域3。

Qt翻页效果实现(三):2D图像绘制

对于单独颜色的填充,直接对点组合成的闭合区域进行填充即可。
但是对于图像,只有区域1与区域3可以按照颜色的方式进行填充。因为他们的左上角圆点都在点O(0,0)的地方;
填充方式如下代码:

    QList<QPointF>&p = m_flipMath.m_ports1;  // 或者用  m_flipMath.m_ports3     if (p.size()) {           QPainterPath one;         one.moveTo(p[0]);         for (int i = 1; i < p.size(); i++)             one.lineTo(p[i]);         one.closeSubpath();         painter.fillPath(one, QBrush(m_img1));     }

一定注意 p.size() 不为零的这个判段,因为在有些时候,有些区域是不存在的,不如还未翻动的时候,只有区域1存在。

特别一点的区域2

那么对于区域2的绘制,如何实现呢?先看下图:

Qt翻页效果实现(三):2D图像绘制

很明显,对于区域2来说,它的完整图像可以看成是经过旋转的效果,所在区域就是粉红色区域部分。
它的左上角原点即现在的点O’;只需要求出它的坐标,和倾斜角度,即可绘制出区域2的图像。
上文留下的数据悬念之一的 m_angle 就是这个角度。
那点O’的坐标呢?也可以通过这个角度获取。
记得上文求取超过圆范围的C点坐标吗?这个计算方式类似。
下面先以上面图片为例,先以右下角翻转为前提,计算方法如下:

// 右下角翻转 qreal ddx = sin(m_flipMath.m_angle)*h;    qreal ddy = cos(m_flipMath.m_angle)*h; QPointF p = m_flipMath.m_pos + QPointF(ddx, -ddy); qreal angle = m_flipMath.m_angle * 180 / 3.14; painter.translate(p); painter.rotate(angle); painter.drawImage(0,0, m_imgMirror);

不同的角度翻转,影响的只是ddx,ddy,以及旋转的angle的正负号有关,具体对应于左边体系。
区域2图像命名为 m_imgMirror,想必大家也应该想到,一遍有些翻页效果,区域2的图像是区域1的镜像;
想做出这样的效果,m_imgMirror 首先只需要对区域1的图像进行水平翻转。

m_imgMirror = m_img1.mirrored(true, false);

那么如果仅仅只是对图像1进行翻转,倒影的效果并不明显吧?
下面将会解密另几个数据悬念数据了。

阴影效果

眼镜是如何分别2维和3维物体的呢?通过物体的明暗程度,以及距离感。
对于绘图,我们如何欺骗眼镜呢?答案是添加阴影!

Qt翻页效果实现(三):2D图像绘制

如图,只要我们在翻开的折线两边添加一段阴影,就可以看到有一定的立体感!不在是纯平面的效果。
而上文留下的数据悬念 m_begin, m_end, m_middle 就是为了绘制阴影而获取的数据点。
m_end 就是翻起页移动的最远的点;
m_begin 是 m_end 相对于折线的对称点;
m_middle 就是 m_begin 和 m_end 的中点。
对于阴影的生成,我用简单的线性渐变实现的,颜色定义如下:

QColor m_endColor(0,0,0,200); QColor m_maskColor(255,255,255,120)

由于本人对颜色不是很会调,有此方面高手,如果改的更好的效果,可以评论告知!

// 区域2 end 到 middle QLinearGradient line(m_flipMath.m_end, m_flipMath.m_middle); line.setColorAt(0, Qt::transparent); line.setColorAt(0.8, Qt::transparent); line.setColorAt(1, m_endColor); painter.fillPath(two, m_maskColor);  // 透明图,顺便淡化区域2的图像,使其更像倒影效果 painter.fillPath(two, line);  // 区域3 begin 到 middle QLinearGradient line(m_flipMath.m_begin, m_flipMath.m_middle); line.setColorAt(0, Qt::transparent); line.setColorAt(0.8, Qt::transparent); line.setColorAt(1, m_endColor); painter.fillPath(thr, line);

  • 绘制方法
  • 特别一点的区域2
  • 阴影效果

绘制方法

上文讲完了坐标计算,通过代码我们很容易知道:
m_ports1 代表土黄色区域点的集合,以下称为区域1;
m_ports2 代表粉红色区域点的集合,以下称为区域2;
m_ports3 代表棕色区域点的集合,以下称为区域3。

Qt翻页效果实现(三):2D图像绘制

对于单独颜色的填充,直接对点组合成的闭合区域进行填充即可。
但是对于图像,只有区域1与区域3可以按照颜色的方式进行填充。因为他们的左上角圆点都在点O(0,0)的地方;
填充方式如下代码:

    QList<QPointF>&p = m_flipMath.m_ports1;  // 或者用  m_flipMath.m_ports3     if (p.size()) {           QPainterPath one;         one.moveTo(p[0]);         for (int i = 1; i < p.size(); i++)             one.lineTo(p[i]);         one.closeSubpath();         painter.fillPath(one, QBrush(m_img1));     }

一定注意 p.size() 不为零的这个判段,因为在有些时候,有些区域是不存在的,不如还未翻动的时候,只有区域1存在。

特别一点的区域2

那么对于区域2的绘制,如何实现呢?先看下图:

Qt翻页效果实现(三):2D图像绘制

很明显,对于区域2来说,它的完整图像可以看成是经过旋转的效果,所在区域就是粉红色区域部分。
它的左上角原点即现在的点O’;只需要求出它的坐标,和倾斜角度,即可绘制出区域2的图像。
上文留下的数据悬念之一的 m_angle 就是这个角度。
那点O’的坐标呢?也可以通过这个角度获取。
记得上文求取超过圆范围的C点坐标吗?这个计算方式类似。
下面先以上面图片为例,先以右下角翻转为前提,计算方法如下:

// 右下角翻转 qreal ddx = sin(m_flipMath.m_angle)*h;    qreal ddy = cos(m_flipMath.m_angle)*h; QPointF p = m_flipMath.m_pos + QPointF(ddx, -ddy); qreal angle = m_flipMath.m_angle * 180 / 3.14; painter.translate(p); painter.rotate(angle); painter.drawImage(0,0, m_imgMirror);

不同的角度翻转,影响的只是ddx,ddy,以及旋转的angle的正负号有关,具体对应于左边体系。
区域2图像命名为 m_imgMirror,想必大家也应该想到,一遍有些翻页效果,区域2的图像是区域1的镜像;
想做出这样的效果,m_imgMirror 首先只需要对区域1的图像进行水平翻转。

m_imgMirror = m_img1.mirrored(true, false);

那么如果仅仅只是对图像1进行翻转,倒影的效果并不明显吧?
下面将会解密另几个数据悬念数据了。

阴影效果

眼镜是如何分别2维和3维物体的呢?通过物体的明暗程度,以及距离感。
对于绘图,我们如何欺骗眼镜呢?答案是添加阴影!

Qt翻页效果实现(三):2D图像绘制

如图,只要我们在翻开的折线两边添加一段阴影,就可以看到有一定的立体感!不在是纯平面的效果。
而上文留下的数据悬念 m_begin, m_end, m_middle 就是为了绘制阴影而获取的数据点。
m_end 就是翻起页移动的最远的点;
m_begin 是 m_end 相对于折线的对称点;
m_middle 就是 m_begin 和 m_end 的中点。
对于阴影的生成,我用简单的线性渐变实现的,颜色定义如下:

QColor m_endColor(0,0,0,200); QColor m_maskColor(255,255,255,120)

由于本人对颜色不是很会调,有此方面高手,如果改的更好的效果,可以评论告知!

// 区域2 end 到 middle QLinearGradient line(m_flipMath.m_end, m_flipMath.m_middle); line.setColorAt(0, Qt::transparent); line.setColorAt(0.8, Qt::transparent); line.setColorAt(1, m_endColor); painter.fillPath(two, m_maskColor);  // 透明图,顺便淡化区域2的图像,使其更像倒影效果 painter.fillPath(two, line);  // 区域3 begin 到 middle QLinearGradient line(m_flipMath.m_begin, m_flipMath.m_middle); line.setColorAt(0, Qt::transparent); line.setColorAt(0.8, Qt::transparent); line.setColorAt(1, m_endColor); painter.fillPath(thr, line);

  • 绘制方法
  • 特别一点的区域2
  • 阴影效果

绘制方法

上文讲完了坐标计算,通过代码我们很容易知道:
m_ports1 代表土黄色区域点的集合,以下称为区域1;
m_ports2 代表粉红色区域点的集合,以下称为区域2;
m_ports3 代表棕色区域点的集合,以下称为区域3。

Qt翻页效果实现(三):2D图像绘制

对于单独颜色的填充,直接对点组合成的闭合区域进行填充即可。
但是对于图像,只有区域1与区域3可以按照颜色的方式进行填充。因为他们的左上角圆点都在点O(0,0)的地方;
填充方式如下代码:

    QList<QPointF>&p = m_flipMath.m_ports1;  // 或者用  m_flipMath.m_ports3     if (p.size()) {           QPainterPath one;         one.moveTo(p[0]);         for (int i = 1; i < p.size(); i++)             one.lineTo(p[i]);         one.closeSubpath();         painter.fillPath(one, QBrush(m_img1));     }

一定注意 p.size() 不为零的这个判段,因为在有些时候,有些区域是不存在的,不如还未翻动的时候,只有区域1存在。

特别一点的区域2

那么对于区域2的绘制,如何实现呢?先看下图:

Qt翻页效果实现(三):2D图像绘制

很明显,对于区域2来说,它的完整图像可以看成是经过旋转的效果,所在区域就是粉红色区域部分。
它的左上角原点即现在的点O’;只需要求出它的坐标,和倾斜角度,即可绘制出区域2的图像。
上文留下的数据悬念之一的 m_angle 就是这个角度。
那点O’的坐标呢?也可以通过这个角度获取。
记得上文求取超过圆范围的C点坐标吗?这个计算方式类似。
下面先以上面图片为例,先以右下角翻转为前提,计算方法如下:

// 右下角翻转 qreal ddx = sin(m_flipMath.m_angle)*h;    qreal ddy = cos(m_flipMath.m_angle)*h; QPointF p = m_flipMath.m_pos + QPointF(ddx, -ddy); qreal angle = m_flipMath.m_angle * 180 / 3.14; painter.translate(p); painter.rotate(angle); painter.drawImage(0,0, m_imgMirror);

不同的角度翻转,影响的只是ddx,ddy,以及旋转的angle的正负号有关,具体对应于左边体系。
区域2图像命名为 m_imgMirror,想必大家也应该想到,一遍有些翻页效果,区域2的图像是区域1的镜像;
想做出这样的效果,m_imgMirror 首先只需要对区域1的图像进行水平翻转。

m_imgMirror = m_img1.mirrored(true, false);

那么如果仅仅只是对图像1进行翻转,倒影的效果并不明显吧?
下面将会解密另几个数据悬念数据了。

阴影效果

眼镜是如何分别2维和3维物体的呢?通过物体的明暗程度,以及距离感。
对于绘图,我们如何欺骗眼镜呢?答案是添加阴影!

Qt翻页效果实现(三):2D图像绘制

如图,只要我们在翻开的折线两边添加一段阴影,就可以看到有一定的立体感!不在是纯平面的效果。
而上文留下的数据悬念 m_begin, m_end, m_middle 就是为了绘制阴影而获取的数据点。
m_end 就是翻起页移动的最远的点;
m_begin 是 m_end 相对于折线的对称点;
m_middle 就是 m_begin 和 m_end 的中点。
对于阴影的生成,我用简单的线性渐变实现的,颜色定义如下:

QColor m_endColor(0,0,0,200); QColor m_maskColor(255,255,255,120)

由于本人对颜色不是很会调,有此方面高手,如果改的更好的效果,可以评论告知!

// 区域2 end 到 middle QLinearGradient line(m_flipMath.m_end, m_flipMath.m_middle); line.setColorAt(0, Qt::transparent); line.setColorAt(0.8, Qt::transparent); line.setColorAt(1, m_endColor); painter.fillPath(two, m_maskColor);  // 透明图,顺便淡化区域2的图像,使其更像倒影效果 painter.fillPath(two, line);  // 区域3 begin 到 middle QLinearGradient line(m_flipMath.m_begin, m_flipMath.m_middle); line.setColorAt(0, Qt::transparent); line.setColorAt(0.8, Qt::transparent); line.setColorAt(1, m_endColor); painter.fillPath(thr, line);

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » Qt翻页效果实现(三):2D图像绘制求职学习资料
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们