1. 说明
本系列文章最终目的是利用QML设计一个类似思维导图的小软件,可以基本实现节点之间的连线问题
第一版最终效果:
思维导图第一版最终效果
本篇文章在上篇文章的基础上继续开发,增加 连接线绘制 功能。上篇文章为: QML仿制思维导图系列02 – 绘制初始三角形
2. 基本步骤
大致思路就是在右侧三角形上面设置一个鼠标控制区域,当拖动这个区域时,让画布重新绘制,此时重新绘制的内容要包括根部的小三角形,连接线(三次曲线)和线顶端的小箭头。
2.1 步骤一:添加鼠标控制区域
在NodeItem.qml文件的总根节点 canvasRoot 下添加一个新的控件,此控件使用一个 Rectangle 控件作为容器,把 MouseArea 填充整个容器,矩形容器定位在节点的右侧,与初始小三角形的位置接近,相关代码如下:
//图元右侧自身小箭头的鼠标控制