32. QML仿制思维导图系列03 -- 添加连线功能

1. 说明

本系列文章最终目的是利用QML设计一个类似思维导图的小软件,可以基本实现节点之间的连线问题
第一版最终效果:

思维导图第一版最终效果


本篇文章在上篇文章的基础上继续开发,增加 连接线绘制 功能。上篇文章为: QML仿制思维导图系列02 – 绘制初始三角形

2. 基本步骤

大致思路就是在右侧三角形上面设置一个鼠标控制区域,当拖动这个区域时,让画布重新绘制,此时重新绘制的内容要包括根部的小三角形,连接线(三次曲线)和线顶端的小箭头。

2.1 步骤一:添加鼠标控制区域

NodeItem.qml文件的总根节点 canvasRoot 下添加一个新的控件,此控件使用一个 Rectangle 控件作为容器,把 MouseArea 填充整个容器,矩形容器定位在节点的右侧,与初始小三角形的位置接近,相关代码如下:

//图元右侧自身小箭头的鼠标控制

猜你喜欢

转载自blog.csdn.net/FY_13781298928/article/details/130637467
今日推荐