在子视图中添加同一层会更改其视觉位置

Question

我在视图中添加了一个子视图（带有黑色边框）并将其居中。

然后，我使用CAShapeLayer生成2个相同的三角形，并将其中一个添加到子视图，另一个添加到主视图。

这是Playground中的视觉结果，我们可以看到绿色三角形完全关闭并且应该居中。

这是代码：

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: 600)
    view.backgroundColor = .white
    borderedView.frame = containedFrame
    borderedView.center = view.center
    borderedView.backgroundColor = .clear
    borderedView.layer.borderColor = UIColor.black.cgColor
    borderedView.layer.borderWidth = 1
    view.addSubview(borderedView)
    setupTriangles()
}

private func setupTriangles() {
    view.layer.addSublayer(createTriangle(color: .red)) // RED triangle
    borderedView.layer.addSublayer(createTriangle(color: .green)) // GREEN triangle
}

private func createTriangle(color: UIColor) -> CAShapeLayer {
    let layer = CAShapeLayer()
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 0, y: 0))
    bezierPath.addLine(to: CGPoint(x: -containedFrame.width, y: 0))
    bezierPath.addLine(to: CGPoint(x: 0, y: -containedFrame.height))
    bezierPath.close()
    layer.position = borderedView.center
    layer.path = bezierPath.cgPath
    layer.fillColor = color.cgColor
    return layer
}

注意 ：所有position （视图，borderedView和两个三角形）都相同(150.0, 300.0)

问题 ：为什么绿色层的位置不正确？

Answer 1

@DuncanC是正确的，每个视图都有自己的坐标系。 您的问题是这一行：

layer.position = borderedView.center

这样就将borderdView的图层位置设置为框架的中心，该边框位于view的坐标系中。 创建绿色三角形时，需要使用borderedView的坐标系。

您可以通过将视图传递给createTriangle函数来解决此问题，然后将该视图的bounds中心用作图层位置：

private func setupTriangles() {
    view.layer.addSublayer(createTriangle(color: .red, for: view)) // RED triangle
    borderedView.layer.addSublayer(createTriangle(color: .green, for: borderedView)) // GREEN triangle
}

private func createTriangle(color: UIColor, for view: UIView) -> CAShapeLayer {
    let layer = CAShapeLayer()
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 0, y: 0))
    bezierPath.addLine(to: CGPoint(x: -containedFrame.width, y: 0))
    bezierPath.addLine(to: CGPoint(x: 0, y: -containedFrame.height))
    bezierPath.close()
    layer.position = CGPoint(x: view.bounds.midX, y: view.bounds.midY)
    layer.path = bezierPath.cgPath
    layer.fillColor = color.cgColor
    return layer
}

注意：执行此操作时，绿色三角形会直接出现在红色三角形的下方，因此它不可见。

Answer 2

每个视图/图层都使用其上层视图/上层的坐标系。 如果将图层添加到self.view.layer中，则它将放置在self.view.layer的坐标系中。 如果将图层添加到borderedView.layer，则它将位于borderedView.layer的坐标系中。

将视图/图层层次结构视为成堆的方格纸。 您在当前块的坐标系统中的当前块（超级视图/图层）上放置了一张新纸，但是如果您在新视图/图层上绘制，或在其中添加新视图/图层，则使用新的视图/图层的坐标系。