SwiftUI Canvas绘制线条上方文本标签出现位置重叠问题

问题现象 #

使用SwiftUI Canvas组件在线条上方绘制标签时，线条可正常渲染在预设位置，但标签无法对应显示在线条上方，1、2两个标签完全重叠，效果如下：

核心错误原因 #

标签位置计算逻辑完全错误：

• 原代码使用line.points.startIndex、line.points.endIndex作为标签坐标的x、y值，这两个值是数组的索引值，不是线条点的实际坐标
• 测试数据中两条线的points数组都包含2个元素，因此所有循环中取到的startIndex都是0、endIndex都是2，所有标签都被绘制到同一个坐标点，最终出现重叠

修复代码 #

修正中点坐标计算逻辑，取线条实际的几何中点作为标签绘制位置，修正后的Canvas代码如下：

Canvas {context, size in
    let font = Font.custom("Arial Rounded MT Bold", size: 16)
    
    for line in TLDataModel.lines {
        let resolved = context.resolve(Text(line.tickLabel).font(font))
        // 取出线条的首尾两个端点
        let lineStart = line.points[0]
        let lineEnd = line.points[1]
        // 计算线条实际中点：竖线x坐标与端点一致，y坐标取两端y值的平均值
        let labelPosition = CGPoint(
            x: lineStart.x,
            y: (lineStart.y + lineEnd.y) / 2
        )
        // 如果需要把标签放在线条上方不遮挡线条，可将y值上移，例如 y: lineStart.y - 12
        context.draw(resolved, at: labelPosition, anchor: .center)
        
        var path = Path()
        path.addLines(line.points)
        context.stroke(path, with: .color(.blue), lineWidth: 1.0)
    }
}
.frame(width: 400, height: 100, alignment: .leading)

补充说明：当前数据模型中每条线都是垂直直线，直接取首尾点计算中点即可；如果是任意两点组成的线段，通用中点计算逻辑为CGPoint(x: (p1.x + p2.x)/2, y: (p1.y + p2.y)/2)。

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