[Swift通天遁地]八、媒體與動畫-(5)使用開源類庫繪制文字、圖形、圖像、圖表、SVG
阿新 • • 發佈：2019-02-07
圖標 target lse 透明 標簽 制圖 一份 data 插入
本文將演示如何通過金剛鸚鵡的類庫，進行文字、圖像、圖表和圖形的繪制。
首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】
1 platform :ios, ‘12.0‘ 2 use_frameworks! 3 4 target ‘DemoApp‘ do 5 source ‘https://github.com/CocoaPods/Specs.git‘ 6 pod "Macaw" 7 end
根據配置文件中的相關設置，安裝第三方類庫。
安裝完成之後，雙擊打開項目文件【DemoApp.xcodeproj】
在項目中引入等待繪制的圖像，以及一份SVG矢量圖形文件，
圖形文件由坐標、路徑等內容組成。通過第三方類庫，將圖形文件繪制在屏幕上。
依次創建幾份繼承自金剛鸚鵡視圖的自定義類。
在項目文件夾上點擊鼠標右鍵，彈出右鍵菜單。
【New File】->【Cocoa Touch】->【Next】->
【Class】：TextSVGView
【Subclass of】:MacawView
【Language】：Swift
->【Next】->【Create】
在當前的類文件中，創建一個用於繪制文本的視圖。
1 import Foundation 2 //引入已經安裝的第三方類庫 3 import Macaw4 5 class TextSVGView: MacawView 6 { 7 //添加一個初始化方法 8 required init?(coder aDecoder: NSCoder) 9 { 10 //創建一個文字節點，並設置文字的內容， 11 //以及文字節點的位置。 12 let text = Text(text: "Hello, SVG!", place: .move(dx: 60, dy: 100)) 13 //設置文字節點的字體屬性 14 text.font = Font(name: "Arail", size: 42) 15 //實現父類的初始化方法， 16 super.init(node: text, coder: aDecoder) 17 } 18 }
在項目文件夾上點擊鼠標右鍵，彈出右鍵菜單。
【New File】->【Cocoa Touch】->【Next】->
【Class】：ShapeSVGView
【Subclass of】:MacawView
【Language】：Swift
->【Next】->【Create】
在當前的類文件中，創建一個用於繪制圖形的視圖。
1 import UIKit 2 //引入已經安裝的第三方類庫 3 import Macaw 4 5 class ShapeSVGView: MacawView 6 { 7 //添加一個初始化方法 8 required init?(coder aDecoder: NSCoder) 9 { 10 //創建一個圖形節點，並設置圖形節點的顯示區域、填充顏色、邊框等屬性。 11 let shape1 = Shape(form: Rect(x: 60, y: 75, w: 180, h: 180), 12 fill: Color(val: 0xfcc07c), 13 stroke: Stroke(fill: Color(val: 0xff9e4f), width: 6)) 14 15 //創建第二個圖形節點，設置圖形的圓角半徑為16 16 let shape2 = Shape(form: RoundRect( 17 rect: Rect(x: 60, y: 275, w: 180, h: 180), 18 rx: 16)) 19 20 //設置一個文字節點，並設置文字節點的內容、字體、顏色、對齊方式、基線和位置等屬性。 21 let text = Text( 22 text: "Show", 23 font: Font(name: "Serif", size: 21), 24 fill: Color.white, 25 align: .mid, 26 baseline: .mid, 27 place: .move(dx: 300 / 2, dy: 165)) 28 29 //從項目中讀取一張圖片素材，設置寬度為80，並設置圖片在視圖中的位置。 30 //然後給圖片添加一個觸摸事件，當觸摸事件發生時，更改文字節點的字體顏色為褐色 31 let image = Image(src: "coffee.png", w: 80, place: .move(dx: 110, dy: 320)) 32 _ = image.onTap { (tapEvent) in 33 text.fill = Color.maroon 34 let location = tapEvent.location.toCG() 35 if let currentNode = svgView.findNodeAt(location: location) { 36 print(currentNode.tag.first ?? "tag not found") 37 } 38 } 39 //初始化一個組節點 40 let group = Group() 41 //將上文創建的四個節點，添加到組中。 42 group.contents = [shape1, shape2, text, image] 43 //實現父類的初始化方法 44 super.init(node: group, coder: aDecoder) 45 } 46 }
在項目文件夾上點擊鼠標右鍵，彈出右鍵菜單。
【New File】->【Cocoa Touch】->【Next】->
【Class】：MyChartView
【Subclass of】:MacawView
【Language】：Swift
->【Next】->【Create】
在當前的類文件中，創建一個用於繪制柱形圖表的視圖。
1 import UIKit 2 //引入已經安裝的第三方類庫 3 import Macaw 4 5 class MyChartView: MacawView 6 { 7 //初始化一個由數字組成的數組，作為圖表的數據源。 8 static let data: [Double] = [101, 142, 66, 178, 92] 9 //初始化一個顏色數組，作為柱形的填充顏色 10 static let palette = [0xf08c00, 0xbf1a04, 0xffd505, 0x8fcc16, 0xd1aae3].map { val in Color(val: val)} 11 12 //添加一個初始化方法 13 required init?(coder aDecoder: NSCoder) 14 { 15 //通過調用自定義方法，創建一個按鈕節點。 16 //該按鈕節點將被附加在圖表上。 17 let button = MyChartView.createButton() 18 //通過調用自定義方法，創建一個圖表對象。 19 let chart = MyChartView.createChart(button.contents[0]) 20 //實現父類的初始化方法。 21 super.init(node: Group(contents: [button, chart]), coder: aDecoder) 22 } 23 24 //添加一個自定義方法，用來創建一個附加在圖表上的按鈕節點，該按鈕包含一個圖標。 25 private static func createButton() -> Group 26 { 27 //初始化一個圖形節點， 並設置它的顏色顯示和填充顏色， 28 let shape = Shape( 29 form: Rect(x: -100, y: -15, w: 200, h: 30).round(r: 5), 30 //填充顏色是一個角度為90度的漸變色。 31 fill: LinearGradient(degree: 90, from: Color(val: 0xfcc07c), to: Color(val: 0xfc7600)), 32 //設置圖形節點的邊框顏色和邊框的寬度 33 stroke: Stroke(fill: Color(val: 0xff9e4f), width: 1)) 34 35 //初始化一個文字節點，並設置文字內容、字體、顏色、對齊方式、基線、位置和不透明度等屬性。 36 let text = Text( 37 text: "Show", font: Font(name: "Serif", size: 21), 38 fill: Color.white, align: .mid, baseline: .mid, 39 place: .move(dx: 15, dy: 0), opaque: false) 40 41 //從項目中讀取一張圖片素材，以創建一個圖像節點，作為按鈕上的圖標。 42 let image = Image(src: "charts.png", w: 30, place: .move(dx: -40, dy: -15), opaque: false) 43 44 //最後返回一個包含三個節點的組 45 return Group(contents: [shape, text, image], place: .move(dx: 375 / 2, dy: 75)) 46 } 47 48 //添加另一個方法，用來繪制一張圖表。 49 private static func createChart(_ button: Node) -> Group 50 { 51 //初始化一個節點數組。 52 var items: [Node] = [] 53 54 //添加一個6次的循環語句，用來創建六個y軸虛線。 55 for i in 1...6 56 { 57 //計算每條虛線的y軸坐標 58 let y = 200 - Double(i) * 30.0 59 //繪制一個線條，並設置線條的描邊顏色。 60 items.append(Line(x1: -5, y1: y, x2: 275, y2: y).stroke(fill: Color(val: 0xF0F0F0))) 61 //在線條的左側繪制y軸的數值標簽。 62 items.append(Text(text: "\(i*30)", align: .max, baseline: .mid, place: .move(dx: -10, dy: y))) 63 } 64 65 //通過自定義方法，繪制柱形節點，並將柱形節點添加到圖表中。 66 items.append(createBars(button)) 67 //繪制一個線條節點，作為圖表的x軸。 68 items.append(Line(x1: 0, y1: 200, x2: 275, y2: 200).stroke()) 69 //繪制圖表的y軸 70 items.append(Line(x1: 0, y1: 0, x2: 0, y2: 200).stroke()) 71 72 //返回一個包含各節點的數組對象。 73 return Group(contents: items, place: .move(dx: 50, dy: 200)) 74 } 75 76 //添加一個方法，用來繪制柱狀圖形。 77 private static func createBars(_ button: Node) -> Group 78 { 79 //初始化一個節點數組 80 var items: [Node] = [] 81 //對圖表的數據源數組進行遍歷 82 for (i, item) in data.enumerated() 83 { 84 //在循環語句中，創建在水平方向上不同位置的矩形節點，節點的高度為數組中的數據。 85 let bar = Shape( 86 form: Rect(x: Double(i) * 50 + 25, y: 0, w: 30, h: item), 87 fill: LinearGradient(degree: 90, from: palette[i], to: palette[i].with(a: 0.3)), 88 place: .move(dx: 0, dy: -data[i])) 89 //將矩形節點添加到數組中 90 items.append(bar) 91 } 92 93 //返回由5個矩形節點組成的組。 94 return Group(contents: items, place: .move(dx: 0, dy: 200)) 95 } 96 }
在項目文件夾上點擊鼠標右鍵，彈出右鍵菜單。
【New File】->【Cocoa Touch】->【Next】->
【Class】：SVGView
【Subclass of】:MacawView
【Language】：Swift
->【Next】->【Create】
在當前的類文件中，創建一個用於繪制SVG圖形的視圖。
1 import UIKit 2 //引入已經安裝的第三方類庫 3 import Macaw 4 5 class SVGView: MacawView 6 { 7 //添加一個初始化方法 8 required init?(coder aDecoder: NSCoder) 9 { 10 //在初始化方法中，通過第三方類庫的解析方法，加載並解析項目中的指定名稱的圖形文件。 11 super.init(node: try! SVGParser.parse(resource: "tiger"), coder: aDecoder) 12 } 13 }
進入項目的故事板界面【Main.storyboard】
點擊控件庫圖標，打開控件庫的列表窗口。
在視圖控件的上方雙擊，往故事板中插入一個視圖。
點擊屬性檢查器圖標，進入屬性設置面板。
依次設置視圖對象的坐標和尺寸。
X：0 Y：0
Width：320 Height：568
點擊身份檢查器圖標，進入身份設置面板。
在類名輸入框內，輸入自定義的類名，
首先輸入用於繪制文字的自定義類。
【Class】：TextSVGView
接著輸入用於繪制圖形的自定義類，
使故事板中的視圖控件，顯示自定義的圖形。
【Class】：ShapeSVGView
接著輸入用於繪制圖表的自定義類，
使故事板中的視圖控件，顯示自定義的圖表。
【Class】：MyChartView
接著輸入用於繪制SVG(矢量圖形)的自定義類，
【Class】：SVGView
[Swift通天遁地]八、媒體與動畫-(5)使用開源類庫繪制文字、圖形、圖像、圖表、SVG