QtQuick中用ShapePath创建带动态圆角曲线的技术求助

需求说明 #

需要实现由起始直线+带动态控制点的平滑曲线+末端直线组成的路径，曲线的控制点能随两端节点（startPort/endPort）的移动自动调整，达成动态变形的效果。

当前实现状态 #

已通过硬编码值实现三段直线的基础路径框架，但中间线段需替换为带动态控制点的曲线以实现目标变形效果。

现有代码 #

import QtQuick
import QtQuick.Shapes

Shape
{
    id: root
    anchors.fill: parent
    containsMode: Shape.BoundingRectContains

    // Dynamic port positions
    property point startPort: Qt.point(0, 0)
    property point endPort: Qt.point(0, 0)
    property int offset: 20

    ShapePath
    {
        strokeWidth: 4
        strokeColor: "#ff9900"
        fillColor: "transparent"

        startX: startPort.x
        startY: startPort.y

        PathLine
        {
            id: firstL
            relativeX: root.offset; relativeY: 0
        }

        PathLine
        {
            x: endPort.x - root.offset; y: endPort.y
        }

        PathLine
        {
            relativeX: root.offset; relativeY: 0
        }
    }

}

最初尝试代码 #

import QtQuick
import QtQuick.Shapes

Shape
{
    Rectangle
    {
        id: portA; width: 14; height: 14; radius: 7; color: "#29b6f6"
        x: 500; y: 200
    }
    Rectangle
    {
        id: portB; width: 14; height: 14; radius: 7; color: "#29b6f6"
        x: 220; y: 300
    }
    ShapePath {
        strokeWidth: 3
        strokeColor: "darkgray"
        fillColor: "transparent"
        
        startX: portA.x + portA.width/2
        startY: portA.y + portA.height/2
        
        PathCurve { x: portA.x + portA.width/2 + 50; y: portA.y + portA.height/2}
        PathCurve { x:  portA.x + portA.width/2; y:  portA.y + portA.height/2 + 50 }
        
        PathCurve { x: portB.x + portB.width/2; y: portB.y + portB.width/2 - 50}
        
        PathCurve { x: portB.x + portA.width/2 - 50; y: portB.y + portA.height/2}
        PathCurve { x: portB.x + portB.width/2; y: portB.y + portB.width/2 }
    }
}

实现方向指引 #

1. 替换路径类型：用PathCubic（三次贝塞尔曲线，支持两个控制点）或PathQuad（二次贝塞尔曲线，单个控制点）替代中间的PathLine，这两个组件能生成平滑曲线，且支持动态控制点。
2. 动态计算控制点：
   • 基于startPort和endPort的相对位置自动生成控制点，示例逻辑：

     // 基于偏移量和两点中点位置生成对称控制点
     property point controlPoint1: Qt.point(startPort.x + root.offset, startPort.y + (endPort.y - startPort.y)/2)
     property point controlPoint2: Qt.point(endPort.x - root.offset, startPort.y + (endPort.y - startPort.y)/2)
     

   • 可根据两点的水平/垂直距离比例调整控制点偏移方向，比如当垂直距离远大于水平距离时，改为在X轴方向偏移控制点，让曲线形态更自然。
3. 属性绑定实时更新：将PathCubic的controlX1/controlY1/controlX2/controlY2绑定到上述动态计算的控制点属性，确保startPort或endPort移动时，曲线自动更新。
4. 示例替换代码片段：把现有中间的PathLine替换为：

   PathCubic {
       controlX1: controlPoint1.x
       controlY1: controlPoint1.y
       controlX2: controlPoint2.x
       controlY2: controlPoint2.y
       x: endPort.x - root.offset
       y: endPort.y
   }
   

5. 可选：手动控制点：添加可拖拽的可视化元素（如小圆形），将其位置绑定到曲线的控制点，允许用户手动调整曲线形态。

内容的提问来源于stack exchange，提问作者Tac