[Swift通天遁地]8、媒體與動畫-(5)使用開源類庫繪製文字、圖形、圖像、圖表、SVG（可縮放矢量圖形）

時間 2019-11-12

標籤 swift 通天媒體動畫使用開源繪製文字圖形圖像圖表 svg 縮放矢量欄目 Swift 简体版

原文原文鏈接

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公衆號：山青詠芝（shanqingyongzhi）
➤博客園地址：山青詠芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：http://www.javashuo.com/article/p-ucpbaeym-mc.html
➤若是連接不是山青詠芝的博客園地址，則多是爬取做者的文章。
➤原文已修改更新！強烈建議點擊原文地址閱讀！支持做者！支持原創！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★html

目錄：[Swift]通天遁地Swiftnode

本文將演示如何經過金剛鸚鵡的類庫，進行文字、圖像、圖表和圖形的繪製。ios

首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】git

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

根據配置文件中的相關設置，安裝第三方類庫。github

安裝完成以後，雙擊打開項目文件【DemoApp.xcodeproj】數組

在項目中引入等待繪製的圖像，以及一份SVG矢量圖形文件，xcode

圖形文件由座標、路徑等內容組成。經過第三方類庫，將圖形文件繪製在屏幕上。微信

依次建立幾份繼承自金剛鸚鵡視圖的自定義類。app

在項目文件夾上點擊鼠標右鍵，彈出右鍵菜單。svg

【New File】->【Cocoa Touch】->【Next】->

【Class】：TextSVGView

【Subclass of】:MacawView

【Language】：Swift

->【Next】->【Create】

在當前的類文件中，建立一個用於繪製文本的視圖。

 1 import Foundation
 2 //引入已經安裝的第三方類庫
 3 import Macaw
 4 
 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 }