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

1. 说明

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

思维导图第一版最终效果

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

2. 基本步骤

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

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

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