]> git.r.bdr.sh - rbdr/patterns/blame - README.md
Use CoreGraphics to draw instead of SwifTUI
[rbdr/patterns] / README.md
CommitLineData
575722f4
RBR
1# Patterns
2
1418fe49
RBR
3SwiftUI tiling black and white patterns.
4
90eb1b21 5This project contains `PatternView`, which is built out of `Tiles` with a given
1418fe49
RBR
6`TileDesign`.
7
8It also includes a `TilePicker` that can be used to control the selected
9design.
10
11## Available Tile Designs
12
13The `TileDesign` enum contains the following patterns (shown in the image from
14top left to bottom right)
15
5c40e23a 16![Image showing the included patterns](./doc/images/patterns.png)
1418fe49
RBR
17
18* `.grid`
19* `.dottedGrid`
20* `.stitch`
21* `.curvedTile`
22* `.brick`
23* `.tile`
24* `.shadowGrid`
25* `.circles`
26* `.trees`
27* `.shingles`
28* `.wicker`
29* `.rhombus`
30* `.balls`
31
32## Usage
33
90eb1b21 34The `PatternView` view will tile the selected design in its frame. It has the
1418fe49
RBR
35following properties:
36
5c40e23a
RBR
37* `design: Binding<TileDesign>`: **required**, which design to use to tile the
38 frame.
1418fe49
RBR
39* `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
40* `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color.
41* `backgroundColor: Color`: **defaults to `Color.white`**, the background color.
42
43```
90eb1b21
RBR
44// PatternView using default settings
45PatternView(design: .constant(TileDesign.shadowGrid))
1418fe49 46
90eb1b21
RBR
47// PatternView using overrides
48PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
1418fe49
RBR
49```
50
5c40e23a
RBR
51### Screenshots of the Patterns
52
53![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png)
54
1418fe49
RBR
55## Using the PatternPicker
56
57The pattern picker view is intended to be used when you want to allow users to
58change the design of the pattern.
59
5c40e23a 60* `selectedDesign: Binding<TileDesign>`: **required**, the current selected
1418fe49
RBR
61 tile design.
62* `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the
63 border around the selected tile design.
64
65It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the
66same effect as `Pattern` mentioned above
67
68
69```
70@State var design: TileDesign = .brick
71@State var shouldShowPatternPicker = false
72
73...
74
42815337 75PatternView(design: $design)
1418fe49
RBR
76 .frame(width: 32.0).border(.black)
77 .onTapGesture {
78 shouldShowPatternPicker = !shouldShowPatternPicker;
79 }
80 .popover(isPresented: $shouldShowPatternPicker) {
81 PatternPicker(selectedDesign: $design)
82 }
42815337 83 .onChange(of: design) { _ in
1418fe49
RBR
84 shouldShowPatternPicker = false;
85 }
86```
68ce4355 87
5c40e23a
RBR
88### Screenshots of the Pattern Picker
89
90![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png)
91
68ce4355
RBR
92## Supported Platforms
93
94* macOS 12+
95* iOS 15+
96* tvOS ?+
97* watchOS 8+
98* catalyst 15+
5c40e23a 99
ba4ee0ed 100## The TileImage struct
5c40e23a
RBR
101
102If you'd like to do other things with the individual tiles, we also provide the
ba4ee0ed 103TileImage struct, which generates a CGImage.
5c40e23a 104
ba4ee0ed
RBR
105The tiles support similar properties as `PatternView` with the exception that
106
107* `design: TileDesign`: **required**, which design to use to tile the frame.
108* `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
109* `foregroundColor: CGColor`: **defaults to black**, the foreground color.
110* `backgroundColor: CGColor`: **defaults to white**, the background color.
5c40e23a
RBR
111
112![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)