RoughSwift - SwiftUI库实现手绘风格图形渲染

描述

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

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

基础

在 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 文件。