在子视图中添加相同图层为何出现视觉位置偏移？

看起来你遇到的核心问题是坐标系混淆——CAShapeLayer的路径坐标是基于它所在图层的本地坐标系，而不是主视图的全局坐标系。你用containedFrame（主视图坐标系下的矩形）来生成路径，把这个路径加到子视图的layer上时，自然会偏离中心，因为子视图的坐标系原点是它自己的左上角，不是主视图的左上角。

先还原你的问题代码（补全了缺失的部分） #

import UIKit
import PlaygroundSupport

let view = UIView()
let borderedView = UIView()
var containedFrame = CGRect(x: 0, y: 0, width: 100, height: 100)

func setupUI() {
    view.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
    view.backgroundColor = .lightGray
    
    // 配置带边框的子视图并居中
    borderedView.frame = containedFrame
    borderedView.center = view.center
    borderedView.layer.borderColor = UIColor.black.cgColor
    borderedView.layer.borderWidth = 2
    view.addSubview(borderedView)
    
    // 创建三角形路径（问题出在这里）
    func createTrianglePath() -> UIBezierPath {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: containedFrame.midX, y: containedFrame.minY))
        path.addLine(to: CGPoint(x: containedFrame.maxX, y: containedFrame.maxY))
        path.addLine(to: CGPoint(x: containedFrame.minX, y: containedFrame.maxY))
        path.close()
        return path
    }
    
    // 主视图的红色三角形
    let mainLayer = CAShapeLayer()
    mainLayer.path = createTrianglePath().cgPath
    mainLayer.fillColor = UIColor.red.cgColor
    view.layer.addSublayer(mainLayer)
    
    // 子视图的绿色三角形（偏离中心）
    let subLayer = CAShapeLayer()
    subLayer.path = createTrianglePath().cgPath
    subLayer.fillColor = UIColor.green.cgColor
    borderedView.layer.addSublayer(subLayer)
}

setupUI()
PlaygroundPage.current.liveView = view

为什么绿色三角形会偏离？ #

你生成路径时用的是containedFrame的坐标（比如containedFrame.midX是50），但这个坐标是相对于主视图的左上角的。当你把这个路径加到子视图的layer上时，子视图的本地坐标系里，(0,0)是它自己的左上角，所以路径里的(50,0)会对应子视图的x=50、y=0的位置——但子视图本身只有100x100，这个三角形会超出子视图的范围，看起来就像是偏离了中心。

修复方案：基于图层的本地bounds生成路径 #

修改路径生成逻辑，让它基于目标图层的bounds（本地坐标系）来创建，而不是用全局的containedFrame。这样不管图层放在哪里，路径都会自适应图层的位置和大小。

import UIKit
import PlaygroundSupport

let view = UIView()
let borderedView = UIView()
var containedFrame = CGRect(x: 0, y: 0, width: 100, height: 100)

func setupUI() {
    view.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
    view.backgroundColor = .lightGray
    
    // 配置带边框的子视图并居中
    borderedView.frame = containedFrame
    borderedView.center = view.center
    borderedView.layer.borderColor = UIColor.black.cgColor
    borderedView.layer.borderWidth = 2
    view.addSubview(borderedView)
    
    // 修改：基于传入的bounds生成路径（本地坐标系）
    func createTrianglePath(for bounds: CGRect) -> UIBezierPath {
        let path = UIBezierPath()
        // 用bounds的中点、右下角、左下角来画，完全基于图层自身的坐标系
        path.move(to: CGPoint(x: bounds.midX, y: bounds.minY))
        path.addLine(to: CGPoint(x: bounds.maxX, y: bounds.maxY))
        path.addLine(to: CGPoint(x: bounds.minX, y: bounds.maxY))
        path.close()
        return path
    }
    
    // 主视图的红色三角形：传入view的bounds
    let mainLayer = CAShapeLayer()
    mainLayer.path = createTrianglePath(for: view.bounds).cgPath
    mainLayer.fillColor = UIColor.red.cgColor
    view.layer.addSublayer(mainLayer)
    
    // 子视图的绿色三角形：传入borderedView的bounds
    let subLayer = CAShapeLayer()
    subLayer.path = createTrianglePath(for: borderedView.bounds).cgPath
    subLayer.fillColor = UIColor.green.cgColor
    borderedView.layer.addSublayer(subLayer)
}

setupUI()
PlaygroundPage.current.liveView = view

额外优化点 #

如果希望三角形在图层内居中且不填满整个图层，你可以基于bounds计算一个更小的矩形来生成路径，比如：

func createCenteredTrianglePath(for bounds: CGRect, size: CGSize) -> UIBezierPath {
    // 计算居中的矩形
    let triangleFrame = CGRect(
        x: bounds.midX - size.width/2,
        y: bounds.midY - size.height/2,
        width: size.width,
        height: size.height
    )
    let path = UIBezierPath()
    path.move(to: CGPoint(x: triangleFrame.midX, y: triangleFrame.minY))
    path.addLine(to: CGPoint(x: triangleFrame.maxX, y: triangleFrame.maxY))
    path.addLine(to: CGPoint(x: triangleFrame.minX, y: triangleFrame.maxY))
    path.close()
    return path
}

// 使用时：
subLayer.path = createCenteredTrianglePath(for: borderedView.bounds, size: CGSize(width: 80, height: 80)).cgPath

这样绿色三角形就会在带边框的子视图里完美居中啦！

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