2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

qnoteAdvent Calendar 2020

Day 24

swiftでクリスマスツリーを作る

Last updated at Posted at 2020-12-23

はじめに

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

ひとまず完成図

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

コード

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は楽!!!!

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

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?