[Swift通天遁地]八、媒体与动画-(5)使用开源类库绘制文字、图形、图像、图表、SVG（可缩放矢量图形）

★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★
➤微信公众号：山青咏芝（shanqingyongzhi）
➤博客园地址：山青咏芝（https://www.cnblogs.com/strengthen/）
➤GitHub地址：https://github.com/strengthen/LeetCode
➤原文地址：https://www.cnblogs.com/strengthen/p/10354504.html 
➤如果链接不是山青咏芝的博客园地址，则可能是爬取作者的文章。
➤原文已修改更新！强烈建议点击原文地址阅读！支持作者！支持原创！
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★

目录：[Swift]通天遁地Swift

本文将演示如何通过金刚鹦鹉的类库，进行文字、图像、图表和图形的绘制。

首先确保已经安装了所需的第三方类库。双击查看安装配置文件【Podfile】

platform :ios, '12.0'
use_frameworks!

target 'DemoApp' do
    source 'https://github.com/CocoaPods/Specs.git'
    pod "Macaw"
end

根据配置文件中的相关设置，安装第三方类库。

安装完成之后，双击打开项目文件【DemoApp.xcodeproj】

在项目中引入等待绘制的图像，以及一份SVG矢量图形文件，

图形文件由坐标、路径等内容组成。通过第三方类库，将图形文件绘制在屏幕上。

依次创建几份继承自金刚鹦鹉视图的自定义类。

在项目文件夹上点击鼠标右键，弹出右键菜单。

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

【Class】：TextSVGView

【Subclass of】:MacawView

【Language】：Swift

->【Next】->【Create】

在当前的类文件中，创建一个用于绘制文本的视图。

import Foundation
//引入已经安装的第三方类库
import Macaw

class TextSVGView: MacawView
{
    //添加一个初始化方法
    required init?(coder aDecoder: NSCoder)
    {
        //创建一个文字节点，并设置文字的内容，
        //以及文字节点的位置。
        let text = Text(text: "Hello, SVG!", place: .move(dx: 60, dy: 100))
        //设置文字节点的字体属性
        text.font = Font(name: "Arail", size: 42)
        //实现父类的初始化方法，
        super.init(node: text, coder: aDecoder)
    }
}

在项目文件夹上点击鼠标右键，弹出右键菜单。

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

【Class】：ShapeSVGView

【Subclass of】:MacawView

【Language】：Swift

->【Next】->【Create】

在当前的类文件中，创建一个用于绘制图形的视图。 

import UIKit
//引入已经安装的第三方类库
import Macaw

class ShapeSVGView: MacawView
{
    //添加一个初始化方法
    required init?(coder aDecoder: NSCoder)
    {
        //创建一个图形节点，并设置图形节点的显示区域、填充颜色、边框等属性。
        let shape1 = Shape(form: Rect(x: 60, y: 75, w: 180, h: 180),
                          fill: Color(val: 0xfcc07c),
                          stroke: Stroke(fill: Color(val: 0xff9e4f),  6))
        
        //创建第二个图形节点，设置图形的圆角半径为16
        let shape2 = Shape(form: RoundRect(
                          rect: Rect(x: 60, y: 275, w: 180, h: 180),
                          rx: 16))
        
        //设置一个文字节点，并设置文字节点的内容、字体、颜色、对齐方式、基线和位置等属性。
        let text = Text(
            text: "Show",
            font: Font(name: "Serif", size: 21),
            fill: Color.white,
            align: .mid,
            baseline: .mid,
            place: .move(dx: 300 / 2, dy: 165))
        
        //从项目中读取一张图片素材，设置宽度为80，并设置图片在视图中的位置。
        //然后给图片添加一个触摸事件，当触摸事件发生时，更改文字节点的字体颜色为褐色
        let image = Image(src: "coffee.png", w: 80, place: .move(dx: 110, dy: 320))
        _ = image.onTap { (tapEvent) in
            text.fill = Color.maroon
            let location = tapEvent.location.toCG()
            if let currentNode = svgView.findNodeAt(location: location) {
                print(currentNode.tag.first ?? "tag not found")
           }
        }
        //初始化一个组节点
        let group = Group()
        //将上文创建的四个节点，添加到组中。
        group.contents = [shape1, shape2, text, image]
        //实现父类的初始化方法
        super.init(node: group, coder: aDecoder)
    }
}

在项目文件夹上点击鼠标右键，弹出右键菜单。

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

【Class】：MyChartView

【Subclass of】:MacawView

【Language】：Swift

->【Next】->【Create】

在当前的类文件中，创建一个用于绘制柱形图表的视图。

import UIKit
//引入已经安装的第三方类库
import Macaw

class MyChartView: MacawView
{
    //初始化一个由数字组成的数组，作为图表的数据源。
    static let data: [Double] = [101, 142, 66, 178, 92]
    //初始化一个颜色数组，作为柱形的填充颜色
    static let palette = [0xf08c00, 0xbf1a04, 0xffd505, 0x8fcc16, 0xd1aae3].map { val in Color(val: val)}
    
    //添加一个初始化方法
    required init?(coder aDecoder: NSCoder)
    {
        //通过调用自定义方法，创建一个按钮节点。
        //该按钮节点将被附加在图表上。
        let button = MyChartView.createButton()
        //通过调用自定义方法，创建一个图表对象。
        let chart = MyChartView.createChart(button.contents[0])
        //实现父类的初始化方法。
        super.init(node: Group(contents: [button, chart]), coder: aDecoder)
    }
    
    //添加一个自定义方法，用来创建一个附加在图表上的按钮节点，该按钮包含一个图标。
    private static func createButton() -> Group
    {
        //初始化一个图形节点， 并设置它的颜色显示和填充颜色，
        let shape = Shape(
            form: Rect(x: -100, y: -15, w: 200, h: 30).round(r: 5),
            //填充颜色是一个角度为90度的渐变色。
            fill: LinearGradient(degree: 90, from: Color(val: 0xfcc07c), to: Color(val: 0xfc7600)),
            //设置图形节点的边框颜色和边框的宽度
            stroke: Stroke(fill: Color(val: 0xff9e4f),  1))
        
        //初始化一个文字节点，并设置文字内容、字体、颜色、对齐方式、基线、位置和不透明度等属性。
        let text = Text(
            text: "Show", font: Font(name: "Serif", size: 21),
            fill: Color.white, align: .mid, baseline: .mid,
            place: .move(dx: 15, dy: 0), opaque: false)
        
        //从项目中读取一张图片素材，以创建一个图像节点，作为按钮上的图标。
        let image = Image(src: "charts.png", w: 30, place: .move(dx: -40, dy: -15), opaque: false)
        
        //最后返回一个包含三个节点的组
        return Group(contents: [shape, text, image], place: .move(dx: 375 / 2, dy: 75))
    }
    
    //添加另一个方法，用来绘制一张图表。
    private static func createChart(_ button: Node) -> Group
    {
        //初始化一个节点数组。
        var items: [Node] = []
        
        //添加一个6次的循环语句，用来创建六个y轴虚线。
        for i in 1...6
        {
            //计算每条虚线的y轴坐标
            let y = 200 - Double(i) * 30.0
            //绘制一个线条，并设置线条的描边颜色。
            items.append(Line(x1: -5, y1: y, x2: 275, y2: y).stroke(fill: Color(val: 0xF0F0F0)))
            //在线条的左侧绘制y轴的数值标签。
            items.append(Text(text: "(i*30)", align: .max, baseline: .mid, place: .move(dx: -10, dy: y)))
        }
        
        //通过自定义方法，绘制柱形节点，并将柱形节点添加到图表中。
        items.append(createBars(button))
        //绘制一个线条节点，作为图表的x轴。
        items.append(Line(x1: 0, y1: 200, x2: 275, y2: 200).stroke())
        //绘制图表的y轴
        items.append(Line(x1: 0, y1: 0, x2: 0, y2: 200).stroke())
        
        //返回一个包含各节点的数组对象。
        return Group(contents: items, place: .move(dx: 50, dy: 200))
    }
    
    //添加一个方法，用来绘制柱状图形。
    private static func createBars(_ button: Node) -> Group
    {
        //初始化一个节点数组
        var items: [Node] = []
        //对图表的数据源数组进行遍历
        for (i, item) in data.enumerated()
        {
            //在循环语句中，创建在水平方向上不同位置的矩形节点，节点的高度为数组中的数据。
            let bar = Shape(
                form: Rect(x: Double(i) * 50 + 25, y: 0, w: 30, h: item),
                fill: LinearGradient(degree: 90, from: palette[i], to: palette[i].with(a: 0.3)),
                place: .move(dx: 0, dy: -data[i]))
            //将矩形节点添加到数组中
            items.append(bar)
        }
        
        //返回由5个矩形节点组成的组。
        return Group(contents: items, place: .move(dx: 0, dy: 200))
    }
}

在项目文件夹上点击鼠标右键，弹出右键菜单。

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

【Class】：SVGView

【Subclass of】:MacawView

【Language】：Swift

->【Next】->【Create】

在当前的类文件中，创建一个用于绘制SVG图形的视图。

import UIKit
//引入已经安装的第三方类库
import Macaw

class SVGView: MacawView
{
    //添加一个初始化方法
    required init?(coder aDecoder: NSCoder)
    {
        //在初始化方法中，通过第三方类库的解析方法，加载并解析项目中的指定名称的图形文件。
        super.init(node: try! SVGParser.parse(resource: "tiger"), coder: aDecoder)
    }
}

进入项目的故事板界面【Main.storyboard】

点击控件库图标，打开控件库的列表窗口。

在视图控件的上方双击，往故事板中插入一个视图。

点击属性检查器图标，进入属性设置面板。

依次设置视图对象的坐标和尺寸。

X：0   Y：0

Width：320    Height：568

点击身份检查器图标，进入身份设置面板。

在类名输入框内，输入自定义的类名，

首先输入用于绘制文字的自定义类。

【Class】：TextSVGView 

接着输入用于绘制图形的自定义类，

使故事板中的视图控件，显示自定义的图形。

【Class】：ShapeSVGView

接着输入用于绘制图表的自定义类，

使故事板中的视图控件，显示自定义的图表。

【Class】：MyChartView

接着输入用于绘制SVG(矢量图形)的自定义类，

【Class】：SVGView