iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 22
0

今天教一下如何在畫面中畫圖,使用一種叫做UIBezierPath的描繪筆劃路徑工具,並且把該路徑指派給CAShapeLayer來顯示在UIView上,而UIView與Layer之間的觀念則是大約如下:
UIView必須放在CALayer上,所以當UIView被創建在ViewController上時,同時也會自動建立一個CALayer。

首先我們要先知道,一個ViewController一定會有一個底圖的UIView,那我們現在新建一個專案,就會有一個ViewController了,我們就用這個ViewController來畫圖吧

第一步先初始化一個UIBezierPath,還有一個要來被賦予路徑的CAShapeLayer

let path = UIBezierPath()
let layer = CAShapeLayer()

再來我們要來使用畫筆來畫出線(也就是path),我們想像畫畫的時候會在想要畫的地方先下筆接觸畫紙(還沒有畫的動作),這個動作在UIBezierPath裡面有個函數叫move像是下圖,他可以帶入一個CGPoint表示下筆的位置,我們這裡假設座標(100,100)

path.move(to: CGPoint(x: 100, y: 100))

再來我們要拖拉畫筆到想要的位置,這樣就能畫出一條直線,拖拉的這個動作我們使用addLine,這裡假設我要把畫筆拖拉至(100,200)

path.addLine(to: CGPoint(x: 100, y: 200))

好了!這樣我們的筆畫路線就已經繪製完畢,但是這時候如果你run了程式碼會發現什麼都沒有,因為我們繪製完的路線並沒有一個圖層可以讓他顯示出來,這個時候我們要用之前新增的圖層來存放繪製完成的直線,也就是像這樣,把繪製好的Path指派給Layer的Path,且Layer要的Path是CGPath的型態所以我們需要轉換
再來我們要改變圖層畫筆畫出來的顏色,因為預設是透明,所以就算畫完了也看不到!那這個顏色屬性叫做strokeColor,這邊假設給紅色但是跟上面的Path一樣,Layer的顏色要求的是CGColor我們這邊也要做轉型,給完顏色後就可以把這個Layer加入到我們主畫面的ViewController上的View

layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)

再來介紹一下如何畫圓:
我們先宣告一個點當作圓心,緊接著呼叫畫圓的方法addArc,半徑先設為50,然後因為圓是一個有面積的圖形,所以我們要給他中間填滿的顏色,在Layer裡面的方法叫做fillColor,給定顏色的方式跟上面畫筆顏色也是一樣的,完成後程式碼如下

let layer = CAShapeLayer()
let path = UIBezierPath()
let center = CGPoint(x: 100, y: 100)
path.move(to: CGPoint(x: 100, y: 100))
path.addArc(withCenter: center, radius: 50, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
layer.path = path.cgPath
layer.strokeColor = UIColor.red.cgColor
layer.fillColor = UIColor.red.cgColor
self.view.layer.addSublayer(layer)

addArc()這個method的參數:

  • withCenter:圓心
  • radius:半徑
  • startAngle:開始角度(徑度)
  • endAngle:結束角度(徑度)
  • clockwise:順時針或逆時針畫圓(true為順false為逆)

結果如下:
https://ithelp.ithome.com.tw/upload/images/20181106/20107549xrwtTpuvJ9.png


上一篇
DAY21 RadioButton
下一篇
DAY23 CAShapeLayer加上動畫
系列文
iOS APP開發學習筆記 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言