exyte / macaw

Powerful and easy-to-use vector graphics Swift library with SVG support

     

❗Macaw Deprecated❗

Check out this post for deatils. TL;DR:

• You can continue to use this framework as is: expect no new features or bug fixing; however, it will be updated to work in future Xcode releases.
• if you need some good declarative UI framework, please use SwiftUI.
• If you need a powerful SVG support, please use SVGView.
• If you’d like to fix something in Macaw, feel free to fork this repo. Publish your PRs so that other people can use it as well. Some PRs will be merged from time to time.

Macaw

Powerful and easy-to-use vector graphics Swift library with SVG support

What is Macaw?

Macaw is a powerful and easy-to-use vector graphics library written in Swift.

It's simple

Get started with Macaw in several lines of code:

class MyView: MacawView {

	required init?(coder aDecoder: NSCoder) {
		let text = Text(text: "Hello, World!", place: .move(dx: 145, dy: 100))
		super.init(node: text, coder: aDecoder)
	}

}

It has SVG support

Include Scalable Vector Graphics right into your iOS application:

It's powerful

Affine transformations, user events, animation and various effects to build beautiful apps with Macaw:

Motivation

Modern designs contain tons of illustrations and complex animations. Mobile developers have to spend a lot of time on converting designs into native views that will be resizable for different screens. With Macaw you can reduce development time to a minimum and describe all graphics in high level scene elements. Or even render SVG graphics right from your design tool with Macaw events and animation support.

Resources

Docs

We're working hard to provide full documentation. Currently you can take a look at the following docs:

• Getting started guide
• Render SVG file
• Content animation
• Morphing animation

Posts

• Replicating Apple Design Awarded Applications
• How friendly can drawing API be on iOS?
• Macaw iOS Library: Morphing Animations

Examples

Macaw-Examples is a repository where you can find various usages of the Macaw library from simple charts to the complex periodic table.

Requirements

• iOS 9.0+
• Mac OS X 10.11+
• Xcode 7.3+

Installation

CocoaPods

To install it, simply add the following line to your Podfile:

pod "Macaw", "0.9.7"

Carthage

github "Exyte/Macaw" ~> 0.9.7

Building from sources

To build Macaw from sources:

• clone the repo [email protected]:exyte/Macaw.git
• open terminal and run cd <MacawRepo>/Example/
• run pod install to install all dependencies
• run open Example.xcworkspace/ to open project in the Xcode

Change Log

You can find list of all changes by version in the Change Log

License

Macaw is available under the MIT license. See the LICENSE file for more info.

macaw's Issues

Review Macaw API

• MacawView
• scene: Shape/Text/Image/Group
• geometry
• draw
• effects
• animation
• events
• SVG

Add reverse animation generators

Clean up scene/draw/geometry

scene:

• Rename Group.contentsVar to Group.contents
• Node.pos needs a better name
• TBD: Remove Drawable.bounds from the model
• Make Text.font optional
• Image.xAlign/yAlign/aspectRatio properties are too complicated and clumsy

draw:

• Remove AspectRatio
• Move static properties/methods of Color to Fill
• Remove unnecessary FontStyle and FontWeight
• Rethink Font.bold/italic/underline/strike properties. Need a better solution for Macaw.
• Gradient.userSpace needs a better name

geometry:

• Make sure we use consistent system for every angle
• Add Sector class
• Transform.invert should return nil when doesn't exist
• Move -> MoveTo, PLine -> LineTo
• Rethink Path API: do we really need excess model?

SVG transformation parsing

ObservableList

• Generation
• Implementation

Investigate animation layer anchor point problem

All coordinates inside layer are always positive. With anchor point (0, 0). In case of rotation transform it leads to incorrect layer position

Improve Animation API

Problems:

• Current Animation API requires user to say same things twice which makes it more error prone:

// need to say 'opacity' twice, need to say 'node' twice
OpacityAnimation(animatedNode: node, observableValue: node.opacityVar, ...)
// it allows user to make errors
OpacityAnimation(animatedNode: node1, observableValue: node2.opacityVar, ...)

• Animation needs registration through MacawView.addAnimation which makes API imperative VS declarative.

Proposal:

For every animatable property use AnimatableVariable, which has reference to Node, understand property type and has 'animate' method:

public class AnimatableVariable<T: Interpolable> : Variable<T> {
    public func animate(from: T, to: T, during: Double, ...) -> Animation
}

This method automatically register animation in global registry which then delegates to appropriate MacawView.

// current
let animation = OpacityAnimation(animatedNode: ballGroup, observableValue: ballGroup.opacityVar, startValue: 0.1, finalValue: 1.0, animationDuration: 3.0)
view.addAnimation(animation)
...
animation.stop()

// proposed
let animation = ballGroup.opacityVar.animate(from: 0.1, to: 1.0, during: 3.0)
...
animation.stop()

SVG nested <svg> tags parsing

Avoid generation of unnecessary modules

That's what we need:

• draw
• geom2d
• input
• scene

What we DO NOT need:

• layout
• styles
• widgets

Test issue

Nullable by default

Currently Kaway doesn't support non-nullable types which means that all fields should be nullable by default. It's important because currently Group has non-nullable clip field which means it can't be used without clipping.

Radial gradient support

I've added model to the repo. The following code can be useful to draw radial gradient in Macaw:

let context = UIGraphicsGetCurrentContext()
let minSize = min(bounds.size.width, bounds.size.height)
let options: CGGradientDrawingOptions = [.DrawsAfterEndLocation]

// get from stops
let colors: CFArray = [UIColor.redColor().CGColor, UIColor.blueColor().CGColor]
let locations : [CGFloat] = [0.0, 1.0]
let gradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), colors, locations)

// radial gradient parameters
let cx = 0.5  * minSize
let cy = 0.5  * minSize
let fx = 0.25 * minSize
let fy = 0.25 * minSize
let r  = 0.5  * minSize

CGContextDrawRadialGradient(context, gradient, CGPoint(x: fx, y: fy), 0, CGPoint(x: cx, y: cy), r, options)

Image rendering

Events support

Integrate RxSwift in generated model

Implement node frame calculation adjusted by parent nodes

ArcSegment: PathSegment

Every property should have reasonable default value

For example, Font and Fill don't have default values.

Invalid type of Font bold/italic/... properties

Currently: NSObject, expect: Bool.

Implement proper animation progress state calculation for "autoreverse" and "repeatCount" options

Animation support

let c = Circle(...) let animation = Animation(c, c.rProperty, 0, 100, 10s) let view = MacawView(c, animation) view.addAnimation(anotherAnimation)

Transform property of scene root is ignored

This makes examples too difficult, so need to be done before release.

All classes should be public

Otherwise they are not accessible from another project.

Signals API + technical details

• Provide API for all kind of events (tap, swipe, pinch, zoom, etc)
• Technical details about implementation

Use default values in constructors

In Kaway every type has default value. Please use this value (or field default) in constructor. Currently objects with 5+ fields really hard to initialize.

Remove model/input classes.

Gradients support

Implement proper animation layer size calculation.

Check rotation case.

MacawView doesn't refresh on scene updates

For example, Node.place changes ignored.

Implement DropShadow effect rendering

See DropShadow class, the API is similar to CALayer.shadow... properties.

Animation should accept Node (not only Group)

Arc rendering for ellipse

Fix multiple inheritance

For example,
class Group: Node, Parent { }

Clip Support

Node.clip: Locus

Render all Macaw geometry (except for Path)

Path will be tracked in a separate issue.

Implement GaussianBlur effect rendering

See GaussianBlur and Node.effect. Useful links:

https://dzone.com/articles/applying-gaussian-blur-to-uiviews-with-swift-proto
https://www.raywenderlich.com/84043/ios-8-visual-effects-tutorial

SVG Support

• nested svg tags parsing
• viewbox parsing
• gradients
• clipping
• defs
• text tspan
• opacity

Render simple rectangle with Macaw

Render Path

Remove old classes during generation

If some classes removed from Kaway sources (like Parent) they should be removed from the Macaw sources during generation.

Text rendering

Node.opacity doesn't work for images

Code review + code style of the project

We should make sure that we are using the same code style through whole project

Effects support

<feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.6 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>

First argument should be named in every Macaw method

We should you Swift 3.0 policy for this.

Creating animation keyframes in non-UI thread

Add super.init call

For example, check out Quadratic

Implement transform animation for absolute value.

Currently only relative transformation supported.

Implement utils for node center rotation transform generation

Read me + basic wiki documentation

• Read me
• MacawView
• scene
• geometry
• draw
• effects
• animation
• events
• SVG