HMI设计九-cybertruck-QPainter复杂油门刹车滑动块设计

• 要实现的目标

  • 点击刹车片图片进入 复杂油门刹车滑动块
  • 滑动块浮现等待状态会有上下阴影块分别向上向下运行
  • 向上向下切换滑块后，滑块中部隔一定时间(车机检测后)显现停车控制按钮
  • 向上向下切换滑块后，滑块不再支持中间节点，只能向上或者向下切换
  • 鼠标长按中部停车控制按钮后切换回首页3D模型

• 难点

  • 如何构建图示 点阵背景
  • 如何重构slider滑动块显示控件

• 如何构建图示 点阵背景

  • 使用QPainter进行手绘
  • 使用QRegion和xored构建掩模板，用setClipRegion设置绘画图层对象
  •  brush.setStyle 设定点阵画刷Qt::Dense7Pattern进行绘制

void DirControlWidget::paint(QPainter *painter)
{

    painter->setRenderHint(QPainter::Antialiasing);


    QColor borderColor = Qt::transparent;
    QColor fillColor = QColor(255, 255, 255);

    QPen pen;
    pen.setColor(borderColor);
    pen.setStyle(Qt::DotLine);
    painter->setPen(pen);

    QBrush brush;
    brush.setColor(fillColor);
    brush.setStyle(Qt::Dense7Pattern);
    painter->setBrush(brush);


    QRegion r1(QRect(m_x,m_y,m_w,m_h));
    QRegion r2(QRect(m_x+m_dt,m_y+m_dt,m_w-m_dt*2,m_w-m_dt*2));
    QRegion r3(QRect(m_x+m_dt,m_y+m_h-m_w+m_dt,m_w-m_dt*2,m_w-m_dt*2));
    QRegion r4 = r1.xored(r2);
    QRegion r5 = r4.xored(r3);
    QRegion r6;
    QRegion r7;
    if(m_isStopShow)
    {
        r6 = QRegion(QRect(m_x+m_dt,m_y+m_h/2-m_w/2+m_dt,m_w-m_dt*2,m_w-m_dt*2));
        r7 = r5.xored(r6);
    }
    else{
        r7 = r5;
    }



    painter->setClipRegion(r7,Qt::ReplaceClip);
    painter->drawRect(m_x,m_y,m_w,m_h);

    painter->setClipRegion(r7,Qt::NoClip);

}

• 通过设定特定函数进行update刷新

void DirControlWidget::setDirControlWidgetData(int x, int y, int w, int h,bool isStopShow)
{
    m_x = x;
    m_y = y;
    m_w = w;
    m_h = h;
    m_dt = 4;
    m_isStopShow = isStopShow;
    update();
}

• 如何构建滑块阴影部分

  • 使用Shape- ShapePath- PathArc构建圆结合fillGradient实现径向渐变效果
  • 具体看本系列另外一篇博文
    • HMI设计十-cybertruck-QPainter径向渐变圆与阴影流动设计-CSDN博客
  • 移动过程通过SequentialAnimation控制scale，height，y等参数实现前进后退效果

• 如何重构slider滑动块显示控件

  • 通过重写background:Rectangle和handle:Rectangle的实现滑动块背景和滑动块重新设计
  • 具体看本系列另外一篇博文
    • HMI设计十一-cybertruck-Slider控制块与滑轨自定义重构-CSDN博客

• 如何实现长按停车按钮实现切换

  • 使用了Timer 进行时间限定设计，时间到了检测按钮是否仍然press
  • 结合onPressed和onReleased 设计 实现最终效果

   Button{
        id:dirControlQuitBut
        x:winDesktop.dirControlQuitButX
        y:winDesktop.dirControlQuitButY
        width:winDesktop.dirControlQuitButWidth
        height:winDesktop.dirControlQuitButHeight
        icon.color: "transparent"
        checkable:false
        display:AbstractButton.IconOnly
        visible:(winDesktop.pageIsActive()  && (!winDesktop.brakeControlIsBrake()))?true:false

        property bool _value:false
        background:Rectangle{
            color:"transparent"
        }
        onPressed: {
            if(!_value){
                _value = true
                dircontrolLongPressTimer.restart()
            }
        }
        onReleased: {
            dircontrolLongPressTimer.stop()
            _value = false
        }
    }

    Timer{
        id: dircontrolLongPressTimer
        interval: 1000
        running:false
        repeat:false
        onTriggered:{
            if(dirControlQuitBut._value == true)
            {
                dirControlQuitBut._value = false
                brakeControlBut.checked = false
                dircontrolslider._value = 2
                if(cameraModel_1.isOpened == true)cameraModel_1.isClosed = true
                if(cameraWindow.isOpened = true)cameraWindow.isClosed = true
                brakeControl.setBrakeData(winDesktop.brakeControlX,winDesktop.brakeControlY,winDesktop.brakeControlRoundRectWidth,winDesktop.brakeControlRoundRectHeight,winDesktop.brakeControlRoundRectXRadius,winDesktop.brakeControlRoundRectYRadius,true)
            }
        }
    }