矢量圖形的一個(gè)巨大優(yōu)勢(shì)就是它可以被渲染在任意分辨率的屏幕上，同時(shí)保持絕對(duì)的平滑的且不失真。這就是為什么Post和TrueType字體在任意放大倍數(shù)下都如此清晰的原因。因?yàn)?a target='_blank' class='arckwlink_none'>智能手機(jī)和電腦顯示屏幕一般是光柵排列，所以在合適的分辨率下，矢量圖形必須作為光柵圖形才能在屏幕渲染。而這些底層圖形庫已經(jīng)封裝了上述實(shí)現(xiàn)，程序員并不需要了解。

　　1.什么時(shí)候使用矢量圖形

　　讓我們來考慮一下使用矢量圖形的一些場(chǎng)景。

　　App和按鈕圖標(biāo)，用戶界面元素

　　幾年前（iOS7），蘋果公司在自己的app和iOS平臺(tái)自身的用戶界面中拋棄了擬物設(shè)計(jì)風(fēng)格（skeuomorphism），而采用更扁平的精細(xì)設(shè)計(jì)。可以參考下Camera和Photo app引用的圖標(biāo)。

　　十有八九，這些元素是由矢量圖形工具設(shè)計(jì)的。為了符合這些設(shè)計(jì)規(guī)則，開發(fā)者不得不跟隨扁平化風(fēng)格，這導(dǎo)致大部分流行的（非游戲類）app完全改變了風(fēng)格。

　　游戲

　　簡(jiǎn)單圖像（Asteroids）或幾何主題（Super Hexagon）的游戲，能使用游戲引擎渲染矢量圖形。游戲中通過代碼編寫的部分也采用了矢量圖形。

　　圖片

　　你可以隨機(jī)的插入圖片來獲得基于相同基本圖形的多個(gè)版本的圖像。

　　2.貝塞爾曲線

　　什么是貝塞爾曲線？在不深入探討數(shù)學(xué)理論情況下，我們來討論下開發(fā)者實(shí)際用到的貝塞爾曲線特征。

　　自由度

　　貝塞爾曲線特點(diǎn)是它有多少的自由度。自由度越大，曲線變化越大（數(shù)學(xué)計(jì)算就越復(fù)雜）

　　一次方貝塞爾曲線就是兩點(diǎn)的直線線段。二次方貝塞爾曲線也稱作閉合曲線。三次方貝塞爾曲線（立方）是我們重點(diǎn)關(guān)注的，因?yàn)樗谏炜s性和復(fù)雜性上提供了這種方案。

　　立方貝塞爾曲線不僅可以表示簡(jiǎn)單平滑曲線，也可以表示封閉曲線和尖端曲線（兩曲線相匯與一點(diǎn)）。許多立方貝塞爾曲線段可以通過點(diǎn)對(duì)點(diǎn)的銜接在一起形成更復(fù)雜的形狀。

　　三維貝塞爾曲線

　　立方貝塞爾曲線的形狀是由它的兩個(gè)端點(diǎn)和兩個(gè)額外的描點(diǎn)決定它的形狀的。一般來說，n次方的貝塞爾曲線有（n-1）個(gè)描點(diǎn)，不用計(jì)算有幾個(gè)端點(diǎn)。

　　立方貝塞爾曲線有一個(gè)引人注目的特征是這些點(diǎn)有可視化的特性。連接端點(diǎn)和它最近的喵點(diǎn)的這條線是曲線的切線。這條切線是設(shè)計(jì)貝塞爾曲線形狀的基礎(chǔ)，我們會(huì)稍后深入研究這個(gè)特性。

　　幾何變化

　　基于曲線的數(shù)學(xué)特性，你可以簡(jiǎn)單的在曲線上進(jìn)行沒有任何精度損失的幾何變化，比如縮放，旋轉(zhuǎn)和平移。

　　下面的圖片展示了不同形狀的三次方貝塞爾曲線的樣本。注意綠色線就是曲線的切線。

　　3.Core Graphics和UIBezierPath類

　　在iOS和OS X平臺(tái)，矢量圖形底層是基于C語言的核心圖形庫實(shí)現(xiàn)的。它基于UIKit/Cocoa上層，封裝面向?qū)ο蟮念?。它的實(shí)現(xiàn)者就是UIBezierPath類（OS X是NSBezierPath類），一個(gè)貝塞爾曲線理論的實(shí)現(xiàn)。

　　UIBezierPath類支持一次方貝塞爾曲線（就是直線端），二次方貝塞爾曲線（封閉曲線）和三次方貝塞爾曲線（三維曲線）

　　從編程角度考慮，UIBezierPath對(duì)象可以通過添加子路徑的方式一個(gè)一個(gè)添加。為了實(shí)現(xiàn)這個(gè)方式，UIBezierPath對(duì)象持續(xù)關(guān)注currentPoint屬性。每次你添加一個(gè)新的子路徑段，最末端點(diǎn)就成為當(dāng)前點(diǎn)，接下來的繪圖操作就從這個(gè)當(dāng)前點(diǎn)開始。你可以手動(dòng)移動(dòng)這個(gè)點(diǎn)到你想要的位置。

　　UIBezierPath類為一些常用的形狀提供了便捷的方法，比如弧，圓和圓角矩形等。其內(nèi)部的實(shí)現(xiàn)是多個(gè)子路徑互相連接而成。

　　貝塞爾曲線路徑形狀可以是開放或封閉的，甚至可以自包含或者同時(shí)有多個(gè)封閉曲線。

　　4.入門

　　這本指南需要讀者有一定的矢量圖形基礎(chǔ)。不過如果你是一位有經(jīng)驗(yàn)的開發(fā)者但從來沒使用過Core Graphics庫或UIBezierPath類，你可以學(xué)習(xí)下去。但如果你是新手并且不熟悉，我建議你先閱讀UIBezierPath的官方API說明（同樣參考Core Graphics官方文檔API）。在這篇教程中我們只會(huì)練習(xí)API中幾個(gè)有限的功能。

　　話不多說，我們這就開始編寫代碼。在該篇教程的剩余部分，我會(huì)展現(xiàn)兩個(gè)適合使用矢量圖形的場(chǎng)景。

　　打開Xcode工具，創(chuàng)建一個(gè)新的playground文件，設(shè)置平臺(tái)為iOS。順便說一句，Xcode的playground是使用矢量圖形工作變得有趣的另一個(gè)原因。你可以敲入代碼并立即獲得代碼的可視效果。請(qǐng)記住你必須使用最新版的Xcode，目前的版本是7.2。

相關(guān)電子資料下載

• iOS17.1可能明天發(fā)布，iOS17.1主要修復(fù)哪些問題？ 380
• 華為全新鴻蒙蓄勢(shì)待發(fā) 僅支持鴻蒙內(nèi)核和鴻蒙系統(tǒng)應(yīng)用 719
• 蘋果手機(jī)系統(tǒng)iOS 17遭用戶質(zhì)疑 731
• iPhone12輻射超標(biāo)？蘋果推送iOS 17.1解決此事 750
• 傳華為囤積零部件 目標(biāo)明年智能手機(jī)出貨7000萬部；消息稱 MiOS 僅限國(guó)內(nèi)，小米 28208
• 蘋果推送iOS17.0.3，解決iPhone15Pro系列存在機(jī)身過熱 216
• Testin云測(cè)兼容和真機(jī)服務(wù)平臺(tái)中上線iPhone 15系列手機(jī) 208
• 利爾達(dá)推出搭載HooRiiOS的Matter模組 145
• 運(yùn)放參數(shù)解析：輸入偏置電流(Ibias)和失調(diào)電流(Ios) 128
• 昆侖太科發(fā)布支持國(guó)產(chǎn)飛騰騰銳D2000芯片的開源BIOS固件版本 448