How to draw emojis like the Lock Screen customisation?

On iOS you can create a new Lock Screen that contains a bunch of emoji, and they'll get put on the screen in a repeating pattern, like this:

When you have two or more emoji they're placed in alternating patterns, like this:

How do I write something like that? I need to handle up to three emoji, and I need the canvas as large as the device's screen, and it needs to be saved as an image. Thanks!

(I've already written an emojiToImage() extension on String, but it just plonks one massive emoji in the middle of an image, so I'm doing something wrong there.)

Answered by darkpaw in 818529022

Never mind, I figured it out, but it's too much code to post here. But, basically, you plonk an emoji somewhere on the screen, then put six more of them in six positions every 60º around the original one: 0º (top), 60º (top right), 120º (bottom right, 180º (bottom), 240º (bottom left), and 300º (top left).

Figure out how the pattern should look, i.e. which of those six are the first character, which are the second, etc. up to seven characters or whatever limit you want.

Use the Canvas { context, size in to draw the characters, then snapshot it:

let uiImage = MyCanvasView(bgColour: Color.whatever, text: whateverText)
	.background(Color.whatever)
	.drawingGroup(opaque: true).snapshot()
Accepted Answer

Never mind, I figured it out, but it's too much code to post here. But, basically, you plonk an emoji somewhere on the screen, then put six more of them in six positions every 60º around the original one: 0º (top), 60º (top right), 120º (bottom right, 180º (bottom), 240º (bottom left), and 300º (top left).

Figure out how the pattern should look, i.e. which of those six are the first character, which are the second, etc. up to seven characters or whatever limit you want.

Use the Canvas { context, size in to draw the characters, then snapshot it:

let uiImage = MyCanvasView(bgColour: Color.whatever, text: whateverText)
	.background(Color.whatever)
	.drawingGroup(opaque: true).snapshot()
How to draw emojis like the Lock Screen customisation?
 
 
Q