Swift开发：如何在视图中居中矩形？midX/midY设置无效

问题原因 #

你对CGRect的坐标定义理解有误：

• CGRect(x:y:width:height:)的x、y参数对应的是矩形左上角顶点的坐标，不是矩形的中心点坐标
• 你直接将父视图的midX、midY作为矩形的x、y值，相当于把矩形的左上角放在了父视图的中心点位置，矩形整体会向右下偏移，自然无法居中。

修正代码 #

计算矩形位置时，用中心点坐标减去矩形宽高的一半，得到左上角顶点的正确坐标，即可实现居中。修正后的viewDidLayoutSubviews实现如下：

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    let midX = overlayView.bounds.midX
    let midY = overlayView.bounds.midY
    let size: CGFloat = 312
    
    // 计算居中矩形的左上角坐标
    let rectX = midX - size / 2
    let rectY = midY - size / 2

    let maskLayer = CAShapeLayer()
    maskLayer.frame = overlayView.bounds

    let rect = CGRect(x: rectX, y: rectY, width: size, height: size)
    let path = UIBezierPath(rect: overlayView.bounds)
    
    maskLayer.fillRule = .evenOdd
    path.append(UIBezierPath(roundedRect: rect, cornerRadius: 20))
    maskLayer.path = path.cgPath

    overlayView.layer.mask = maskLayer
}

补充说明 #

• 将mask布局逻辑放在viewDidLayoutSubviews中是正确做法，该时机可以获取到overlayView经约束布局后的最终bounds，不会出现屏幕旋转、视图尺寸更新后错位的问题
• 后续如果需要调整镂空矩形的尺寸，仅修改size变量值即可，居中逻辑会自动适配。

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