SVGView
使用 SwiftUI 编写的 SVG 解析器
概览
此项目旨在将 SVG 的全部功能带到苹果平台上。我们的框架可以解析 SVG 文件并使用 SwiftUI 来表示其内容。它不仅能够渲染 SVG 文件，还可以向其添加交互性，处理用户输入，并使用 SwiftUI 使您的艺术作品动起来。
使用
使用几行代码就能开始使用 SVGView
struct ContentView: View {
var body: some View {
SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
}
}定制
您可以通过这种方式更改节点的一些参数
let circle = SVGCircle(cx: 30, cy: 30, r: 30)
circle.fill = SVGColor.black
circle.stroke = SVGStroke(fill: SVGColor(hex: "ABCDEF"), width: 2)
circle.onTapGesture {
print("tap")
}与向量元素交互
您可以使用标准标识符找到SVG文件中的所需部分，并在运行时添加手势和改变其属性
struct ContentView: View {
var body: some View {
let view = SVGView(contentsOf: Bundle.main.url(forResource: "example", withExtension: "svg")!)
if let part = view.getNode(byId: "part") {
part.onTapGesture {
part.opacity = 0.2
}
}
return view
}
}动画
您可以使用标准的SwiftUI工具来对图片进行动画处理
if let part = view.getNode(byId: "part") {
part.onTapGesture {
withAnimation {
part.opacity = 0.2
}
}
}复杂效果
SVGView使得为您的应用添加自定义效果变得简单。例如，使这个皮卡丘图标跟踪手指动作。
var body: some View {
let view = SVGView(contentsOf: Bundle.main.url(forResource: "pikachu", withExtension: "svg")!)
let delta = CGAffineTransform(translationX: getEyeX(), y: 0)
view.getNode(byId: "eye1")?.transform = delta
view.getNode(byId: "eye2")?.transform = delta
return view.gesture(DragGesture().onChanged { g in
self.x = g.location.x
})
}
SVG 测试覆盖率
我们的目标是提供对所有SVG标准的100%支持：1.1（第二版）、Tiny 1.2和2.0。然而，此项目才刚刚开始，您可以在此页面查看我们的进展。您还可以通过查看SVGViewTests项目来了解此框架处理每个SVG测试用例的方式。
安装
Swift 包管理器
dependencies: [
.package(url: "https://github.com/exyte/SVGView.git")
]CocoaPods
pod 'SVGView'Carthage
github "Exyte/SVGView"
系统要求
- iOS 14+ / watchOS 7+ / macOS 11+
- Xcode 12+
我们其他的开源 SwiftUI 库
PopupView - Toasts 和弹出框库
Grid - 最强大的网格容器
ScalingHeaderScrollView - 具有粘性标题的滚动视图，在滚动时缩小
AnimatedTabBar - 带有预设动画的标签栏
MediaPicker - 可定制的媒体选择器
Chat - 完全可自定义的消息单元格、输入视图和内置媒体选择器的聊天 UI 框架
ConcentricOnboarding - 动画引导流程
FloatingButton - 浮动按钮菜单
ActivityIndicatorView - 丰富的动画加载指示器
ProgressIndicatorView - 丰富的动画进度指示器
LiquidSwipe - 流体导航动画