Swift Bezier Curve View

Bezier curves are very handy to point to objects in your interface, for onboarding and help screens:

Create and edit arrows to light up your interface, with visual preview in Xcode Storyboard and Interface Builder.

Technical Discussion

In Interface Builder, position a BezierCurveView and drop two BezierCurveHandle inside it.

1. BezierCurveView represents the drawing space. It can be as large as the UIWindow to prevent curve clipping.
2. BezierCurveHandle represents the two handles required by a Cubic Bezier Curve. It adopts the BezierHandleProtocol, which provides control point information.

The combination BezierCurveView + 2 BezierCurveHandle yields live preview in Interface Builder, with unprecedented flexibility: . Because a BezierCurveHandle is itself a UIView, it can be controlled by AutoLayout constraints, and thus adapt automatically to changes in sizes and orientations, with exactly 0 lines of code. And since these handles are themselves extensions to the BezierHandleProtocol, you can tailor any of your UIView subclasses to control handles as well.

Notes

1. Make sure that a BezierCurveView contains exactly two subviews adopting BezierHandleProtocol for any drawing to take place
2. In most situations, BezierCurveView and BezierCurveHandle background color should be clear
3. BezierCurveView will be refreshed any time its frame is updated, providing dynamic animations: (replay)

Bezier Curve View Properties

IBInspectable	What it does
lineWidth	bezier curve thickness ; default is 1.5
tintColor	color of the curve ; defaults to black if absent

Bezier Handle View Properties

IBInspectable	What it does
dx	horizontal component of the control point ; default is 0
dy	vertical component of the control point ; default is -10.0 (control point is 10.0 pixels below the anchor
shape	one of none, arrowHead, circle or disc, default is none
size	dimensions of the shape: a shaft length for the arrow, a radius for circles and discs (†) ; default is 15.0

(†) The bezier curve end point is adjusted to start from the end of the shape

Installation

Use Cocoapods or include the source file directly. Cocoapods preferred.

API Compatibility: version 4.x introduces BezierHandleProtocol, BezierHandleView and BezierCurveView, deprecating 3.x BezierCurveArrowView.

Demo

Run pod install in the BezierCurveExample directory, open BezierCurveExample.xcworkspace and run.

Getting Help

Search for BezierCurveView answers on Stack Overflow, or ask questions to be adressed by the community. You can also contact the author.