RoughSwift

Introducing the RoughSwift Project

Overview

RoughSwift is an innovative project that allows developers to create shapes using a hand-drawn, sketchy, and comic style directly in SwiftUI. It is designed to bring a playful, artistic look to digital interfaces by combining the power of technology with the charm of hand-drawn aesthetics. It supports iOS and tvOS platforms and provides a wide array of shapes such as lines, rectangles, circles, ellipses, paths, arcs, curves, polygons, and SVG paths.

Key Features

• Platform Support: Works seamlessly on iOS and tvOS.
• Shape Variety: Supports various shapes including lines, rectangles, circles, ellipses, and more complex SVG paths.
• UIBezierPath Generation: Can generate UIBezierPath for use with CAShapeLayer.
• Customization Options: Offers a wide range of customization options to tailor shapes according to your needs.
• Composable APIs: Easy-to-use, flexible APIs that blend naturally with SwiftUI.
• Drawing Functions: Convenient functions to draw shapes effortlessly.
• Platform Independence: While currently supporting iOS and tvOS, the APIs are designed to be scalable to other platforms in the future.
• Test Coverage: Ensures reliability and robustness through comprehensive testing.
• Immutable and Type-safe Data Structures: Designed for reliability and safety in code.

How It Works

In RoughSwift, developers use a generator in the draw function to determine which shape to render. The CALayer returned contains the drawn shape, ready to be animated or further transformed for creative effects.

Example: Drawing a green rectangle

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)

Options and Customization

The Options structure allows customization of various aspects of the shapes such as randomness, toughness, bowing, stroke, fill style, and more. Each property is tweakable to personalize the appearance of your hand-drawn shapes.

Different Fill Styles

RoughSwift supports numerous fill styles, adding depth and character to the shapes. The available styles include crossHatch, dashed, dots, hachure, solid, starBurst, zigzag, and zigzagLine. This variety allows developers to choose the best style to match their application's theme.

Example: Drawing circles in different fill styles

struct StylesView: View {
    var body: some View {
        ...
    }
}

SVG Support

SVG shapes can be scaled to fit within a specified layer size, allowing developers to incorporate detailed SVG graphics and manipulate them as needed.

struct SVGView: View {
    var apple: String {
        ...
    }
    var body: some View {
        ...
    }
}

Creative Opportunities

With RoughSwift, the possibilities are unlimited. Primitive shapes can be combined to create more complex and beautiful designs, such as charts or even creative artworks, limited only by the user’s imagination.

Example: Creating a chart

struct Chartview: View {
    var heights: [CGFloat] {
        ...
    }
    var body: some View {
        ...
    }
}

Technical Core

At its core, RoughSwift features an Engine that uses a Generator and Renderer to process shapes, relying on a shared engine for efficiency. The project takes inspiration from rough.js for its structural logic.

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

Installation

Adding RoughSwift to your project is simple. Just include the following in your Package.swift:

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

Author and Contributions

The project was created by Khoa Pham, and contributions are welcome. For more details on how to contribute, you can check the CONTRIBUTING file in the project repository.

RoughSwift is provided under the MIT license, making it open for use in various applications with minimal restrictions.