Swift - 如何使用 CAShapeLayer 绘制 3 颗钻石般的棒球场？答案

【问题标题】：Swift - How to draw 3 diamond like baseball field with CAShapeLayer?Swift - 如何使用 CAShapeLayer 绘制 3 颗钻石般的棒球场？
【发布时间】：2020-10-06 16:09:17
【问题描述】：

我有一个视图控制器。在里面，我有一个视图 (A)，在这个视图 (A) 中，我想用 CAShapeLayer 像棒球场一样绘制 3 颗钻石。您可以在下面看到我想要绘制的示例。

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

最好的尊重

【问题讨论】：

UIBezierPath 可能是一个好的开始。
谢谢你的回答，有例子吗？

标签： ios swift draw cashapelayer

【解决方案1】：

应该使用嵌套UIStackViews 和CATransform3DMakeRotation 轻松创建。

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

【讨论】：

谢谢！我明天试试！

【解决方案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

这是结果

【讨论】：

谢谢你，你也是！我明天试试！