はじめに
メリークリスマス!
本日は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は楽!!!!
次回以降は、ツリーを装飾できたりしたらいいな、、、
最後までお読みいただきありがとうございました。
良いクリスマス、年末年始を!