[LearnIOS]運用 UIBezierPath 畫一個美國隊長盾牌

LearnIOS

看到彼得潘的上課PPT，我第一眼就知道我作業要畫什麼東西拉，就是美國隊長的盾牌拉

我上網找了一下圖片直接選了第一個搜尋結果

Captain American’s Shield

下面是程式碼

import UIKit
let backgroundView = UIView(frame: CGRect(x: 0, y: 0, width: 2000, height: 2000))
backgroundView.backgroundColor = UIColor(red: 171/255, green: 44/255, blue: 40/255, alpha: 1)
let redPath = UIBezierPath(ovalIn: CGRect(x: 250, y: 250, width: 1500 , height: 1500))
let redShape = CAShapeLayer()
redShape.path = redPath.cgPath
backgroundView.layer.mask = redShape
let whitePath = UIBezierPath(ovalIn: CGRect(x: 400, y: 400, width: 1200, height: 1200))
let whiteShape = CAShapeLayer()
whiteShape.path = whitePath.cgPath
whiteShape.fillColor = UIColor.white.cgColor
backgroundView.layer.addSublayer(whiteShape)
let red2Path = UIBezierPath(ovalIn: CGRect(x: 550, y: 550, width: 900, height: 900))
let red2Shpae = CAShapeLayer()
red2Shpae.path = red2Path.cgPath
red2Shpae.fillColor = UIColor(red: 171/255, green: 44/255, blue: 40/255, alpha: 1).cgColor
backgroundView.layer.addSublayer(red2Shpae)
let bluePath = UIBezierPath(ovalIn: CGRect(x: 700, y: 700, width: 600, height: 600))
let blueShpae = CAShapeLayer()
blueShpae.path = bluePath.cgPath
blueShpae.fillColor = UIColor(red: 3/255, green: 13/255, blue: 26/255, alpha: 1).cgColor
backgroundView.layer.addSublayer(blueShpae)
let starPath = UIBezierPath()
starPath.move(to: CGPoint(x: 1000, y: 700))
starPath.addLine(to: CGPoint(x: 933, y: 907))
starPath.addLine(to: CGPoint(x: 715, y: 907))
starPath.addLine(to: CGPoint(x: 891, y: 1036))
starPath.addLine(to: CGPoint(x: 824, y: 1243))
starPath.addLine(to: CGPoint(x: 1000, y: 1114))
starPath.addLine(to: CGPoint(x: 1176, y: 1243))
starPath.addLine(to: CGPoint(x: 1109, y: 1036))
starPath.addLine(to: CGPoint(x: 1285, y: 907))
starPath.addLine(to: CGPoint(x: 1067, y: 907))
starPath.close()
let starShape = CAShapeLayer()
starShape.path = starPath.cgPath
starShape.fillColor = UIColor.white.cgColor
backgroundView.layer.addSublayer(starShape)
backgroundView

我沒想到在我畫的過程中，想要使用彼得潘的小祕技，在背景上一個原本圖片的View來做對照組，結果不管怎樣就是用不出來，才發現原來我找的圖片跟我畫出來的東西一模一樣，難怪一直以為沒東西，哈哈哈

還有一個問題是RGB的顏色我一直不知道該怎麼辦，突然想到可以在Storyboard隨便建立一個View，然後選View的背景顏色，自定顏色，再選下面一個像吸管的按鈕，再吸要畫的圖片的顏色，然後就有RGB的數值拉

盾牌紅的RGB數值

最後結果如下面所展示

以上～謝謝大家