Emoji Canvas

A bonus app to go out on. Drag emoji from a tray onto a canvas, position them anywhere, and build a little scene. Free-form, open-ended, and a great playground for the gesture and layout skills from the whole book.

What you'll build

A canvas area where emoji can be placed and moved freely. A tray of emoji to choose from at the bottom. Tap an emoji to add it to the canvas; drag it once it's placed.

Key concepts

An array of placed items — Each emoji on the canvas is a struct with a character and a position.

struct PlacedEmoji: Identifiable {
    let id = UUID()
    let emoji: String
    var position: CGPoint
}

@State var placed: [PlacedEmoji] = []

Tap to add, drag to move — Tapping an emoji in the tray appends a new PlacedEmoji to placed. A DragGesture on each canvas item updates its position.

ForEach($placed) { $item in
    Text(item.emoji)
        .font(.system(size: 40))
        .position(item.position)
        .gesture(
            DragGesture()
                .onChanged { item.position = $0.location }
        )
}

$ on ForEach — The $placed binding syntax gives you a binding to each element, so you can modify item.position in place without an index lookup.

GeometryReader — Read the size of the canvas so newly added emoji appear in the center.

GeometryReader { geo in
    // use geo.size.width / 2, geo.size.height / 2 as default position
}

An open-ended finish

There's no score, no win condition, no right answer. Emoji Canvas is a toy — something to play with and hand to someone else. Building things people just enjoy is one of the best reasons to write software.

Download and run it

Open the Playgrounds file from GitHub, hit Run, and make something fun.