Xcode中Storyboard设备不匹配致对象连线偏移的原因与解决方法

问题出在你初始化连线时直接固定了按钮的位置值，没有在AutoLayout完成布局后动态更新这些坐标。以下是具体修复方案：

核心思路 #

• 不硬编码起点终点坐标，而是保存按钮引用，每次绘制时实时获取按钮实际位置
• 监听布局变化，确保设备尺寸/布局更新时，连线能重新计算并绘制
• 正确处理坐标系转换，保证按钮坐标相对于连线视图的准确性

修改代码实现 #

1. 重构SkillLine类 #

让它保存按钮引用，实时计算位置并响应布局变化：

class SkillLine: UIView {
    weak var startButton: UIButton?
    weak var endButton: UIButton?
    var lineColor: UIColor = .black
    
    init(startButton: UIButton, endButton: UIButton, lineColor: UIColor = .black) {
        self.startButton = startButton
        self.endButton = endButton
        self.lineColor = lineColor
        super.init(frame: .zero)
        backgroundColor = .clear
        translatesAutoresizingMaskIntoConstraints = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    override func draw(_ rect: CGRect) {
        guard let context = UIGraphicsGetCurrentContext(),
              let startBtn = startButton,
              let endBtn = endButton else { return }
        
        // 将按钮中心坐标转换为当前连线视图的坐标系
        let startPoint = convert(startBtn.center, from: startBtn.superview)
        let endPoint = convert(endBtn.center, from: endBtn.superview)
        
        context.setStrokeColor(lineColor.cgColor)
        context.setLineWidth(3)
        context.beginPath()
        context.move(to: startPoint)
        context.addLine(to: endPoint)
        context.strokePath()
    }
    
    // 布局变化时触发重绘
    override func layoutSubviews() {
        super.layoutSubviews()
        setNeedsDisplay()
    }
}

2. 创建连线的正确方式 #

不再传递固定坐标，直接传入按钮，并通过约束让连线视图铺满背景：

let newLine = SkillLine(startButton: skillButton1, endButton: skillButton2)
background.addSubview(newLine)

// 添加约束确保连线视图与背景视图尺寸一致
NSLayoutConstraint.activate([
    newLine.topAnchor.constraint(equalTo: background.topAnchor),
    newLine.leadingAnchor.constraint(equalTo: background.leadingAnchor),
    newLine.trailingAnchor.constraint(equalTo: background.trailingAnchor),
    newLine.bottomAnchor.constraint(equalTo: background.bottomAnchor)
])

问题根源解析 #

• 初始化连线时获取的layer.position是Storyboard设计时的原始坐标，此时AutoLayout尚未完成实际布局；设备尺寸变化后，按钮位置更新但连线坐标未同步
• 直接使用layer.position未考虑坐标系转换，若连线视图与按钮的父视图层级不同，会出现坐标偏移
• 固定frame的方式无法适应背景视图的尺寸变化，导致连线绘制区域与实际背景不匹配

内容的提问来源于stack exchange，提问作者Kristopher D'Alterio