Swift - 如何使用 CAShapeLayer 绘制 3 个像棒球场一样的菱形？

Question

我有一个视图控制器。 在里面，我有一个视图 (A)，在这个视图 (A) 中，我想用 CAShapeLayer 绘制 3 个像棒球场一样的菱形。 你可以在下面看到我想画的例子。

但我不知道该怎么做？ 你能帮我么 ？

最良好的问候

Answer 1

应该使用带有CATransform3DMakeRotation嵌套UIStackView轻松创建。

在https://github.com/sauvikapple/StackOverflowAns4229726检查我的代码。

Answer 2

设置您的容器视图和棒球菱形的视图：

let dummyWiew: UIView = {
    let v = UIView()
    v.backgroundColor = .gray
    v.translatesAutoresizingMaskIntoConstraints = false
    
    return v
}()

let dummyWiew2: UIView = {
    let v = UIView()
    v.backgroundColor = .yellow
    v.translatesAutoresizingMaskIntoConstraints = false
    
    return v
}()

let dummyWiew3: UIView = {
    let v = UIView()
    v.backgroundColor = .gray
    v.translatesAutoresizingMaskIntoConstraints = false
    
    return v
}()

let containerView: UIView = {
    let v = UIView()
    v.backgroundColor = .clear
    v.translatesAutoresizingMaskIntoConstraints = false
    
    return v
}()

之后在 viewDidLoad 设置容器视角旋转，创建 stacView 并添加约束：

view.backgroundColor = UIColor(white: 1, alpha: 0.1)
    
    let angleInRadians = -135 / 180.0 * CGFloat.pi
    let rotation = containerView.transform.rotated(by: angleInRadians)
    containerView.transform = rotation
    
    view.addSubview(containerView)
    containerView.heightAnchor.constraint(equalToConstant: 180).isActive = true
    containerView.widthAnchor.constraint(equalToConstant: 180).isActive = true
    containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    let stackView = UIStackView(arrangedSubviews: [dummyWiew, dummyWiew2])
    stackView.distribution = .fillEqually
    stackView.spacing = 20
    stackView.translatesAutoresizingMaskIntoConstraints = false
    
    containerView.addSubview(stackView)
    stackView.heightAnchor.constraint(equalToConstant: 80).isActive = true
    stackView.widthAnchor.constraint(equalToConstant: 180).isActive = true
    stackView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
    stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    containerView.addSubview(dummyWiew3)
    dummyWiew3.bottomAnchor.constraint(equalTo: stackView.topAnchor, constant: -20).isActive = true
    dummyWiew3.trailingAnchor.constraint(equalTo: stackView.trailingAnchor, constant: 0).isActive = true
    dummyWiew3.leadingAnchor.constraint(equalTo: dummyWiew2.leadingAnchor).isActive = true
    dummyWiew3.heightAnchor.constraint(equalToConstant: 80).isActive = true

这是结果