代碼SketchPaintCode繪製

做者：codeGlider

在個人上一篇文章中 swift10分鐘實現炫酷的導航控制器跳轉動畫,有一個swift logo的形狀

上一篇文章的動畫

我說的就是中間用來作遮罩的形狀。

它不是圖片是用一段代碼繪製而成的:

//繪製swift logo
    var bezierPath = UIBezierPath()
    bezierPath.moveToPoint(CGPointMake(96.14, 86.59))
    bezierPath.addCurveToPoint(CGPointMake(56.82, 94.83), controlPoint1: CGPointMake(81.83, 85.02), controlPoint2: CGPointMake(87.1, 95.75))
    bezierPath.addCurveToPoint(CGPointMake(20.01, 79.31), controlPoint1: CGPointMake(42.17, 94.39), controlPoint2: CGPointMake(29.06, 87.05))
    bezierPath.addCurveToPoint(CGPointMake(5.25, 62.38), controlPoint1: CGPointMake(10.35, 71.06), controlPoint2: CGPointMake(5.25, 62.38))
    bezierPath.addCurveToPoint(CGPointMake(35.2, 74.85), controlPoint1: CGPointMake(5.25, 62.38), controlPoint2: CGPointMake(17.28, 72.33))
    bezierPath.addCurveToPoint(CGPointMake(64.02, 69.54), controlPoint1: CGPointMake(53.11, 77.37), controlPoint2: CGPointMake(64.02, 69.54))
    bezierPath.addCurveToPoint(CGPointMake(37.43, 44.73), controlPoint1: CGPointMake(64.02, 69.54), controlPoint2: CGPointMake(49.91, 58.13))
    bezierPath.addCurveToPoint(CGPointMake(14.97, 16.34), controlPoint1: CGPointMake(24.96, 31.34), controlPoint2: CGPointMake(14.97, 16.34))
    bezierPath.addCurveToPoint(CGPointMake(40.56, 37.05), controlPoint1: CGPointMake(14.97, 16.34), controlPoint2: CGPointMake(31.85, 30.51))
    bezierPath.addCurveToPoint(CGPointMake(56.82, 47.75), controlPoint1: CGPointMake(45.62, 40.86), controlPoint2: CGPointMake(56.82, 47.75))
    bezierPath.addCurveToPoint(CGPointMake(43.08, 32.22), controlPoint1: CGPointMake(56.82, 47.75), controlPoint2: CGPointMake(47.12, 37.33))
    bezierPath.addCurveToPoint(CGPointMake(27.99, 11.26), controlPoint1: CGPointMake(37.51, 25.17), controlPoint2: CGPointMake(27.99, 11.26))
    bezierPath.addCurveToPoint(CGPointMake(55.05, 35.46), controlPoint1: CGPointMake(27.99, 11.26), controlPoint2: CGPointMake(45.04, 27.34))
    bezierPath.addCurveToPoint(CGPointMake(78.26, 52.03), controlPoint1: CGPointMake(61.79, 40.93), controlPoint2: CGPointMake(78.26, 52.03))
    bezierPath.addCurveToPoint(CGPointMake(80.71, 31.34), controlPoint1: CGPointMake(78.26, 52.03), controlPoint2: CGPointMake(81.63, 45.61))
    bezierPath.addCurveToPoint(CGPointMake(69.08, 3), controlPoint1: CGPointMake(79.8, 17.06), controlPoint2: CGPointMake(69.08, 3))
    bezierPath.addCurveToPoint(CGPointMake(97.29, 34.58), controlPoint1: CGPointMake(69.08, 3), controlPoint2: CGPointMake(89.12, 14.76))
    bezierPath.addCurveToPoint(CGPointMake(100.25, 67.8), controlPoint1: CGPointMake(105.45, 54.4), controlPoint2: CGPointMake(100.25, 67.8))
    bezierPath.addCurveToPoint(CGPointMake(107.29, 81.07), controlPoint1: CGPointMake(100.25, 67.8), controlPoint2: CGPointMake(104.47, 72.3))
    bezierPath.addCurveToPoint(CGPointMake(107.96, 96.25), controlPoint1: CGPointMake(110.12, 89.84), controlPoint2: CGPointMake(107.96, 96.25))
    bezierPath.addCurveToPoint(CGPointMake(96.14, 86.59), controlPoint1: CGPointMake(107.96, 96.25), controlPoint2: CGPointMake(105.27, 87.59))
    bezierPath.closePath()

 

看起來很可怕是否是，可是其實你並不須要寫任何一行代碼，這些代碼都是自動生成的！聽起來很酷對不對？那麼接下來我就教你怎麼去作，而後怎麼將它在ios程序中顯示出來

準備工做

首先你須要下載兩個軟件

Sketch

一個輕量級的UI矢量設計軟件，能夠說是當今最熱門的UI設計軟件，界面簡潔，工具很少可是能夠完成大部分的UI設計工做，能夠說是蘋果開發者必備的工具。

推薦一個Sketch的學習網站:

Sketch中文網

還有學習UI設計的網站:

UI中國

下載地址:

官方試用版下載

Paincode2

一個能夠將矢量圖形轉換爲OC/swift繪製代碼的軟件,固然它還有許多神奇的用法好比變量、動態顏色之類的，可是這個軟件目前國內教程很是少，從此我可能會寫關於它的文章。

官方試用版下載

因爲只有2小時的試用時長，比較坑，因此我仍是提供一下破解版的下載地址:

破解版下載地址

而後你還須要一張swift的圖標來做爲臨摹對象:

繪製swift矢量圖形

首先打開剛纔下載的Sketch

歡迎界面

點擊ok建立一個新的文件。

步驟1

將事先準備好的logo拖進文件,選擇vector工具(其實這個工具相似於ps裏的鋼筆工具)

步驟2

用鼠標逐個點擊各個頂點，最後連成成一個完整的形狀

步驟3

點擊頂點之間的部分，增長錨點，經過點擊+拖拽造成曲線，而後調整錨點的兩個把手，使得曲線儘可能貼合圖形。

步驟4

選中曲線,確保Size中間的鎖保持鎖定狀態,將曲線縮放到100見方的大小,不須要很精確

步驟4

將曲線導出爲svg文件

如今Sketch的工做就已經完成了

導出圖形的繪製代碼

輪到咱們的Paintcode幹活了~

新建文件，選擇導出swift代碼，將剛纔導出的svg文件拖進窗口中，而後代碼就自動生成出來~

步驟5

咱們須要的代碼就是最後選中的那些代碼

在ios程序中顯示出swiftlogo

打開Xcode，File/New/Project...，就選擇最簡單的Single View Application就能夠了，名字隨便起。

新建以後新建一個空的swift文件（File/New/File/Swift File）,寫下以下代碼，建立一個類：

1 2 3 4 5 6 7 8 9

import UIKit import QuartzCore class swiftLogoLayer {      class func logoLayer()->CAShapeLayer{          let layer = CAShapeLayer()          //添加剛纔生成的代碼         return  layer       } }

添加剛纔生成的代碼，替換註釋內容:

 var bezierPath = UIBezierPath()
    bezierPath.moveToPoint(CGPointMake(96.14, 86.59))
    bezierPath.addCurveToPoint(CGPointMake(56.82, 94.83), controlPoint1: CGPointMake(81.83, 85.02), controlPoint2: CGPointMake(87.1, 95.75))
    bezierPath.addCurveToPoint(CGPointMake(20.01, 79.31), controlPoint1: CGPointMake(42.17, 94.39), controlPoint2: CGPointMake(29.06, 87.05))
    bezierPath.addCurveToPoint(CGPointMake(5.25, 62.38), controlPoint1: CGPointMake(10.35, 71.06), controlPoint2: CGPointMake(5.25, 62.38))
    bezierPath.addCurveToPoint(CGPointMake(35.2, 74.85), controlPoint1: CGPointMake(5.25, 62.38), controlPoint2: CGPointMake(17.28, 72.33))
    bezierPath.addCurveToPoint(CGPointMake(64.02, 69.54), controlPoint1: CGPointMake(53.11, 77.37), controlPoint2: CGPointMake(64.02, 69.54))
    bezierPath.addCurveToPoint(CGPointMake(37.43, 44.73), controlPoint1: CGPointMake(64.02, 69.54), controlPoint2: CGPointMake(49.91, 58.13))
    bezierPath.addCurveToPoint(CGPointMake(14.97, 16.34), controlPoint1: CGPointMake(24.96, 31.34), controlPoint2: CGPointMake(14.97, 16.34))
    bezierPath.addCurveToPoint(CGPointMake(40.56, 37.05), controlPoint1: CGPointMake(14.97, 16.34), controlPoint2: CGPointMake(31.85, 30.51))
    bezierPath.addCurveToPoint(CGPointMake(56.82, 47.75), controlPoint1: CGPointMake(45.62, 40.86), controlPoint2: CGPointMake(56.82, 47.75))
    bezierPath.addCurveToPoint(CGPointMake(43.08, 32.22), controlPoint1: CGPointMake(56.82, 47.75), controlPoint2: CGPointMake(47.12, 37.33))
    bezierPath.addCurveToPoint(CGPointMake(27.99, 11.26), controlPoint1: CGPointMake(37.51, 25.17), controlPoint2: CGPointMake(27.99, 11.26))
    bezierPath.addCurveToPoint(CGPointMake(55.05, 35.46), controlPoint1: CGPointMake(27.99, 11.26), controlPoint2: CGPointMake(45.04, 27.34))
    bezierPath.addCurveToPoint(CGPointMake(78.26, 52.03), controlPoint1: CGPointMake(61.79, 40.93), controlPoint2: CGPointMake(78.26, 52.03))
    bezierPath.addCurveToPoint(CGPointMake(80.71, 31.34), controlPoint1: CGPointMake(78.26, 52.03), controlPoint2: CGPointMake(81.63, 45.61))
    bezierPath.addCurveToPoint(CGPointMake(69.08, 3), controlPoint1: CGPointMake(79.8, 17.06), controlPoint2: CGPointMake(69.08, 3))
    bezierPath.addCurveToPoint(CGPointMake(97.29, 34.58), controlPoint1: CGPointMake(69.08, 3), controlPoint2: CGPointMake(89.12, 14.76))
    bezierPath.addCurveToPoint(CGPointMake(100.25, 67.8), controlPoint1: CGPointMake(105.45, 54.4), controlPoint2: CGPointMake(100.25, 67.8))
    bezierPath.addCurveToPoint(CGPointMake(107.29, 81.07), controlPoint1: CGPointMake(100.25, 67.8), controlPoint2: CGPointMake(104.47, 72.3))
    bezierPath.addCurveToPoint(CGPointMake(107.96, 96.25), controlPoint1: CGPointMake(110.12, 89.84), controlPoint2: CGPointMake(107.96, 96.25))
    bezierPath.addCurveToPoint(CGPointMake(96.14, 86.59), controlPoint1: CGPointMake(107.96, 96.25), controlPoint2: CGPointMake(105.27, 87.59))
    bezierPath.closePath()

 

將圖層的形狀變成代碼所繪製的形狀

layer.path = bezierPath.CGPath

 

肯定圖層的大小,下面這個函數會把咱們的形狀用一個矩形起來，這個矩形就是圖層的大小

layer.bounds = CGPathGetBoundingBox(layer.path)

 

打開ViewController.swift

添加一個圖層常量，調用剛纔建立的類中的方法

let logo = swiftLogoLayer.logoLayer()

 

在viewDidLoad()方法中添加如下代碼:

將背景設置爲灰色

self.view.backgroundColor = UIColor.grayColor()

 

將logo圖層居中

 logo.position = CGPoint(x: view.layer.bounds.size.width/2, y: view.layer.bounds.size.height/2)

 

修改logo填充色爲白色

logo.fillColor = UIColor.whiteColor().CGColor

 

將logo圖層添加到主視圖的圖層中

self.view.layer.addSublayer(logo)

 

若是沒有任何錯誤，點擊運行

應該會出現以下圖所示效果:

運行結果

該教程全部的資源都在個人github上面，包括用來臨摹的logo，Sketch文件，導出的svg文件，還有最後的ios demo~

github託管地址