QT实现QGraphicsView绘图 重写QGraphicsSvgItem类实现边框动画

目录导读

    • 简述
      • 使用 QTimer 实现 QGraphicsSvgItem 边框动画效果

简述

在了解学习WPS的流程图的时候，发现它这个选择图元有个动态边框效果，而且连接线还会根据线生成点从头移动到尾的动画。像这种：
请添加图片描述
在QML中实现这种动画属性很简单，现成的动画属性，但是在QGraphicsView中实现这种效果就值得思考一下，
在QT中SVG的动画属性只支持animateTransform元素,其他动画元素是不支持。即使我把QT版本升级成 6.7.0版本 也不支持，
例如 animate 动画元素：
请添加图片描述
SVG文件：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink/" baseProfile="tiny" version="1.2">
  <title>Spheres</title>
  <path id="dashedSquare" d="M10,10 L190,10 L190,190 L10,190 Z M10,10" stroke="black" stroke-width="2" fill="none" stroke-dasharray="10,5" stroke-dashoffset="0" stroke-linecap="round">
    <animate  id="dashAnimate" attributeName="stroke-dashoffset" from="200" to="0" dur="2s" begin="0s"  repeatCount="indefinite" />
    <animate  id="resetAnimate" attributeName="stroke-dashoffset" from="0" to="200" dur="2s"  begin="dashAnimate.end" fill="freeze" />
</path>
</svg>

这个SVG是实现了边框的动态效果；
但是在QGraphicsView中QGraphicsSvgItem中是不会有动画效果的，包括QSvgWidget等其他Svg相关的控件也没有，只能尝试其他办法。。

  • 使用 QTimer 实现 QGraphicsSvgItem 边框动画效果

使用QT的 QTimer 类 实现 QGraphicsSvgItem 边框动画，
通过研究上面的SVG可以发现，边框的动画效果实际是stroke-dashoffset 属性的变动，也可以通过
QPen 类的 setDashOffset(qreal offset) 变动，
所以在
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;
绘制图元时,只要使用 QTimer 周期性将画笔的DashOffset值来回的修改就可以了,

值得注意的是

  1. 通过研究 QGraphicsSvgItem类源码中的 paint 事件发现 QGraphicsItem自带的选中显示边框效果中的边框是外扩了一定像素，
    参考源码：
//! 这是 QGraphicsItem 自带选中边框效果的绘制边框
//! 源码参考路径：  D:\Qt\Qt5.13.1\5.13.1\Src\qtsvg\src\svg\qgraphicssvgitem.cpp
//! \internal
//! Highlights \a item as selected.
//! NOTE: This function is a duplicate of qt_graphicsItem_highlightSelected() in qgraphicsitem.cpp!

static void qt_graphicsItem_highlightSelected(
    QGraphicsItem *item, QPainter *painter, const QStyleOptionGraphicsItem *option)
{
    const QRectF murect = painter->transform().mapRect(QRectF(0, 0, 1, 1));
    if (qFuzzyIsNull(qMax(murect.width(), murect.height())))
        return;

    const QRectF mbrect = painter->transform().mapRect(item->boundingRect());
    if (qMin(mbrect.width(), mbrect.height()) < qreal(1.0))
        return;

    qreal itemPenWidth;
    switch (item->type()) {
        case QGraphicsEllipseItem::Type:
            itemPenWidth = static_cast<QGraphicsEllipseItem *>(item)->pen().widthF();
            break;
        case QGraphicsPathItem::Type:
            itemPenWidth = static_cast<QGraphicsPathItem *>(item)->pen().widthF();
            break;
        case QGraphicsPolygonItem::Type:
            itemPenWidth = static_cast<QGraphicsPolygonItem *>(item)->pen().widthF();
            break;
        case QGraphicsRectItem::Type:
            itemPenWidth = static_cast<QGraphicsRectItem *>(item)->pen().widthF();
            break;
        case QGraphicsSimpleTextItem::Type:
            itemPenWidth = static_cast<QGraphicsSimpleTextItem *>(item)->pen().widthF();
            break;
        case QGraphicsLineItem::Type:
            itemPenWidth = static_cast<QGraphicsLineItem *>(item)->pen().widthF();
            break;
        default:
            itemPenWidth = 1.0;
    }
    const qreal pad = itemPenWidth / 2;

    const qreal penWidth = 0; // cosmetic pen

    const QColor fgcolor = option->palette.windowText().color();
    const QColor bgcolor( // ensure good contrast against fgcolor
        fgcolor.red()   > 127 ? 0 : 255,
        fgcolor.green() > 127 ? 0 : 255,
        fgcolor.blue()  > 127 ? 0 : 255);

    painter->setPen(QPen(bgcolor, penWidth, Qt::SolidLine));
    painter->setBrush(Qt::NoBrush);
    painter->drawRect(item->boundingRect().adjusted(pad, pad, -pad, -pad));

    painter->setPen(QPen(option->palette.windowText(), 0, Qt::DashLine));
    painter->setBrush(Qt::NoBrush);
    painter->drawRect(item->boundingRect().adjusted(pad, pad, -pad, -pad));
}

所以在重写
void QGraphicsSvgItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;
事件的时候，不能继承原有paint；
只需要以下内容：

void TGraphicsSvgItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
   if (!renderer()->isValid())
         return;
     if (elementId().isEmpty())
         renderer()->render(painter, boundingRect());
     else
         renderer()->render(painter, elementId(), boundingRect());
         
	 if(isSelected())
	  {
	       QPen pen2(QColor("#067BEF"), 2);
	       pen2.setDashPattern(QVector<qreal>{2,2}); // 设置虚线模式
	       pen2.setDashOffset(dashoffset);
	       painter->setPen(pen2);
	       painter->drawRect(shape().boundingRect()); // 绘制正方形
	   }
}

2.不使用QPropertyAnimation类而是用QTimer 类实现DashOffset值周期性变化，
QPropertyAnimation类 变化的差值是线性的，看不出边框虚线效果。
需要设置按指定步长(10)的大小递增递减才能看出完整效果。

timer = new QTimer();
    QObject::connect(timer, &QTimer::timeout,[&](){
        dashoffset-=10;
        if(dashoffset<=0)
        {
            dashoffset=100;
        }
        this->update();
    });

实际效果:
请添加图片描述
完整代码：

TGraphicsSvgItem.h

#ifndef TGRAPHICSSVGITEM_H
#define TGRAPHICSSVGITEM_H

#include <QGraphicsItem>
#include <QGraphicsSvgItem>
#include <QTimer>
#include <QPainter>
#include <QSvgRenderer>

#include <QPropertyAnimation>
#include <QParallelAnimationGroup>
#include <QSequentialAnimationGroup>
#include "ParseSvg/lib_csvgelementpath.h"
#include "tgraphicspointitem.h"


//! D:\Qt\Qt5.13.1\5.13.1\Src\qtsvg\src\svg\qgraphicssvgitem.cpp
//!
class TGraphicsSvgItem:public QGraphicsSvgItem
{
    Q_OBJECT
public:
    TGraphicsSvgItem(QGraphicsItem *parentItem = nullptr);
    TGraphicsSvgItem(const QString &fileName, QGraphicsItem *parentItem = nullptr);

public slots:

    //! 初始化计时器
    void Init_timer();
protected:
//    QRectF boundingRect() const override;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) override;

    QVariant itemChange(GraphicsItemChange change, const QVariant &value) override;
private:

    qreal dashoffset=100;
   
    //! 虚边框线
    QTimer* timer;
};

#endif // TGRAPHICSSVGITEM_H

TGraphicsSvgItem.cpp

#include "tgraphicssvgitem.h"
#include <QDebug>
#include <QPropertyAnimation>
#include <QTimeLine>

TGraphicsSvgItem::TGraphicsSvgItem(QGraphicsItem *parentItem)
    :QGraphicsSvgItem(parentItem)
{
    this->setAcceptHoverEvents(true);
    Init_timer();
}

TGraphicsSvgItem::TGraphicsSvgItem(const QString &fileName, QGraphicsItem *parentItem)
    :QGraphicsSvgItem(fileName,parentItem)
{
    this->setAcceptHoverEvents(true);
    Init_timer();


}

void TGraphicsSvgItem::Init_timer()
{

    this->setFlag(TGraphicsSvgItem::ItemIsMovable, true);
    this->setFlag(TGraphicsSvgItem::ItemIsSelectable, true);
    this->setFlag(TGraphicsSvgItem::ItemClipsToShape,true);
    timer = new QTimer();
    QObject::connect(timer, &QTimer::timeout,[&](){
        dashoffset-=10;
        if(dashoffset<=0)
        {
            dashoffset=100;
        }
        this->update();
    });
}

//QRectF TGraphicsSvgItem::boundingRect() const {
//    return shape().boundingRect();
//    return this->renderer()->boundsOnElement("shadow");
//}

void TGraphicsSvgItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
        if (!renderer()->isValid())
            return;

        if (elementId().isEmpty())
            renderer()->render(painter, boundingRect());
        else
            renderer()->render(painter, elementId(), boundingRect());


        if(isSelected())
        {
            QPen pen2(QColor("#067BEF"), 2);
            pen2.setDashPattern(QVector<qreal>{2,2}); // 设置虚线模式
            pen2.setDashOffset(dashoffset);
            painter->setPen(pen2);
            painter->drawRect(shape().boundingRect()); // 绘制正方形
        }

}

QVariant TGraphicsSvgItem::itemChange(GraphicsItemChange change, const QVariant &value)
{
    if(change==QGraphicsSvgItem::ItemSelectedChange)
    {
        if(value.toUInt()==1)
        {
            dashoffset=100;
            if(timer!=nullptr && timer!=NULL)
                timer->start(100);
        }
        else
        {
            dashoffset=100;
            if(timer!=nullptr && timer!=NULL)
                timer->stop();
        }
    }
    return QGraphicsSvgItem::itemChange(change,value);
}

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

晨持绪科技：开好一家抖音小店运营怎么做

晨持绪科技：开好一家抖音小店运营怎么做

在数字时代&#xff0c;抖音小店以其独特的社交媒体优势迅速崛起&#xff0c;成为许多创业者的新宠。但如何有效运营&#xff0c;却是一门学问。首要任务是确定你的小店定位&#xff0c;这关系到后续的产品选择、目标客户群及营销策略。定位明确后&#xff0c;接下来便是挑选适…
阅读更多...
Spring框架学习笔记（本地印象笔记搬运）（整理中）

Spring框架学习笔记（本地印象笔记搬运）（整理中）

1、背景 Spring作为Java Web开发使用最频繁的框架&#xff0c;具有非常高的学习价值&#xff0c;在Spring框架源码中包含了很多设计模式&#xff08;单例、原型、代理、观察者等&#xff09;&#xff0c;读懂这些源码有助于拓宽开发思路&#xff0c;同时也能提高后端排查错误的…
阅读更多...
win10免安装配置MySQL8.4.0

win10免安装配置MySQL8.4.0

注&#xff1a;此教程基于win10 22H2 版本 1、下载最新版本MySQL压缩包 下载链接&#xff1a;MySQL官网下载地址 点击第二行的 ZIP Archive 后面的Download&#xff08;当前时间2024-06-19最新版本是8.4.0&#xff09; 2、解压并添加配置文件 下载完毕后&#xff0c;解压缩…
阅读更多...
Java程序之可爱的小兔兔

Java程序之可爱的小兔兔

题目&#xff1a; 古典问题&#xff0c;有一对兔子&#xff0c;从出生后第3个月起每个月都生一对兔子&#xff0c;小兔子长到第三个月后每个月又生一对兔子&#xff0c;假如兔子都不死&#xff0c;问每个月的兔子总数为多少? 程序分析&#xff1a; 兔子的规律为数列1,1,2,3,…
阅读更多...
【数据结构与算法】Dijkstra算法、Floyd算法

【数据结构与算法】Dijkstra算法、Floyd算法

文章目录 最短路径Dijkstra算法实现 Floyd算法实现 最短路径 前文提到&#xff0c;对于不带权图来说&#xff0c;BFS可以解决最短路径问题&#xff0c;因为它是类似于树的层次遍历那样&#xff0c;同一个结点的后继的访问顺序相邻&#xff0c;这使得BFS首次访问结点时的路径必…
阅读更多...
CCRC-DSO数据安全官和CCRC-DSA数据安全评估师的差异

CCRC-DSO数据安全官和CCRC-DSA数据安全评估师的差异

在当前时代背景下&#xff0c;随着中国数据安全政策的加速推进和相关法律法规的密集发布&#xff0c;对数据资产进行全生命周期的安全管控变得日益迫切。 这不仅成为企业可持续发展的必要条件&#xff0c;也引发了广泛的关注于数据安全相关的专业培训及认证领域。 在此环境下&a…
阅读更多...
PS系统教程26

PS系统教程26

PS与BR的关系 如何把图片以图层的方式导入画板里面 选中三张图片/多张选择工具-PS-将文件载入PS图层意味着这三张图片以图层的方式嵌入PS中 拼接长图 裁剪图片 保存裁剪后的图片拼接图片选中要拼接的图片选择工具-PS-Photomerge(拼合图像&#xff09; 图像处理器 大白话&…
阅读更多...
对撞指针技巧

对撞指针技巧

对撞指针技巧 我们以LeetCode的一道题目来讲解一下对撞指针&#xff1b; LeetCode第27题移除元素&#xff0c;链接如下&#xff1a; https://leetcode.cn/problems/remove-element 如果使用快慢指针 如果使用快慢指针&#xff0c;将会有大量的后面元素赋值给前面元素的操作…
阅读更多...
Open3D 点云随机下采样至指定数目

Open3D 点云随机下采样至指定数目

目录 一、背景 二、代码实现 2.1 关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2下采样后点云 3.3数据对比 一、背景 在Open3D中&#xff0c;如果你想将点云随机采样到固定的点数&#xff0c;可以使用random_down_sample 函数并计算相应的采样比例。以下是如何实现…
阅读更多...
MySQL数据库（五）：事务

MySQL数据库（五）：事务

MySQL数据库中的事务是一种用来保证一系列操作要么全部成功&#xff0c;要么全部取消的机制。想象一下你去超市购物&#xff0c;拿了很多商品&#xff0c;如果中途发现没带钱包&#xff0c;你可以放弃这次购买&#xff0c;所有商品会回到原位。通过事务&#xff0c;可以确保数据…
阅读更多...
感恩父爱 健康同行 宁夏康源父亲节特惠普查

感恩父爱 健康同行 宁夏康源父亲节特惠普查

父亲&#xff0c;是那道坚实的屏障&#xff0c;为孩子们挡风遮雨。父亲&#xff0c;是那颗明亮的灯塔&#xff0c;为孩子们指明前进的方向。然而岁月无情&#xff0c;随着年龄的增长&#xff0c;曾经为我们遮风挡雨的父亲如今也逐渐进入了各种疾病的高发期。感恩父爱&#xff0…
阅读更多...
linux下进度条的实现

linux下进度条的实现

一、代码一版 使用模块化编程 1.processbar.h #include<stdio.h> #define capacity 101 //常量使用宏定义 #define style //符号方便后续修改 extern void processbar();修饰变量的时候一定要带extern&#xff0c;修饰函数的时候可以省略&#xff0c;因为没有函数体就…
阅读更多...
FLASH仿真EEPROM---基于智芯Z20K11XM

FLASH仿真EEPROM---基于智芯Z20K11XM

一、介绍 电可擦和可编程只读存储器(EEPROM)可以对字节或字编程和擦除。EEPROM中的数据即使断电也能保持&#xff0c;但Z20K1xx芯片不含EEPROM。然而&#xff0c;闪存可以通过EEPROM仿真软件来模拟EEPROM。Z20K1xx包含两个flash阵列。编程和擦除操作可以在一个数组上进行&#…
阅读更多...
华为200人园区网有线和无线

华为200人园区网有线和无线

实验描述&#xff1a; 1 内网有有线业务、内部无线、外部无线三种业误。 2 内网服务器配置静态IP&#xff0c;网关192.168.108.1。 3 sW1和R1之间使用v1an200 192.168.200.9/30 互联。 4 R2向运营商申请企业宽带并获得了1个固定公网IP&#xff1a; 200.1.1.1 子网掩码 255.255.…
阅读更多...
双目相机测距原理

双目相机测距原理

一、普通双目相机测距原理 普通双目相机具有如下特点&#xff1a;左右两个相机位于同一平面&#xff08;光轴平行&#xff09;&#xff0c;且相机参数&#xff08;焦距f&#xff09;一致。其原理图如下&#xff1a; 如图所示&#xff0c;P点为相应的物体位置&#xff0c;CL和C…
阅读更多...
Java面试八股之JVM参数-XX:+UseCompressedOops的作用

Java面试八股之JVM参数-XX:+UseCompressedOops的作用

JVM参数-XX:UseCompressedOops的作用 JVM参数-XX:UseCompressedOops的作用是启用对象指针压缩&#xff08;Ordinary Object Pointers compression&#xff09;。这一特性主要应用于64位的Java虚拟机中&#xff0c;目的是为了减少内存使用。在传统的64位系统中&#xff0c;对象…
阅读更多...
分配自定义内存对齐的内存块的aligned_malloc实现分析

分配自定义内存对齐的内存块的aligned_malloc实现分析

malloc一般使用当前平台默认的最大内存对齐数对齐内存&#xff0c;如MSVC在32bit下一般是8bit对齐&#xff1b;64位下则是16bit。这样对常规的数据来说没有问题。但如果我们自定义的内存对齐超出了这个范围&#xff0c;则不能直接使用malloc。当我们要分配一块具有特定内存对齐…
阅读更多...
【乐吾乐2D可视化组态编辑器】图表动态显示

【乐吾乐2D可视化组态编辑器】图表动态显示

1. 添加数据 乐吾乐2D可视化组态编辑器地址&#xff1a;https://2d.le5le.com/ 图表动态展示是指一个图表图元的数据属性&#xff08;一般是dataY&#xff09;绑定多个变量&#xff0c;建立通信后数据动态变化展示。 官网默认Echarts图表拖拽到画布中是已经添加了图元的da…
阅读更多...
OpenAI CTO米拉·穆拉提谈未来：AI一年半后达到博士水平

OpenAI CTO米拉·穆拉提谈未来：AI一年半后达到博士水平

人工智能&#xff08;AI&#xff09;领域近年来的发展迅猛&#xff0c;特别是在大语言模型&#xff08;LLM&#xff09;的进步上。最近&#xff0c;OpenAI的首席技术官&#xff08;CTO&#xff09;米拉穆拉提&#xff08;Mira Murati&#xff09;在达特茅斯学院的一次采访中&am…
阅读更多...
【Linux】Linux基础开发工具(yum)

【Linux】Linux基础开发工具(yum)

Linux 软件包管理器 yum 什么是软件包 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序.但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安 装程序)放在一个服务器上, 通过包管理器可以很方便…
阅读更多...
最新文章

Copyright @ 2022~2023