Artisan is a graphics library for iOS inspired by Raphael and SVG. It uses CoreGraphics to draw shapes and paths but exposes a simpler Swift API.

Start by adding Artisan.swift to your Xcode project.

When we draw with Artisan, we do so onto a canvas. This canvas, which we'll reference in a variable called 'paper', is created using the Paper class. We always specify the width and height of the canvas. Optionaly, you can set the background color using the fill property. Colors are all defined using CSS hex style strings. e.g.

override func viewDidAppear(animated: Bool) {
    // setup a Paper object
    var paper: Paper = Paper(frame: self.view.bounds)
    paper.fill = "#eee"
    self.view.addSubview(paper)
}

Now that we have the paper object we can add shapes to it. Coordinates follow the normal iOS convention with (0, 0) being at the top left. Other x, y points are relative to that point on the paper.

To draw a circle use the circle function of the Paper class.

    var circle = paper.circle(xCenter: 150, yCenter: 300, r: 155)
    circle.fill = "#E91E63"
    circle.stroke = "#009688"
    circle.lineWidth = 5.0

Results in this

We can draw as many circles as we like and we don't have to reference them in a variable:

paper.circle(xCenter: 200, yCenter: 100, r: 25)

Ellipses are drawn in a similar way using the Paper.ellipse function.

paper.ellipse(xCenter: 150, yCenter: 150, width: 200, height: 20)

Its parameters are the same as the circle, i.e. xCenter, yCenter, except that we can specify width and height radii separately.

Other shapes we can draw include rectangles. We can draw a rectangle with the Paper.rect function

    var offset: Double = 50;
    for(var i = 0; i < 5; i+=1) {
        var rect = paper.rect(xOrigin: offset, yOrigin: offset, width: 50, height: 50, cornerRadius: Double(i))
        rect.fill = randomColorString()
        rect.lineWidth = CGFloat(i)
        rect.stroke = randomColorString()
        offset = offset + 50
    }

results in

Note how the linewidth and corner radius are also set.

Use the Paper.path method to add paths to the paper. Paths are created using path strings. These loosely follow SVG path strings, but are space delimited. i.e each command or data value must have a space between them in the string.

	// a block shape
    var tetronimo1 = paper.path("M 250 650 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z")
    tetronimo1.stroke = "#f00"
    tetronimo1.fill = "#ff0"

    // Add a star shape
    var star = paper.path("M 100 10 L 40 198 L 190 78 L 10 78 L 160 198 z")
    star.stroke = "#673AB7"
    star.fill = "#FF9800"

    var triangle = paper.path("M 150 250 l -75 200 l 150 0 Z")
    triangle.stroke = "#4CAF50"
    triangle.fill = "#FF5722"

We can draw arcs that are portions of a circle using the Paper.arc function

or using the "a" path string and the Path.path function.

    var arc = paper.path("a 100 100 25 0 180 1")
    arc.stroke = "#9C27B0"
    arc.lineWidth = 5.0

Results in an arc from 0 to 180 degrees with the center of (100, 100) and a radius of 25. It is drawn counter-clockwise, i.e. from 0 to 180.

You can add images to the paper using the Paper.image function

    var image = UIImage(named: "photoHeader")
    paper.image(src: image!, xOrigin: 0, yOrigin: Double(paper.bounds.size.height) - 140, width: 320, height: 140)

Many of the properties exposed by the Element sub-classes support implicit animation. Changing the value of an ellipse's fill, height, width, xCenter and yCenter will all be animated to the new values. Changing of the instructionString property of a Path object will result in the shape of the object animated from its current shape to the new one.

Future plans include adding more support for

• drawing of text
• Bezier paths
• gradients
• explicit animations
• touch/gesture handling
• API improvements to use consistent data types. e.g. consistent use CGFloat or Swift language types like Double?
• Suite of demo code like the Raphael demos