Qt实现双控制柄的Slider

news2024/11/25 2:03:46

  • 目标

  1. 实现带有左右两个控制柄的滑动条；
  2. 控件可设定最小值和最大值；
  3. 控件可设定控制柄的最小距离；

  • 效果演示

  • 思路

        1. 标准的Slider控件只有一个Handle，所以想要通过改造QSlider来实现两个Handle是非常困难的，“自绘”是一个更好的实现方案；

        2. 新建DoubleHandleSlider子类继承于QSlider，重写paintEvent函数，在该函数里面使用QPainter绘制出希望的控件样式；

        3. 根据需求，Slider的滑槽有两种样式，分别是①和②，可以先绘制一层①，然后再绘制一层②则可以实现；

        4. handle和tips的实现方法有两种，一种是通过在painterEvent中绘制，另一种是创建四个QLabel分别用作left handle，right handle，left tips 和 right tips，然后实时更新它们的位置；我选择使用QLabel的方式，因为这样可以更好的使用鼠标事件。

        5. handle的移动方式会有两种，一是点击滑槽，二是拖拽handle；

           a.第一种通过捕获滑槽的mouse pressed事件得到mouse的x值作为handle的x坐标值，刷新显示；

           b. 通过捕获mouse moving事件实时得到mouse的x值作为handle的x值，实时刷新显示；

        6. 因为有两个handle，所以需要设定了以下规则：

            a. 在left handle 左侧点击滑槽，设置left handle；

            b. 在right handle 右侧点击滑槽，设置right handle；

            c. 在left handle 和 right handle 中间点击滑槽，点击的位置更靠近哪个handle则设置哪个handle；

        7. handle值的设置需要满足以下规则：

           a. left handle 大于等于最小值；

           b. right handle 小于等于最大值；

           c. left handle 和right handle的距离值大于等于设定的距离值；

  • 主要细节

        1.滑槽的绘制

void DoubleHandleSlider::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    m_sliderWidth = width()- m_rightHandle->width();

    //创建painter；
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    //创建pen，pen的作用时描边，因为这里的样式是没有边的，所以需要把pen的类型设为NoPen；
    QPen pen;
    pen.setStyle(Qt::PenStyle::NoPen);
    painter.setPen(pen);

    //创建画刷，滑槽是通过画刷绘制的，所以这里要设定好滑槽的颜色；
    QBrush brush(QColor(0x7D, 0x7D, 0x7D));
    painter.setBrush(brush);

    //创建painter 想要绘制的路径，之所以要用这个方法，是因为我们需要画出两端是圆弧形的滑槽；最后两个参数控制了两端圆弧的实现；
    QPainterPath painterPath;
    painterPath.addRoundedRect(0, 28, m_sliderWidth, 3, 3, 3);
    //绘制手柄的两边灰色滑动条；
    painter.drawPath(painterPath);

    //画刷更换颜色，继续画另一个滑槽；
    brush.setColor(QColor(0xFF, 0x55, 0x57));
    painter.setBrush(brush);

    //计算left handle和right handle的位置，同时也是另一个滑槽的两端位置；
    float leftX = m_sliderWidth* (float)(m_leftVal-m_minVal)/m_duration;
    float rightX = m_sliderWidth* (float)(m_rightVal-m_minVal)/m_duration;

    QPainterPath painterPath2;
    painterPath2.addRoundedRect(leftX, 28, rightX- leftX, 3, 3, 3);
    //绘制两手柄中间亮色滑动条；
    painter.drawPath(painterPath2);

    //刷新handle和tips的位置；
    refreshPosition(leftX, rightX);
}

        2.handle的移动

bool DoubleHandleSlider::eventFilter(QObject *watched, QEvent *event)
{
    if(watched == m_leftHadle)
    {
        if(event->type() == QEvent::Enter)
        {
            setCursor(QCursor(Qt::OpenHandCursor));
            m_mouseEnterType = InLeftHandle;
        }
        else if(event->type() == QEvent::Leave)
        {
            setCursor(QCursor(Qt::OpenHandCursor));
            m_mouseEnterType = NotInHandle;
        }
    }
    else if(watched == m_rightHandle)
    {
        if(event->type() == QEvent::Enter)
        {
            setCursor(QCursor(Qt::OpenHandCursor));
            m_mouseEnterType = InRightHandle;
        }
        else if(event->type() == QEvent::Leave)
        {
            setCursor(QCursor(Qt::OpenHandCursor));
            m_mouseEnterType = NotInHandle;
        }
    }
    else
    {
        return QWidget::eventFilter(watched, event);
    }

    return false;
}

         a. 在eventFilter判断鼠标所在位置的类型，分别有NotInHandle，InLefthandle和InRightHandle三种类型；

         b. 这里需要注意的是，在创建handle时，需要调用installEventFilter()才能捕获相应控件的事件；

void DoubleHandleSlider::mousePressEvent(QMouseEvent *event)
{
    //判断鼠标是否在滑动条范围内；
    if(event->pos().y()< m_leftHadle->y() || event->pos().y()> m_leftHadle->y()+ m_leftHadle->height())
        return;

    if(m_mouseEnterType == NotInHandle)
    {
        int handleDuration = m_rightHandle->x()- m_leftHadle->x();

        //鼠标在左手柄的左边；
        if(event->pos().x()< m_leftHadle->x())
            refreshLeftVal(event->pos().x());
        //鼠标在右手柄的右边；
        else if(event->pos().x()> m_rightHandle->x())
            refreshRightVal(event->pos().x());
        //鼠标在两个手柄的中间，但靠近左手柄；
        else if(event->pos().x()< m_leftHadle->pos().x()+ handleDuration/2)
            refreshLeftVal(event->pos().x());
        //鼠标在两个手柄的中间，但更靠近有手柄；
        else if(event->pos().x()>= m_leftHadle->pos().x()+ handleDuration/2)
            refreshRightVal(event->pos().x());

        update();
    }
}

          c.再在mousePressedEvent中根据类型处理，当类型是NotInHandle时，根据前面思路5.a和6的规则设置handle；

void DoubleHandleSlider::mouseMoveEvent(QMouseEvent *event)
{
    if(m_mouseEnterType == InLeftHandle)
    {
        refreshLeftVal(event->pos().x());
        update();
    }
    else if(m_mouseEnterType == InRightHandle)
    {
        refreshRightVal(event->pos().x());
        update();
    }
}

void DoubleHandleSlider::refreshLeftVal(float x)
{
    //重新计算左值；
    m_leftVal = m_duration* x/m_sliderWidth+ m_minVal;
//    qDebug()<< m_leftVal;
    if(m_leftVal< m_minVal)
        m_leftVal = m_minVal;
    else if(m_leftVal>= m_rightVal- m_handleIntervalVal)
        m_leftVal = m_rightVal- m_handleIntervalVal;

    emit valueChanged(m_leftVal, m_rightVal);
}

void DoubleHandleSlider::refreshRightVal(float x)
{
    //重新计算右值；
    m_rightVal = m_duration* x/m_sliderWidth+ m_minVal;
//    qDebug()<< m_rightVal;
    if(m_rightVal> m_maxVal)
        m_rightVal = m_maxVal;
    else if(m_rightVal<= m_leftVal+ m_handleIntervalVal)
        m_rightVal = m_leftVal+ m_handleIntervalVal;

    emit valueChanged(m_leftVal, m_rightVal);
}

          d. 根据在eventFilter中得到的鼠标所在位置的类型，在mouseMovingEvent中用mouse的x值按思路5.b和6的规则更新handle值；

  • 其它

        1. tips 只需要跟随handle位置变化而变化即可；

        2. 在handle的移动实现中，只是更新handle的值，并没有直接更新handle的位置；handle的位置更新是在paintEvent()调用的，是根据handle的值换算出来位置值，这样就跟滑槽的绘制保持了同步性；

---------------------------【Demo完整代码】-----------------------------------

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/781115.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

SpringBoot+jasypt-spring-boot-starter实现配置文件明文加密

SpringBoot+jasypt-spring-boot-starter实现配置文件明文加密

1.使用环境 springboot:2.1.4.RELEASE JDK:8 jasypt-spring-boot-starter:3.0.2 2.引入依赖 !-- 配置文件加密 --> <dependency><groupId>com.github.ulisesbocchio</groupId><artifactId>jasypt-spring-boot-starter</artifactId><ver…
阅读更多...
rust学习-智能指针

rust学习-智能指针

适用场景 有一个在编译时未知大小的类型&#xff0c;想在需要确切大小的上下文使用该类型值 示例1 无意义的例子&#xff1a;将一个单独的值存放在堆上并不是很有意义&#xff0c;b更应该放到栈上 fn main() {let b Box::new(5);// box 在 main 的末尾离开作用域时&#x…
阅读更多...
R语言 PCA筛选变量

R语言 PCA筛选变量

#PCA-筛选变量 X <- data[,2:415] pca <- prcomp(X, center TRUE, scale. TRUE) # 进行主成分分析 summary(pca) # 查看各个主成分的解释方差比例 library(factoextra) #碎石图依赖-fviz fviz_eig(pca,addlabelsT) #碎石图 X_selected <- pca$x[,1:20] # 选择前n个主…
阅读更多...
pytorch实现图像投影变换

pytorch实现图像投影变换

import cv2 import torchdef cpu_remap(numpy_img,mapx,mapy):return cv2.remap(numpy_img,mapx,mapy,cv2.INTER_LINEAR)def gpu_remap(numpy_img,map_tensor):numpy_img:原始图像格式为ndarraymap_tensor:[N,H,W,C]用于grid_sample的map参数&#xff0c;需要规制到-1到1# 准备…
阅读更多...
opencv直方图

opencv直方图

#include "iostream" #include "opencv2/opencv.hpp" using namespace std; using namespace cv;int main() {Mat img, gray;img imread("r4.jpg");cvtColor(img, gray, COLOR_BGR2GRAY);int nimages 1;//图片数量const int channels[] { 0 …
阅读更多...
信捷PLC RC低通滤波器(C语言实现)

信捷PLC RC低通滤波器(C语言实现)

PLC信号处理系列之RC低通滤波器算法详细介绍请参考下面文章： PLC信号处理系列之一阶低通(RC)滤波器算法_plc滤波算法程序_RXXW_Dor的博客-CSDN博客1、先看看RC滤波的优缺点 优点：采用数字滤波算法来实现动态的RC滤波，则能很好的克服模拟滤波器的缺点； 1、在模拟常数要求较…
阅读更多...
位域与共用体在通讯领域的应用

位域与共用体在通讯领域的应用

最近看到些代码&#xff0c;定义变量还能指定位宽&#xff0c;很有意思。像这样 unsigned int bit1 : 1;冒号 (&#x1f603; 后面的数字1表示变量的位宽或大小。 像这样的大小声明在低级编程和位操作中常被使用&#xff0c;以便精确控制变量的大小。 通讯协议解析用的多。 下面…
阅读更多...
电脑安装双系统ubuntu18.04+windows后开机直接进入Windows解决方法

电脑安装双系统ubuntu18.04+windows后开机直接进入Windows解决方法

电脑型号&#xff1a;联想拯救者Y9000K2021H 系统&#xff1a;Windows11Ubuntu18.04双系统 问题&#xff1a;笔记本安装双系统后&#xff0c;Windows系统下处理word或者看论文&#xff1b;Ubuntu18.04系统安装ros进行机械臂控制等的研究。但最近开机后发现没有系统选项了&#…
阅读更多...
【mars3d】将mars3d中的示例拷贝到自己项目中

【mars3d】将mars3d中的示例拷贝到自己项目中

mars3d 的功能示例 - 感觉做了很多的处理&#xff1b; 1、头部的按钮作用 重置和运行 - 这就是字面意思&#xff0c;都能理解哈&#xff1b; js - 顾名思义&#xff0c;js代码&#xff0c;也是我们可以改动的部分&#xff1b; 旁边那个 - 是vue部分&#xff0c;是不能修改的…
阅读更多...
J2EE通用分页01

J2EE通用分页01

目录 一.总体思路 二.分页信息实体&#xff08;PageBean&#xff09; 三.后台分页数据查询 3.1 处理流程 流程图&#xff1a; 3.2 实现 Student实体&#xff0c;及对应的数据库表可自行准备 四.重构-提取公用方法 1.为了进行公共方法的抽取&#xff0c;需要找出上面实…
阅读更多...
Transformer 模型实用介绍：BERT

Transformer 模型实用介绍：BERT

动动发财的小手&#xff0c;点个赞吧&#xff01; 在 NLP 中&#xff0c;Transformer 模型架构是一场革命&#xff0c;极大地增强了理解和生成文本信息的能力。 在本教程[1]中&#xff0c;我们将深入研究 BERT&#xff08;一种著名的基于 Transformer 的模型&#xff09;&#…
阅读更多...
uniapp app运行到ios详细流程

uniapp app运行到ios详细流程

uniapp运行到IOS真机调试&#xff08;windows系统&#xff09; 工具步骤1.首先数据线连接电脑和手机2.右键点击桌面上的HBuilder&#xff0c;打开文件所在位置3.打开HBuilder编辑器里要运行的项目&#xff0c;点击运行>运行到手机或模拟器>运行到IOS APP基座>勾选你的…
阅读更多...
【Java虚拟机学习2】HotSpot虚拟机下对象的创建及在Java堆中对象的内存分配、布局和对象的访问

【Java虚拟机学习2】HotSpot虚拟机下对象的创建及在Java堆中对象的内存分配、布局和对象的访问

HotSpot虚拟机下对象的创建及在Java堆中对象的内存分配、布局和对象的访问 一、对象的创建 Step1&#xff1a;类加载检查 虚拟机遇到一条new指令时&#xff0c;首先将检查是否能在常量池中定位到这个类的符号引用&#xff0c;并且检查这个符号引用代表的类是否已被加载过、解…
阅读更多...
【深度学习Week2】卷积神经网络

【深度学习Week2】卷积神经网络

卷积神经网络 Convolutional Neural Networks&#xff0c;CNN 【第一部分&#xff1a;代码练习】1.MNIST 数据集分类2.CIFAR10 数据集分类3.使用 VGG16 对 CIFAR10 分类 【第二部分&#xff1a;问题总结】 【第一部分&#xff1a;代码练习】 1.MNIST 数据集分类 1.1 加载数据…
阅读更多...
STM32入门学习之USART串口通信：

STM32入门学习之USART串口通信：

1.串口通信简介&#xff1a;通用异步收发传输器UART(Universal Asynchronous Receiver/Transmitter)是负责处理数据总线和串口之间的串/并通信的设备。UART通信规定了数据帧的格式&#xff1a;起始位、数据位、校验位、停止位等。UART异步通信只需要通信双方设置好数据帧的格式…
阅读更多...
html2Canvas+JsPDF 导出pdf 无法显示网络图片

html2Canvas+JsPDF 导出pdf 无法显示网络图片

html2CanvasJsPDF 导出pdf 问题&#xff1a;类似于下面着这种网络图片使用img导出的时候是空白的 https://gimg3.baidu.com/search/srchttp%3A%2F%2Fpics4.baidu.com%2Ffeed%2F7e3e6709c93d70cf827fb2fda054500cb8a12bc9.jpeg%40f_auto%3Ftoken%3Dd97d3f0fd06e680e592584f8c7a2…
阅读更多...
Devart UniDAC Crack

Devart UniDAC Crack

Devart UniDAC Crack 通用数据访问组件(UniDAC)是一个强大的非可视化跨数据库数据访问组件库&#xff0c;适用于Delphi、Delphi for.NET、CBuilder和Lazarus(Free Pascal)。我们将长期成功开发的经验结合到一个产品中&#xff0c;提供对流行数据库服务器的统一访问&#xff0c;…
阅读更多...
Sublime Text 4 激活教程（Windows+Mac）

Sublime Text 4 激活教程（Windows+Mac）

下载安装 官网 https://www.sublimetext.com 点击跳转 2023.7.21 版本为4143 Windows激活方式 一、激活License方式 入口在菜单栏中"Help” -> “Enter License” 注意格式&#xff0c;可能会过期失效&#xff0c;失效就用方式二 Mifeng User Single User License E…
阅读更多...
SUSE宣布推出免费RHEL分叉以保留企业级Linux的选择权

SUSE宣布推出免费RHEL分叉以保留企业级Linux的选择权

导读在Red Hat宣布将限制AlmaLinuxOS或Rocky Linux等社区发行版对其公共仓库的访问后&#xff0c;最近Red Hat与IBM之间发生了一些争论&#xff0c;有鉴于此&#xff0c;SUSE今天宣布计划为RHEL和CentOS用户提供一个免费的替代方案。 SUSE已经开发了SUSE Linux Enterprise (SLE…
阅读更多...
【数据挖掘】PCA/LDA/ICA：A成分分析算法比较

【数据挖掘】PCA/LDA/ICA：A成分分析算法比较

一、说明 在深入研究和比较算法之前&#xff0c;让我们独立回顾一下它们。请注意&#xff0c;本文的目的不是深入解释每种算法&#xff0c;而是比较它们的目标和结果。 如果您想了解更多关于PCA和ZCA之间的区别&#xff0c;请查看我之前基于numpy的帖子&#xff1a; PCA 美白与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023