SwiftDraw 0.17.0

SwiftDraw 0.17.0

×

由 Simon Whitty 维护。

SwiftDraw 0.17.0

  • 由
  • Simon Whitty

Build CodeCov Platforms Swift 5.4 License Twitter

介绍

SwiftDraw 是一个 Swift 库，用于解析和绘制 SVG 图像，并包括一个命令行工具，将 SVG 转换为 SFSymbol、PNG、PDF 和 Swift 源代码。

使用方法

矢量图像可以轻松加载并转换为 rasterized 的 UIImage 或 NSImage

let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize()

转换为任意大小的图像

let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize(with: CGSize(width: 640, height: 480))

使用填充边框裁剪图像

let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize(insets: .init(top: 10, left: 0, bottom: 10, bottom: 0))

使用负填充边框添加填充

let svg = SVG(named: "sample.svg", in: .main)!
imageView.image = svg.rasterize(insets: .init(top: -10, left: -10, bottom: -10, bottom: -10))

iOS

直接从资源包、数据或文件 URL 中的 SVG 创建 UIImage

import SwiftDraw
let image = UIImage(svgNamed: "sample.svg")

macOS

直接从包含在bundle中的SVG，Data或文件URL创建一个NSImage

import SwiftDraw
let image = NSImage(svgNamed: "sample.svg")

命令行工具

该命令行工具可以将SVG转换为其他格式：PNG、JPEG、SFSymbol和Swift源代码。

copyright (c) 2022 Simon Whitty

usage: swiftdraw <file.svg> [--format png | pdf | jpeg | swift | sfsymbol] [--size wxh] [--scale 1x | 2x | 3x]

<file> svg file to be processed

Options:
 --format      format to output image: png | pdf | jpeg | swift | sfsymbol
 --size        size of output image: 100x200
 --scale       scale of output image: 1x | 2x | 3x
 --insets      crop inset of output image: top,left,bottom,right
 --precision   maximum number of decimal places
 --output      optional path of output file

 --hideUnsupportedFilters   hide elements with unsupported filters.

Available keys for --format swift:
 --api                api of generated code:  appkit | uikit

Available keys for --format sfymbol:
 --insets             alignment of regular variant: top,left,bottom,right | auto
 --ultralight         svg file of ultralight variant
 --ultralightInsets   alignment of ultralight variant: top,left,bottom,right | auto
 --black              svg file of black variant
 --blackInsets        alignment of black variant: top,left,bottom,right | auto

$ swiftdraw simple.svg --format png --scale 3x
$ swiftdraw simple.svg --format pdf

安装

您可以使用Homebrew将swiftdraw命令行工具安装到macOS上。假设您已经安装了Homebrew，只需键入

$ brew install swiftdraw

安装后更新到最新版本

$ brew upgrade swiftdraw

或者从这里下载最新的命令行工具此处。

SF Symbol

可以由单个SVG创建自定义SF Symbols。SwiftDraw扩展笔画，使用非零规则绘制路径并对齐元素，生成可以直接导入到Xcode的符号。

$ swiftdraw key.svg --format sfsymbol

还可以提供可选的变体--ultralight和--black

$ swiftdraw key.svg --format sfsymbol --ultralight key-ultralight.svg --black key-black.svg

对齐

默认情况下，SwiftDraw会自动将内容的大小和对齐方式设置为模板导线。工具输出自动对齐的内边距

$ swiftdraw simple.svg --format sfsymbol --insets auto
Alignment: --insets 30,30,30,30

内边距可以以--insets top,left,bottom,right的形式提供，指定每个边为Double或auto

$ swiftdraw simple.svg --format sfsymbol --insets 40,auto,40,auto
Alignment: --insets 40,30,40,30

也可以使用--ultralightInsets和--blackInsets来对齐变体。

Swift 代码生成

还可以使用该工具从 SVG 生成 Swift 源代码。

$ swiftdraw simple.svg --format swift
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="160" height="160">
  <rect width="160" height="160" fill="snow" />
  <path d="m 80 30 a 50 50 0 1 0 50 50 h -50 z" fill="pink" stroke="black" stroke-width="2"/>
</svg>
extension UIImage {
  static func svgSimple(size: CGSize = CGSize(width: 160.0, height: 160.0)) -> UIImage {
    let f = UIGraphicsImageRendererFormat.preferred()
    f.opaque = false
    let scale = CGSize(width: size.width / 160.0, height: size.height / 160.0)
    return UIGraphicsImageRenderer(size: size, format: f).image {
      drawSimple(in: $0.cgContext, scale: scale)
    }
  }

  private static func drawSimple(in ctx: CGContext, scale: CGSize) {
    ctx.scaleBy(x: scale.width, y: scale.height)
    let rgb = CGColorSpaceCreateDeviceRGB()
    let color1 = CGColor(colorSpace: rgb, components: [1, 0.98, 0.98, 1])!
    ctx.setFillColor(color1)
    ctx.fill(CGRect(x: 0, y: 0, width: 160, height: 160))
    let color2 = CGColor(colorSpace: rgb, components: [1, 0.753, 0.796, 1])!
    ctx.setFillColor(color2)
    let path = CGMutablePath()
    path.move(to: CGPoint(x: 80, y: 30))
    path.addCurve(to: CGPoint(x: 30, y: 80),
                   control1: CGPoint(x: 52.39, y: 30),
                   control2: CGPoint(x: 30, y: 52.39))
    path.addCurve(to: CGPoint(x: 80, y: 130),
                   control1: CGPoint(x: 30, y: 107.61),
                   control2: CGPoint(x: 52.39, y: 130))
    path.addCurve(to: CGPoint(x: 130, y: 80),
                   control1: CGPoint(x: 107.61, y: 130),
                   control2: CGPoint(x: 130, y: 107.61))
    path.addLine(to: CGPoint(x: 80, y: 80))
    path.closeSubpath()
    ctx.addPath(path)
    ctx.fillPath()
    ctx.setLineCap(.butt)
    ctx.setLineJoin(.miter)
    ctx.setLineWidth(2)
    ctx.setMiterLimit(4)
    let color3 = CGColor(colorSpace: rgb, components: [0, 0, 0, 1])!
    ctx.setStrokeColor(color3)
    ctx.addPath(path)
    ctx.strokePath()
  }
}

您可以使用www.whileloop.com/swiftdraw生成源代码。

致谢

SwiftDraw 主要由 Simon Whitty 完成。

(完整的贡献者列表)