RoughSwift

前往 https://indiegoodies.com/ 查看

描述

RoughSwift 允许我们在 SwiftUI 中轻松创建手绘、素描、漫画风格的图形。

• 支持 iOS、tvOS
• 支持所有形状：线条、矩形、圆形、椭圆、线性路径、弧形、曲线、多边形、SVG 路径
• 为 CAShapeLayer 生成 UIBezierPath
• 通过选项轻松自定义
• 简单可组合的 API
• 便捷的绘制函数
• 平台无关的 API，可轻松支持新平台
• 测试覆盖
• 不可变和类型安全的数据结构
• SVG 椭圆弧

有一个 示例 项目，您可以进一步探索。

基础

在 draw 函数中使用 generator 来指定要渲染的形状。返回的 CALayer 包含正确 size 的渲染结果，并在每次指示 generator 时更新。

以下是如何绘制一个绿色矩形：

RoughView()
    .fill(.yellow)
    .fillStyle(.hachure)
    .hachureAngle(-41)
    .hachureGap(-1)
    .fillWeight(-1)
    .stroke(.systemTeal)
    .strokeWidth(2)
    .curveTightness(0)
    .curveStepCount(9)
    .dashOffset(-1)
    .dashGap(-1)
    .zigzagOffset(-9)

CALayer 的优点是我们可以进一步对其进行动画、变换（平移、缩放、旋转）并将它们组合成更强大的形状。

选项

Options 用于自定义形状。它是不可变的结构体，每次应用于一个形状。以下属性可配置：

• maxRandomnessOffset
• toughness
• bowing
• fill
• stroke
• strokeWidth
• curveTightness
• curveStepCount
• fillStyle
• fillWeight
• hachureAngle
• hachureGap
• dashOffset
• dashGap
• zigzagOffset

形状

RoughSwift 支持所有基本形状，包括 SVG 路径：

• line（线条）
• rectangle（矩形）
• ellipse（椭圆）
• circle（圆形）
• linearPath（线性路径）
• arc（弧形）
• curve（曲线）
• polygon（多边形）
• path（路径）

填充样式

大多数情况下，我们使用 fill 作为形状内部的纯色填充，stroke 作为形状边框，fillStyle 作为素描填充样式。

可用的填充样式：

• crossHatch（交叉阴影）
• dashed（虚线）
• dots（点）
• hachure（平行线阴影）
• solid（实心）
• starBurst（星爆）
• zigzag（锯齿）
• zigzagLine（锯齿线）

以下是如何以不同填充样式绘制圆形。默认填充样式是 hachure：

struct StylesView: View {
    var body: some View {
        LazyVGrid(columns: [.init(), .init(), .init()], spacing: 12) {
            RoughView()
                .fill(.red)
                .fillStyle(.crossHatch)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.green)
                .fillStyle(.dashed)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.purple)
                .fillStyle(.dots)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.cyan)
                .fillStyle(.hachure)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.orange)
                .fillStyle(.solid)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.gray)
                .fillStyle(.starBurst)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.yellow)
                .fillStyle(.zigzag)
                .circle()
                .frame(width: 100, height: 100)

            RoughView()
                .fill(.systemTeal)
                .fillStyle(.zigzagLine)
                .circle()
                .frame(width: 100, height: 100)
        }
    }
}

SVG

SVG 形状可能比指定的图层大小大或小，因此 RoughSwift 会将它们缩放到您请求的 size。这样我们就可以组合和变换 SVG 形状。

struct SVGView: View {
    var apple: String {
        "M85 32C115 68 239 170 281 192 311 126 274 43 244 0c97 58 146 167 121 254 28 28 40 89 29 108 -25-45-67-39-93-24C176 409 24 296 0 233c68 56 170 65 226 27C165 217 56 89 36 54c42 38 116 96 161 122C159 137 108 72 85 32z"
    }

    var body: some View {
        VStack {
            RoughView()
                .stroke(.systemTeal)
                .fill(.red)
                .draw(Path(d: apple))
                .frame(width: 300, height: 300)
        }
    }
}

创意形状

有了所有基本形状，我们可以创造更美丽的东西。唯一的限制是你的想象力。

以下是如何创建图表：

struct Chartview: View {
    var heights: [CGFloat] {
        Array(0 ..< 10).map { _ in CGFloat.random(in: 0 ..< 150) }
    }

    var body: some View {
        HStack {
            ForEach(0 ..< 10) { index in
                VStack {
                    Spacer()
                    RoughView()
                        .fill(.yellow)
                        .rectangle()
                        .frame(height: heights[index])
                }
            }
        }
        .padding(.horizontal)
        .padding(.bottom, 100)
    }
}

高级：Drawable、Generator 和 Renderer

在幕后，我们组合了 Generator 和 Renderer。

我们可以实例化 Engine 或使用共享的 Engine 以提高内存效率，来创建 Generator。每次我们指示 Generator 绘制一个形状时，引擎都会努力计算出 Drawable 中素描形状的信息。

这些概念的命名遵循 rough.js，以便更好地理解代码。

对于 iOS，有一个 Renderer 可以处理 Drawable 并将其转换为 UIBezierPath 和 CALayer。将来会有更多 Renderer 可以渲染到图形上下文、图像以及其他平台如 macOS 和 watchOS。

let layer = CALayer()
let size = CGSize(width: 200, heigh: 200)

let renderer = Renderer(layer: layer)
let generator = Engine.shared.generator(size: bounds.size)

let drawable: Drawable = Rectangle(x: 10, y: 10, width: 100, height: 50)
let drawing = generate.generate(drawable: drawable)

renderer.render(drawing: drawing)

安装

在您的 Package.swift 文件的依赖项中添加以下行：

.package(url: "https://github.com/onmyway133/RoughSwift"),

作者

Khoa Pham, onmyway133@gmail.com

鸣谢

• rough 为 RoughSwift 提供生成器支持。所有艰苦的工作都是通过 JavascriptCore 中的 rough 完成的。
• SVGPath 用于从 SVG 路径构造 UIBezierPath

贡献

我们非常欢迎您为 RoughSwift 做出贡献，请查看 CONTRIBUTING 文件了解更多信息。

许可证

RoughSwift 基于 MIT 许可证提供。有关更多信息，请参阅 LICENSE 文件。