搭配網站查詢圖片的座標畫圖

1 連到網站 iview

https://yangcha.github.io/iview/iview.html

2 上傳可愛的聖誕樹圖片。

3 查詢圖片的座標。

只要在網站上移動滑鼠，即可查詢圖片裡某個點的 X, Y 座標。經過一番努力，我們找出聖誕樹七個點的座標。

4 利用剛剛查詢的座標和 UIBezierPath 繪製聖誕樹。

let path = UIBezierPath()
path.move(to: CGPoint(x: 306, y: 20))
path.addLine(to: CGPoint(x: 18, y: 664))
path.addLine(to: CGPoint(x: 250, y: 664))
path.addLine(to: CGPoint(x: 250, y: 778))
path.addLine(to: CGPoint(x: 360, y: 778))
path.addLine(to: CGPoint(x: 360, y: 664))
path.addLine(to: CGPoint(x: 594, y: 664))
path.close()
let shapeLayer = CAShapeLayer()
shapeLayer.path = path.cgPath
let treeView = UIView(frame: CGRect(x: 0, y: 0, width: 600, height: 800))
treeView.backgroundColor = UIColor.green
treeView.layer.mask = shapeLayer
treeView

值得注意的，從 playground 觀看 UIBezierPath 的形狀時，將和它設成 view 的 mask 時不太一樣。這是因為 UIBezierPath 以左下為原點 (0,0)，x & y 愈向右和愈向上愈大，但 iOS App 的 View 元件則以左上為圓點，x & y 愈向右和愈向下愈大。

因此在繪製過程中，當我們想確認 UIBezierPath 目前的形狀時，請記得它的形狀上下顛倒才是 view 的模樣。

path 在 playground 預覽的形狀

ps: 當 path 太大時，playground 的預覽框框記得要拉大才能完整顯示。

為了方便比對目前繪製的 path 形狀是否正確，建議利用 Mac 的 Preview App 將原始圖片上下顛倒(Flip Vertical)比對。

如此我們在繪製 path 時，即可將它的樣子跟顛倒的圖片比對。

treeView 的模樣

別擔心，最後的 treeView 會是正常的聖誕樹，不會是顛倒的聖誕樹啦。

你知道 就算大雨讓整座城市顛倒 我會給你懷抱