Swift|18 運用 UIBezierPath 繪製蠟筆小新裡的小白
Published in
6 min readAug 15, 2021
運用UIBezierPath搭配CGAffineTransform來畫圖
使用到的語法有
func move(to: CGPoint)起始點移動到指定位置func addLine(to: CGPoint)增加一條直線func addArc(withCenter: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)增加一個弧線（圓形）func addCurve(to: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)增加一條立方貝塞爾曲線func addQuadCurve(to endPoint:CGPoint, controlPoint:CGPoint)增加一條二次貝塞爾曲線var cgPath: CGPath路徑的核心圖形表示
選擇自己要畫的圖片
可以上傳到這個網站裡查詢座標和顏色
https://yangcha.github.io/iview/iview.html
成果
除了畫小白以外
也用小新睡衣上的元素來練習畫三角形、圓形和正方形
遇到的問題
原本是要將腮紅改成紅色
小白臉的線條也變成紅色了
想了好久還是想不出來
請教了彼得潘大神
原來是brush要產生新的 path
才不會跟原本的 path 混在一起
所以將腮紅設成path2
let path2 = UIBezierPath()path2.move(to: CGPoint(x: 316, y: 191))path2.addQuadCurve(to: CGPoint(x: 327, y: 208), controlPoint:CGPoint(x: 323, y: 202))path2.move(to: CGPoint(x: 332, y: 187))path2.addQuadCurve(to: CGPoint(x: 341, y: 212), controlPoint: CGPoint(x: 337, y: 199))path2.move(to: CGPoint(x: 351, y: 202))path2.addQuadCurve(to: CGPoint(x: 354, y: 213), controlPoint: CGPoint(x: 352, y: 208))
let blush = CAShapeLayer()blush.path = path2.cgPathblush.fillColor = UIColor.clear.cgColorblush.lineWidth = 4blush.strokeColor = UIColor.red.cgColorview.layer.addSublayer(blush)
還有一個問題是原本照著網站上的座標畫的小白右半耳會不見
所以必須要將他整隻位移
解決方法就是要新增一個UIView
讓全部的部分都可以一起移動
let baiMoveLeft = UIView(frame: CGRect(x: 0, y: 0, width: 500, height: 500))baiMoveLeft.layer.addSublayer(face)baiMoveLeft.layer.addSublayer(lefteye)baiMoveLeft.layer.addSublayer(leftEar)baiMoveLeft.layer.addSublayer(righteye)baiMoveLeft.layer.addSublayer(rightEar)baiMoveLeft.layer.addSublayer(nose)baiMoveLeft.layer.addSublayer(body)baiMoveLeft.layer.addSublayer(blush)baiMoveLeft.transform = CGAffineTransform(translationX: -45, y: 150)view.addSubview(baiMoveLeft)
心得
畫圖這關讓我有點小卡關
一直不停的找文章來研究
但是慢慢研究＋動手開始做
漸漸出現成果
又過了一個小關卡的感覺啊！！！
但是有一些概念還是得弄清楚
不然很容易卡住
繼續努力吧～
