はじめに

メリークリスマス！
本日は24日なので、swiftのUIBezierPathを使ってクリスマスツリーを作ります。
Storyboardでクリスマスツリーの画像を貼れば簡単ですが、今回はすべてコードで書いていきたいと思います。
(少しずれている所もありますが許してください。。)

ひとまず完成図

こんな感じで作りました。
一気にクリスマスツリー作るのは大変そうだったので、
「星」・「木の部分の三角形」・「枝の部分の長方形」・「鉢の部分の長方形」に分けて作りました。

コード

class ViewController: UIViewController {
    var treeFrame: CGRect = .zero
    var starFrame: CGRect = .zero
    var roundRectFrame: CGRect = .zero

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .black
        starViewSetup()
        treeViewSetup()
        branchViewSetup()
        potViewSetup()
    }

    // 星を作る
    func starViewSetup() {
        let starLayer = CAShapeLayer.init()
        let starViewWidth = CGFloat(50)
        starFrame = CGRect(x: (view.bounds.width / 2) - (starViewWidth / 2) , y: 100, width: starViewWidth, height: 50)
        starLayer.frame = starFrame
        starLayer.strokeColor = UIColor.yellow.cgColor
        starLayer.fillColor = UIColor.yellow.cgColor
        let starViewHeight = starFrame.size.height
        let starBezier = UIBezierPath()
        starBezier.move(to: CGPoint.init(x: 0, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 3, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 2, y: 0))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth * 0.66, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth, y: starViewHeight / 3))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth * 0.75, y: starViewHeight * 0.6))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth * 0.9 , y: starViewHeight))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 2, y: starViewHeight * 0.75))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 10 , y: starViewHeight))
        starBezier.addLine(to: CGPoint.init(x: starViewWidth / 4, y: starViewHeight * 0.6))
        starBezier.close()
        starLayer.path = starBezier.cgPath
        view.layer.insertSublayer(starLayer, at: 1)
    }
    
    // 木を作る
    func treeViewSetup() {
        let treeLayer = CAShapeLayer.init()
        treeFrame = CGRect(x: starFrame.minX - starFrame.size.height / 2, y: starFrame.minY - starFrame.height + 10, width: 100, height: 300)
        treeLayer.frame = treeFrame
        treeLayer.strokeColor = UIColor.green.cgColor
        treeLayer.fillColor = UIColor.green.cgColor
        let treeViewHeight = treeFrame.height
        let treeViewWidth = treeFrame.width
        let treeBezier = UIBezierPath()
        treeBezier.move(to: CGPoint(x: treeViewWidth / 2, y: treeViewHeight / 5))
        treeBezier.addLine(to: CGPoint(x: treeViewWidth * 1.2, y: treeViewHeight))
        treeBezier.addLine(to: CGPoint(x: 0, y:treeViewHeight))
        treeBezier.close()
        treeLayer.path = treeBezier.cgPath
        view.layer.insertSublayer(treeLayer, at: 0)
    }
    
    // 枝を作る
    func branchViewSetup() {
        let roundRectLayer = CAShapeLayer.init()
        roundRectFrame = CGRect.init(x: treeFrame.midX - 5, y: treeFrame.maxY - 10, width: 30, height: 100)
        roundRectLayer.frame = roundRectFrame
        roundRectLayer.strokeColor = UIColor.green.cgColor
        roundRectLayer.fillColor = UIColor.green.cgColor
        roundRectLayer.path = UIBezierPath.init(roundedRect: CGRect.init(x: 0, y: 0, width: roundRectFrame.size.width, height: roundRectFrame.size.height), cornerRadius: 8).cgPath
        view.layer.insertSublayer(roundRectLayer, at: 2)
    }
    
    // 鉢を作る
    func potViewSetup() {
        let potLayer = CAShapeLayer.init()
        let potFrame = CGRect.init(x: (roundRectFrame.midX) - (roundRectFrame.size.height / 2), y: roundRectFrame.height + roundRectFrame.minY - 10, width: roundRectFrame.size.height, height: 70)
        potLayer.frame = potFrame
        potLayer.strokeColor = UIColor.brown.cgColor
        potLayer.fillColor = UIColor.brown.cgColor
        potLayer.path = UIBezierPath.init(roundedRect: CGRect.init(x: 0, y: 0, width: potFrame.size.width, height: potFrame.size.height), cornerRadius: 8).cgPath
        view.layer.insertSublayer(potLayer, at: 3)
    }
}

結論・最後に

星の微調整が結構大変でしたが楽しかったです。
なので、
Storyboardは楽！！！！

次回以降は、ツリーを装飾できたりしたらいいな、、、
最後までお読みいただきありがとうございました。
良いクリスマス、年末年始を！