像截图一样制作个人资料详情页面UI

Question

我在UIBezierPath和CAShapeLayer中寻求帮助，以便绘制半个tringle并查看截图的个人资料。

我的代码如下，但它绘制完整的三角形。

let triangleLayer = CAShapeLayer()
        let trianglePath = UIBezierPath()
        trianglePath.move(to: .zero)
        trianglePath.addLine(to: CGPoint(x: -size, y: up ? size : -size))
        trianglePath.addLine(to: CGPoint(x: size, y: up ? size : -size))
        trianglePath.close()
        triangleLayer.path = trianglePath.cgPath
        triangleLayer.fillColor = UIColor.red.cgColor
        triangleLayer.anchorPoint = .zero[![enter image description here][1]][1]
        triangleLayer.position = CGPoint(x: x, y: y)
        subview.layer.addSublayer(triangleLayer)

Answer 1

为路径上的点指定名称非常有用：

subview.backgroundColor = .blue

let triangleLayer = CAShapeLayer()
let trianglePath = UIBezierPath()

let w = subview.bounds.size.width
let h = subview.bounds.size.height

// move to Top-Left corner
trianglePath.move(to: .zero)

// line to Top-Right corner
trianglePath.addLine(to: CGPoint(x: w, y: 0))

// line to Right-Side, 75% of height
trianglePath.addLine(to: CGPoint(x: w, y: h * 0.75))

// line to Bottom-Left corner
trianglePath.addLine(to: CGPoint(x: 0, y: h))

trianglePath.close()

triangleLayer.path = trianglePath.cgPath
triangleLayer.fillColor = UIColor.red.cgColor
triangleLayer.anchorPoint = .zero

subview.layer.addSublayer(triangleLayer)

将导致：