【GraphVisual】画节点与线以及移动节点线随着移动

简介: 【GraphVisual】画节点与线以及移动节点线随着移动

画节点和线似乎是这个程序最基础的部分,看一下效果图:

节点目前是从左边拖出来的图片,然后组成一个QGraphicsPixmapItem,线是按下键盘i键后,光标切换为十字,在两个节点处连线。关于画节点我之前一篇文章有过介绍:Qt实现图片可拖拉 实际实现过程中使用的是另一种方式:

这张图一目了然,节点实际上是在images目录下读取的图片文件,构成QListWidgetItem,在构成的过程中存入该图片的路径,当移动该item时,将路径存入QMimeData,scene拿到该路径构建CustomPixmapItem,最终加入到scene中。

而关于画线,不仅要在两个节点之间画线,更重要的是,节点在移动时,线也要跟着移动。视觉上呈现这跟线就是和节点绑定的,节点到那线到那的效果。

(这个问题之前一直很困扰我,因为我虽然可以在两个节点之间画线,但线的更新操作逻辑很复杂,而且程序经常崩溃,我当时是在scene中拿到要移动的节点周围的所有线,更新线的两个端点。在更新之前记下移动的节点的点point,这样就能知道这跟线的哪个点位置变化了。这个逻辑不仅看起来麻烦,实现起来也很复杂。看看我现在是怎么做的?)

直观的角度,每个节点记录下与自身相连的线,每条线记录下相连的两个节点。如果节点移动,节点通知与自身相连的线更新位置,线收到更新指令后,将自身位置更新为记录的两个端点的位置。 清晰明了。再深入,节点可以将与自身相连的线,分为两部分,即出向的线、入向的线。

看一下实现代码:

pixmapitem中确实有两个vector分别保存入向和出向的线

lineitem中确实保存了两个节点

pixmapitem位置发生变化时,遍历两个线vector,更新线。

线更新时,直接取pixmapitem的位置信息,重新setLine

更新操作完成。

再来看一下画线的过程:

可以看到,m_pGraphcsLineItem只是为了用来展现画线的过程,实际画的线是CustomLineItem,并且在构造线时传入两个端点。两个端点保存与自身相连的线,对pStartItem来说,这根线就是item出向的线,对pEndItem来说,这根线就是item入向的线。

这便是画线以及更新线的过程,逻辑清晰明了。而且节点分两部分保存入向和出向的线时,可以很方便的知道以该节点作为起点的线有哪些!

相关文章
|
程序员 API 数据安全/隐私保护
Flink--8、时间语义、水位线(事件和窗口、水位线和窗口的工作原理、生产水位线、水位线的传递、迟到数据的处理)
Flink--8、时间语义、水位线(事件和窗口、水位线和窗口的工作原理、生产水位线、水位线的传递、迟到数据的处理)
|
9月前
|
C++
详细解读AnyCAD应用——修改指定点,线,面的坐标实现物体移动
详细解读AnyCAD应用——修改指定点,线,面的坐标实现物体移动
82 5
|
JavaScript 前端开发 Go
JS时间线
JS时间线
119 0
|
C语言
labview节点公式节点反馈节点表达节点属性节点
labview节点公式节点反馈节点表达节点属性节点
375 0
把K线的时间增加15分钟
把K线的时间增加15分钟
157 0
|
缓存 算法 前端开发
关联线探究,如何连接流程图的两个节点
如果你用过流程图绘制工具,那么可能会好奇节点之间的连接线是如何计算出来的,跟随本文一起来探究一下吧。
434 0
|
存储 前端开发 算法
3千字长文canvas实现任意正多边形的移动(点、线、面)
前言 我在上一篇文章简单实现了在canvas中移动矩形(点线面),不清楚的小伙伴请看我这篇文章:用canvas 实现矩形的移动(点、线、面)(1)。ok,废话不多说,直接进入文章主题, 上一篇文章我留了很多问题,就是我在画步中移动我怎么知道我移动的是哪一个类型,到底是点还是线还是面, 这就是本篇文章要解决的问题。读完本篇可以学到下面几点:
3千字长文canvas实现任意正多边形的移动(点、线、面)
|
数据采集 编解码 数据处理
案例分享:Qt高频fpga采集数据压力位移速度加速度分析系统(通道配置、电压转换、采样频率、通道补偿、定时采集、距离采集,导出excel、自动XY轴、隐藏XY轴、隐藏显示通道,文件回放等等)
案例分享:Qt高频fpga采集数据压力位移速度加速度分析系统(通道配置、电压转换、采样频率、通道补偿、定时采集、距离采集,导出excel、自动XY轴、隐藏XY轴、隐藏显示通道,文件回放等等)
|
监控 Dubbo 数据可视化
大厂是如何上下线服务的
大厂是如何上下线服务的