使个人资料详细信息页面 UI 像屏幕截图一样？

Question

我在 UIBezierPath 和 CAShapeLayer 中寻求帮助来绘制半个三角形并制作像屏幕截图一样的配置文件视图。

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

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)

将导致：

使个人资料详细信息页面 UI 像屏幕截图一样？

make profile details page UI like screenshot?

cashapelayer

ios

uibezierpath

swift3