【Qt】QOpenGLWidget展示蒙版效果

关键代码是派生QOpenGLWidget,覆写paintEvent函数

QPainter p;
    p.begin(this);
    p.drawImage(QPoint(0, 0), m_Img);

    QLinearGradient grad(0, 0, rect().width(), rect().height());
           {
                   QGradientStops gs;
                   gs << QGradientStop(0.0, QColor(0,0,0,100))
                           << QGradientStop(0.5, QColor(0,0,0,100))
                           << QGradientStop(1.0, QColor(0,0,0,100));
                   grad.setStops(gs);
           }

    //定义顶部蒙版高度
     int m_topHeight = 20;
     //定义双侧蒙版宽度
     int m_sideWidth = 50;
     //定义底部蒙版高度
     int m_bottomHeight = 100;
     //线条长度
     int iLineLen = 20;

     //底部文字框的宽高
     int iTxtHeight = 50;
     int iTxtWidth = 150;

   //填充周围蒙版
   //顶部
   p.fillRect(0, 0, rect().width(), m_topHeight, grad);
   //底部
   p.fillRect(0, rect().height() - m_bottomHeight, rect().width(), m_bottomHeight, grad);

   //左侧
   p.fillRect(0, m_topHeight, m_sideWidth, rect().height() - m_topHeight - m_bottomHeight, grad);

   //右侧
   p.fillRect(rect().width() - m_sideWidth,  m_topHeight, m_sideWidth, rect().height() - m_topHeight - m_bottomHeight, grad);

   QPen pen;
   pen.setStyle(Qt::DashDotLine);
    pen.setWidth(1);

    if(m_status == 0)
    {
        pen.setBrush(Qt::green);
    }
    else if(m_status == 1)
    {
        pen.setBrush(Qt::yellow);
    }
    else if(m_status == 2)
    {
        pen.setBrush(Qt::red);
    }

    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::RoundJoin);

    p.setPen(pen);
    //绘制中间高亮区域矩形
    //矩形宽高
    int iWith =rect().width()-m_sideWidth*2;
    int iHeight = rect().height() -m_topHeight - m_bottomHeight;

    p.drawRect(m_sideWidth, m_topHeight, iWith,iHeight);

    QPen pen2;
    pen2.setWidth(5);

    if(m_status == 0)
    {
        pen2.setBrush(Qt::green);
    }
    else if(m_status == 1)
    {
        pen2.setBrush(Qt::yellow);
    }
    else if(m_status == 2)
    {
        pen2.setBrush(Qt::red);
    }

    p.setPen(pen2);
    //画四角的线条

    //左上横线
    p.drawLine(m_sideWidth,m_topHeight,m_sideWidth +iLineLen, m_topHeight);
    //左上竖线
    p.drawLine(m_sideWidth,m_topHeight+iLineLen,m_sideWidth,m_topHeight);

    //右上横线
    p.drawLine(rect().width() - m_sideWidth - iLineLen,m_topHeight, rect().width() - m_sideWidth,m_topHeight);

    //右上竖线
    p.drawLine(rect().width() - m_sideWidth,m_topHeight, rect().width() - m_sideWidth, m_topHeight + iLineLen);

    //右下竖线
    p.drawLine(rect().width() - m_sideWidth,rect().height()-m_bottomHeight,rect().width() - m_sideWidth,rect().height()-m_bottomHeight - iLineLen);
    //右下横线
    p.drawLine(rect().width() - m_sideWidth,rect().height()-m_bottomHeight, rect().width() - m_sideWidth - iLineLen,rect().height()-m_bottomHeight);

    //左下横线
    p.drawLine(m_sideWidth,rect().height()-m_bottomHeight,m_sideWidth+iLineLen, rect().height()-m_bottomHeight);
    //左下竖线
    p.drawLine(m_sideWidth,rect().height()-m_bottomHeight, m_sideWidth,rect().height()-m_bottomHeight -iLineLen);

    //绘制底部提示消息
    QString strMsg = "";
    if(m_status == 0)
    {
        strMsg=QStringLiteral("请通行");
    }
    else if(m_status == 1)
    {
        strMsg=QStringLiteral("请刷脸");
    }
    else if(m_status == 2)
    {
        strMsg=QStringLiteral("请对准红框");
    }
    p.setPen(pen);
    p.drawRect(rect().width()/2 - iTxtWidth/2, rect().height()-m_bottomHeight + (m_bottomHeight/2-iTxtHeight/2), iTxtWidth, iTxtHeight );

    QRect txtRect;
    txtRect.setX(rect().width()/2 - iTxtWidth/2);
    txtRect.setY(rect().height()-m_bottomHeight + (m_bottomHeight/2-iTxtHeight/2));
    txtRect.setWidth(iTxtWidth);
    txtRect.setHeight(iTxtHeight);

    p.setPen(pen2);

    QFont font;
    font.setFamily("Microsoft YaHei");
    // 大小
    font.setPointSize(20);
    // 使用字体
    p.setFont(font);

    p.drawText(txtRect, Qt::AlignCenter , strMsg);

    p.end();

使用QMoive播放Gif的代码

 m_movie =new QMovie("F:/TestProject/QMoveTest/timg.gif");
    m_timer =new QTimer(this);
 ui->lblMove->setVisible(true);

        ui->lblMove->setMovie(m_movie);

        m_movie->start();

        //m_timer->start(3000);
        QTimer::singleShot(5000, this, SLOT(StopMovie()));
void MainWindow::StopMovie()
{
    m_movie->stop();
    ui->lblMove->setVisible(false);
}

最终效果:

+

原文地址:https://www.cnblogs.com/zhehan54/p/9481039.html

时间: 2024-11-05 14:58:12

【Qt】QOpenGLWidget展示蒙版效果的相关文章

jQuery图片旋转展示收缩效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Android 开发第三弹:自定义左右菜单(滑动动画+蒙版效果)

下面的截图--哎,因为1080P在Windows 10上虽然适配了,但大部分软件并没有跟上,比如某个录制GIF的软件,所以这里有一定的偏移导致画面不完整,但效果大概就是这么一个效果了. MainUI.java 首先需要这么一个类,在这里一些UI的滑动呀之类的都会定义.首先吧,定义好这些变量,当然了,实际开发过程中肯定需要哪一个就添加上哪一个的. private Context context; // 上下文 private FrameLayout leftMenu; // 左边部分 privat

移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo

移动端之在不同尺寸大小的手机上展示同一效果解决方案 by FungLeo 前言,反思 在之前的项目当中,我在CSS中设置html{font-size: 62.5%;},也就是设置为10px,然后全站根据这个根植,来设置rem单位的样式.这样虽然解决了很多的问题.但是在面对不同宽度的手机的时候,还是需要去自适应设置很多的内容.当然,因为手机分辨率的不同,我们可以自由的将页面设置在320(iphone5s)-414(iphone6plus)这样的范围内还是很合适的.但是,奇葩手机年年有,华为meta

浅谈css蒙版效果

我们进网站浏览时经常看到当鼠标悬浮在图片上或者某一个地方时,会出现一层朦胧现象覆盖着悬浮位置,简单的理解为"蒙版效果".下面简单列举实现过程: HTML: CSS: 原文地址:https://www.cnblogs.com/leidan/p/9710810.html

css3实现ps蒙版效果以及动画,炫酷吊炸天!

css3越来越强大,使用css也可以做越来越多意想不到的效果. css3实现了ps的蒙版效果,炫酷叼炸天的技能,必须要分享出来啊! 实现原理 这个动画,其实也并不复杂.它使用background-clip实现了文字蒙版的效果,然后结合了背景图片的animation实现了如上图所示的文字蒙版动画. 用css3做蒙版效果常见的有两种,一种是图形的,另一种是文字的. 图形蒙版 这里要使用的到时clip-path,它的作用是根据你指定的图形的轮廓来保留剩余的区域,如果你制定的图形是圆形,那么剩余的就是个

图片展示上移效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>图片展示显示详细说明和隐藏</tit

谈谈图片蒙版效果-webkit-mask

会用PS的童鞋一定知道“蒙版”的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效果. 大家对-webkit-mask这一属性可能不太熟悉,或许有很多人都是第一次见到,没错,这一属性也是还未被众多浏览器所支持的CSS属性,目前支持这一属性的仅有-webkit-前缀的谷歌及safari浏览器,但是相信在不久的未来这一属性将被其他主流浏览器所支持,下面我们来一睹为快. 首先介绍一下它的属性值,可以有两种

QT窗口渐现效果,窗口震动效果,鼠标移动窗口

//窗口渐现效果void MainWindow::closeWindowAnimation() //关闭窗口效果 { QPropertyAnimation *animation = new QPropertyAnimation(this,"windowOpacity"); animation->setDuration(500); animation->setStartValue(1); animation->setEndValue(0); animation->

使用Axure制作无限循环展示图片效果

一.实现的效果 如图: 1.此次需要实现的效果是,进入界面后,在图片展示区域的图片根据事先设定好的时间,自动切换不同的图片: 2.循环不间断: 3.页面不出现闪烁的现象. 二.做前工作 图片:4张 软件:Axure 三.制作流程 1.在开打的空页面上添加一个动态面板(X:20 ,Y:20 :W:600,H:382)如图: 2.给动态面板取名为“动态广告”,再在该动态面板上添加4个字状态,分别取名为,图01.图02.图03.图04.如图: 3.为每个状态分别添加不同的图片.如图: 4.为了实现这个