Qt编写刮刮乐(开源)

2018-05-09 22:31:11  阅读 233 次 评论 0 条

guaguale.gif

有需要该源码的朋友,加微信fearlazy_com发私信给我。


一、前言

    有一次在查找android资料的时候无意间看到一个android上实现刮刮乐效果的文章,感觉这个有点意思,就想着用Qt来写写玩玩。本想借鉴一下大神的思路,只可惜文章太长实在没耐心看完它(个人比较喜欢简短一点的文章,所以长一点的文章都分成一二三四来写)。


二、思路

    我们对刮刮乐的结构分析一下,会发现刮刮乐结构很简单,就只有两层。底层是结果展示的地方画好了就不用动了。顶层是涂层,鼠标拖动的时候需要擦除鼠标拖动的区域暴露出相应底层的内容。很显然难点就在于如何擦除顶层的内容。

    刚开始我的思路是用一个路径(QPainterPath)来表示完整的顶层,另一个路径来保存鼠标拖动的经过的区域。用完整的路径减去经过的路径就是需要绘制的区域。后来仔细一想觉得这种方式如果顶层是用颜色来绘制可能可行(有兴趣的朋友可以试试)但是顶层需要用图片来表示就不好办了,于是果断放弃了。

    我想大Qt不可能这么差吧,认真查询帮助文档看看有什么接口可用的,还真被我发现了QPainter::CompositionMode(定义数字图像合成模式的枚举类型)。其中有个值叫QPainter::CompositionMode_Clear,看到clear这个词就觉得有戏。测试了一下确实可行。方法就是在图像上先绘制一个你需要的背景图片,然后再绘制鼠标经过的路径。由于clear模式下后绘制的区域会清除之前该位置绘制的内容,这样就达到了擦除的目的了。

    

三、关键代码

    1.成员变量:

     QImage  m_BottomImg; 用于保存底层绘制的内容

     QImage  m_TopImg; 用于保存顶层绘制的内容

     QPainterPath  m_movePath;  鼠标经过的区域

    

    2.顶层的绘制:

void CGuaGuaLe::drawTop()
{
    m_TopImg = QImage(size(),QImage::Format_ARGB32_Premultiplied);
    QPainter painter(&m_TopImg);
    painter.drawPixmap(rect(),QPixmap(":/ggl.jpg"));
    painter.setCompositionMode(QPainter::CompositionMode_Clear);
    painter.setBrush(Qt::yellow);
    painter.drawPath(m_movePath);
}

    image的大小设置与刮刮乐控件一样大,格式为ARGB,带有alpha通道的格式才能实现透明。我们先绘制顶层的背景图片,然后再绘制鼠标经过的区域即可。需要注意的是在绘制m_movePath前需要设置画刷,否则达不到擦除的效果。


  3.鼠标经过路径的获取:

void CGuaGuaLe::mouseMoveEvent(QMouseEvent *event)
{
    m_movePath.addEllipse(event->pos(),7,7);
    update();
}

    m_movePath的获取很简单,就是在move事件中添加圆(以鼠标的位置为中心,半径自己定)。


 4.最后还需要注意一点就是要设置路径的填充规则模式为Qt::WindingFill:

m_movePath.setFillRule(Qt::WindingFill);

   为什么要设置填充规则看一下图片立马就能明白了。

blob.png


        作者:fearlazy

如果你觉得文章对你有帮助点击分享,分享给你的同事和朋友吧!

如果你想要指导我一下,在评论区分表一下意见吧!


本文地址:http://fearlazy.com/index.php/post/74.html
版权声明:本文为原创文章,版权归 fearlazy 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

还没有留言,还不快点抢沙发?