描述

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（锯齿线）

以下是如何绘制不同填充样式的圆形。默认填充样式为阴影线

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 文件中的 dependencies 中

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

作者

Khoa Pham, onmyway133@gmail.com

致谢

rough 为 RoughSwift 提供生成器。所有繁重的工作都通过 JavascriptCore 中的 rough 完成。
SVGPath 用于从 SVG 路径构建 UIBezierPath

贡献

我们欢迎您为 RoughSwift 做出贡献，请查看 CONTRIBUTING 文件以获取更多信息。

许可

RoughSwift 在 MIT 许可证下可用。请参阅 LICENSE 文件以获取更多信息。