Leveraging touch input for drawing apps

At a glance

Project structure

SpeedSketch/
├── CanvasMainViewController.swift
├── StrokeGestureRecognizer.swift
├── StrokeCollection.swift
├── CGDrawingEngine.swift
├── CanvasContainerView.swift
├── RingControl.swift
├── RingView.swift
├── CGMathExtensions.swift
└── AppDelegate.swift

Structure observations

• Input capture, stroke data, and Core Graphics rendering are separate types even though one controller composes them.
• StrokeCollection.swift groups aggregate/value/segment/iterator types that evolve together.
• Ring-control files own tool selection UI; CGMathExtensions.swift keeps vector arithmetic out of rendering logic.

Overall architecture

flowchart LR
    Touch["Finger or Pencil UITouch"] --> FingerGR["finger StrokeGestureRecognizer"]
    Touch --> PencilGR["pencil StrokeGestureRecognizer"]
    Event["UIEvent"] --> Coalesced["coalesced samples"]
    Event --> Predicted["predicted samples"]
    Coalesced --> FingerGR
    Predicted --> PencilGR
    FingerGR --> Stroke["Stroke"]
    PencilGR --> Stroke
    Stroke --> Controller["CanvasMainViewController"]
    Controller --> Collection["StrokeCollection"]
    Collection --> Renderer["StrokeCGView"]
    Tool["RingControl"] -->|display option| Renderer
    Renderer --> Segments["Stroke Sequence of StrokeSegment"]
    Segments --> CoreGraphics["Core Graphics + dirty rects"]

Reference code

SpeedSketch/StrokeGestureRecognizer.swift:70 — the recognizer expands one event into coalesced real samples followed by disposable predictions.

let view = ensuredReferenceView
if collectsCoalescedTouches {
    if let event = event {
        let coalescedTouches = event.coalescedTouches(for: touchToAppend)!
        let lastIndex = coalescedTouches.count - 1
        for index in 0..<lastIndex {
            saveStrokeSample(stroke: stroke, touch: coalescedTouches[index],
                             view: view, coalesced: true, predicted: false)
        }
        saveStrokeSample(stroke: stroke, touch: coalescedTouches[lastIndex],
                         view: view, coalesced: false, predicted: false)
    }
} else {
    saveStrokeSample(stroke: stroke, touch: touchToAppend,
                     view: view, coalesced: false, predicted: false)
}

if usesPredictedSamples && stroke.state == .active {
    if let predictedTouches = event?.predictedTouches(for: touchToAppend) {
        for touch in predictedTouches {
            saveStrokeSample(stroke: stroke, touch: touch, view: view,
                             coalesced: false, predicted: true)
        }
    }
}

Interpretation

The recognizer is an input adapter, not a renderer. It normalizes UIKit events into stable model values; the controller only moves completed/active strokes into the collection and tells the view which model to display.

Ownership and state

classDiagram
    CanvasMainViewController *-- StrokeGestureRecognizer : finger and pencil
    CanvasMainViewController *-- StrokeCollection : source model
    CanvasMainViewController *-- StrokeCGView : renderer
    CanvasMainViewController *-- CanvasContainerView : scroll content
    CanvasMainViewController o-- RingControl : storyboard tool
    StrokeGestureRecognizer *-- Stroke : current aggregate
    StrokeGestureRecognizer o-- UITouch : tracked touch
    StrokeCollection *-- Stroke : active and completed
    Stroke *-- StrokeSample : real and predicted arrays
    Stroke ..|> Sequence
    StrokeSegmentIterator ..|> IteratorProtocol
    StrokeCGView o-- StrokeCollection : displayed reference

Ownership evidence

SpeedSketch/CanvasMainViewController.swift:19 — the screen controller is the composition root and retains input, model, renderer, and canvas components.

var fingerStrokeRecognizer: StrokeGestureRecognizer!
var pencilStrokeRecognizer: StrokeGestureRecognizer!

@IBOutlet var pencilButton: UIButton!
@IBOutlet var scrollView: UIScrollView!
@IBOutlet var separatorView: UIView!

var strokeCollection = StrokeCollection()
var canvasContainerView: CanvasContainerView!

Class and protocol design

There is no app-defined protocol. Protocol-oriented behavior uses Swift standard contracts (Sequence, IteratorProtocol, CustomStringConvertible) plus UIKit delegates; the segment iterator is the most architectural conformance because it decouples model storage from rendering traversal.

Access control

Reference code

SpeedSketch/StrokeCollection.swift:257 — iterator mechanics are private even though the iterator itself satisfies a target-visible standard protocol.

class StrokeSegmentIterator: IteratorProtocol {
    // ...
}

Logic ownership and placement

Design patterns

Naming conventions

• The data hierarchy is singular/plural: StrokeCollection, Stroke, StrokeSample, and StrokeSegment.
• Input roles are explicit in instance names: fingerStrokeRecognizer and pencilStrokeRecognizer.
• activeStroke, predictedSamples, and sampleIndicesExpectingUpdates name lifecycle state precisely.
• Renderer commands use draw, setNeedsDisplay, dirtyRects, and prepareToDraw consistently.

Architecture takeaways

• Normalize raw touch streams into model values before rendering.
• Give actual, predicted, and pending-estimate samples explicit representation and update paths.
• Use Sequence to hide renderer-specific lookahead traversal behind the model.
• Keep algorithmic draw state private and let a screen-level composition root coordinate modes and UIKit objects.

Source map

• Official Apple documentation