本文将演示如何通过金刚鹦鹉的类库, 进行文字, 图像, 图表和图形的绘制.
首先确保已经安装了所需的第三方类库. 双击查看安装配置文件 [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), width: 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), width: 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
[Swift 通天遁地] 八, 媒体与动画 -(5) 使用开源类库绘制文字, 图形, 图像, 图表, SVG
来源: http://www.bubuko.com/infodetail-2946498.html