RoughSwift 1.0.0

RoughSwift 1.0.0

×

由Khoa Pham维护。

RoughSwift 1.0.0

Version Carthage Compatible License Platform Swift

描述

RoughSwift 允许我们轻松制作手绘、草图、漫画风格的形状。它基于与 Snowflake 相同的概念，该概念生成高度可组合和可变的 CALayer，将绘图命令转换为美丽的草图图形。

  • 支持 iOS，tvOS
  • 支持 macOS
  • 支持所有形状：线、矩形、圆、椭圆、线性路径、圆弧、曲线、多边形、svg 路径
  • 为 CAShapeLayer 生成 UIBezierPath
  • 使用选项轻松自定义
  • 易于组合的 API
  • 方便的绘制函数
  • 平台无关的 API，容易支持新平台
  • 测试覆盖率
  • 不可变且类型安全的数据结构
  • SVG 椭圆弧

您可以在这里进一步探索：[Playground](https://github.com/onmyway133/RoughSwift/tree/master/Playground-iOS.playground) 和 [示例](https://github.com/onmyway133/RoughSwift/tree/master/Example/RoughSwiftDemo) 项目。

基础

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

以下是如何绘制绿色矩形的示例

let size = Size(width: 300, height: 200)
let layer = draw(size: size, using: { generator in
  var options = Options()
  options.fill = UIColor.green
  generator.rectangle(x: 80, y: 10, width: 140, height: 100, options: options)
}

CALayer 的美在于我们可以进一步地对它们进行动画处理、变换（平移、缩放、旋转）并将它们组合成更强大的形状。

选项

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

  • maxRandomnessOffset
  • roughness
  • bowing
  • fill
  • stroke
  • 描边宽度
  • 曲线紧密度
  • 曲线步数
  • 填充样式
  • 填充重量
  • 刻度角度
  • 刻度间隙
  • 虚线偏移量
  • 虚线间隙
  • 之字型偏移量

图形

RoughSwift支持所有原始图形，包括SVG路径

  • 线条
  • 矩形
  • 椭圆形
  • 圆形
  • 直线路径
  • 弧线
  • 曲线
  • 多边形
  • 路径

填充样式

通常，我们使用fill为形状内部填充实色，使用stroke为形状边框，使用fillStyle为草图填充样式。

以下是使用不同填充样式绘制圆的示例。默认填充样式为刻度

let layer = draw(size: size, using: { generator in
  var options = Options()
  options.stroke = UIColor.blue
  
  options.fill = UIColor.red
  options.fillStyle = .crossHatch
  generator.circle(x: 100, y: 100, diameter: 100, options: options)
    
  options.fill = UIColor.green
  options.fillStyle = .dashed
  generator.circle(x: 230, y: 100, diameter: 100, options: options)
    
  options.fill = UIColor.purple
  options.fillStyle = .dots
  generator.circle(x: 350, y: 100, diameter: 100, options: options)
    
  options.fill = UIColor.cyan
  options.fillStyle = .hachure
  generator.circle(x: 480, y: 100,  diameter: 100, options: options)
  
  options.fill = UIColor.orange
  options.fillStyle = .solid
  generator.circle(x: 100, y: 300,  diameter: 100, options: options)
  
  options.fill = UIColor.gray
  options.fillStyle = .starBurst
  generator.circle(x: 230, y: 300, diameter: 100, options: options)
    
  options.fill = UIColor.yellow
  options.fillStyle = .zigzag
  generator.circle(x: 350, y: 300,  diameter: 100, options: options)
  
  options.fill = UIColor.blue
  options.fillStyle = .zigzagLine
  generator.circle(x: 480, y: 300, diameter: 100, options: options)
})

SVG

SVG图形可能大于或小于所指定图层大小，因此RoughSwift将其缩放至请求的size。这样我们就可以组合和变换SVG图形。

let bird = draw(size: CGSize(width: 150, height: 150), using: { generator in
  var options = Options()
  options.stroke = UIColor.brown
  options.fill = UIColor.red
  let apple = "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"
  generator.path(d: apple, options: options)
})

bird.frame.origin = CGPoint(x: 100, y: 100)

创意图形

利用所有原始图形，我们可以创建更美丽的事物。唯一的限制是你的想象力。

以下是创建图表的示例

let width: Float = 50
var options = Options()
options.fill = UIColor.yellow
Array(0..<10).forEach { i in
  let height = Float(arc4random_uniform(150))
  generator.rectangle(x: Float(i) * width + 100, y: 470 - height, width: width, height: height, options: options)
}

借助可绘制生成器和渲染器向前发展

屏幕背后，draw函数组合了Generator和Renderer。我们可能不需要了解这些细节，但如果我们需要更精细的控制，了解这一点很有用。

我们可以实例化Engine或使用共享的Engine以提高内存效率，以创建Generator。每次我们指导Generator绘制一个形状时，引擎都会努力在Drawable中确定关于草图形状的信息。

这些概念的名字遵循rough.js，以提高代码的可读性。

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

let layer = CALayer()
  
let generator = Engine.shared.generator(size: size)
let renderer = Renderer(layer: layer)
generator.onDrawable = renderer.handle

安装

RoughSwift 通过 CocoaPods 提供。要安装它，只需在您的 Podfile 中添加以下行

pod 'RoughSwift'

RoughSwift 还通过 Carthage 提供。要安装，只需在 Cartfile 中写入

github "onmyway133/RoughSwift"

RoughSwift 也可以手动安装。只需下载并将 Sources 文件夹放入您的项目中。

作者

Khoa Pham, [email protected]

致谢

  • rough 为 RoughSwift 提供了动力 generator。所有艰苦的工作都是通过 rough 在 JavascriptCore 中完成的。
  • SVGPath 用于从 SVG 路径中构建 UIBezierPath

贡献

我们很愿意看到您为 RoughSwift 贡献，有关更多信息，请查看 CONTRIBUTING 文件。

许可证

RoughSwift 可在 MIT 许可证下使用。有关更多信息，请参阅 LICENSE 文件。