Swift - How to draw 3 diamond like baseball field with CAShapeLayer?

Question

I have a view controller. Inside, i have a view (A) and in this view (A) I want to draw 3 diamond like a baseball field with CAShapeLayer. You can see an example what i want to draw, below.

But I don't know how to do it ? Can you please help me ?

Best regard

UIBezierPath might be a good start. – Larme Oct 06 '20 at 16:13 — Larme, Oct 06 '20 at 16:13
Thanks for your answer, do you have an example ? – kirusamma Oct 06 '20 at 16:24 — kirusamma, Oct 06 '20 at 16:24

score 0 · Answer 1 · answered Oct 06 '20 at 16:58

0

Should be easily created using Nested UIStackViews with CATransform3DMakeRotation.

Check my code at https://github.com/sauvikapple/StackOverflowAns4229726.

answered Oct 06 '20 at 16:58

Sauvik Dolui

5,520
3
34
44

Thanks you ! I will try tomorrow ! – kirusamma Oct 06 '20 at 17:49

score 0 · Answer 2 · answered Oct 06 '20 at 17:14

Set your container view and the views for baseball diamond:

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
}()

after that in viewDidLoad set container view angle rotation, create stacView and add constraints:

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

This is the result

Thanks you, you too ! I will try tomorrow ! – kirusamma Oct 06 '20 at 17:49 — kirusamma, Oct 06 '20 at 17:49

Swift - How to draw 3 diamond like baseball field with CAShapeLayer?

2 Answers2