Use CoreGraphics to draw instead of SwifTUI

[rbdr/patterns] / README.md

diff --git a/README.md b/README.md
index ab61c9f88bca3f06e0ae8fb5b318557e936414c2..900c4b22340adc2f3900b05ba2e2953345dda983 100644 (file)
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 SwiftUI tiling black and white patterns.
 
 
 SwiftUI tiling black and white patterns.
 

-This project contains `Patterns`, which are built out of `Tiles` with a given
+This project contains `PatternView`, which is built out of `Tiles` with a given

 `TileDesign`.
 
 It also includes a `TilePicker` that can be used to control the selected
 `TileDesign`.
 
 It also includes a `TilePicker` that can be used to control the selected


@@ -13,7 +13,7 @@ design.
 The `TileDesign` enum contains the following patterns (shown in the image from
 top left to bottom right)
 
 The `TileDesign` enum contains the following patterns (shown in the image from
 top left to bottom right)
 

-![Image showing the included patterns]
+![Image showing the included patterns](./doc/images/patterns.png)

 
 * `.grid`
 * `.dottedGrid`
 
 * `.grid`
 * `.dottedGrid`


@@ -31,28 +31,33 @@ top left to bottom right)
 
 ## Usage
 
 
 ## Usage
 

-The `Pattern` view will tile the selected design in its frame. It has the
+The `PatternView` view will tile the selected design in its frame. It has the

 following properties:
 
 following properties:
 

-* `design: TileDesign`: **required, @Binding**, which design to tile the frame with.
+* `design: Binding<TileDesign>`: **required**, which design to use to tile the
+  frame.

 * `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
 * `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color.
 * `backgroundColor: Color`: **defaults to `Color.white`**, the background color.
 
 ```
 * `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
 * `foregroundColor: Color`: **defaults to `Color.black`**, the foreground color.
 * `backgroundColor: Color`: **defaults to `Color.white`**, the background color.
 
 ```

-// Pattern using default settings
-Pattern(design: .constant(TileDesign.shadowGrid))
+// PatternView using default settings
+PatternView(design: .constant(TileDesign.shadowGrid))

 
 

-// Pattern using overrides
-Pattern(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
+// PatternView using overrides
+PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)

 ```
 
 ```
 

+### Screenshots of the Patterns
+
+![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png)
+

 ## Using the PatternPicker
 
 The pattern picker view is intended to be used when you want to allow users to
 change the design of the pattern.
 
 ## Using the PatternPicker
 
 The pattern picker view is intended to be used when you want to allow users to
 change the design of the pattern.
 

-* `selectedDesign: TileDesign`: **required, @Binding**, the current selected
+* `selectedDesign: Binding<TileDesign>`: **required**, the current selected

   tile design.
 * `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the
   border around the selected tile design.
   tile design.
 * `selectedColor: Color`: **defaults to `Color.accentColor`**, the color of the
   border around the selected tile design.


@@ -67,7 +72,7 @@ same effect as `Pattern` mentioned above
 
 ...
 
 
 ...
 

-Pattern(design: $pattern)
+PatternView(design: $design)

   .frame(width: 32.0).border(.black)
   .onTapGesture {
     shouldShowPatternPicker = !shouldShowPatternPicker;
   .frame(width: 32.0).border(.black)
   .onTapGesture {
     shouldShowPatternPicker = !shouldShowPatternPicker;


@@ -75,11 +80,15 @@ Pattern(design: $pattern)
   .popover(isPresented: $shouldShowPatternPicker) {
     PatternPicker(selectedDesign: $design)
   }
   .popover(isPresented: $shouldShowPatternPicker) {
     PatternPicker(selectedDesign: $design)
   }

-  .onChange(of: pattern) { _ in
+  .onChange(of: design) { _ in

     shouldShowPatternPicker = false;
   }
 ```
 
     shouldShowPatternPicker = false;
   }
 ```
 

+### Screenshots of the Pattern Picker
+
+![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png)
+

 ## Supported Platforms
 
 * macOS 12+
 ## Supported Platforms
 
 * macOS 12+


@@ -87,3 +96,17 @@ Pattern(design: $pattern)
 * tvOS ?+
 * watchOS 8+
 * catalyst 15+
 * tvOS ?+
 * watchOS 8+
 * catalyst 15+

+
+## The TileImage struct
+
+If you'd like to do other things with the individual tiles, we also provide the
+TileImage struct, which generates a CGImage.
+
+The tiles support similar properties as `PatternView` with the exception that
+
+* `design: TileDesign`: **required**, which design to use to tile the frame.
+* `pixelSize: CGFloat`: **defaults to 2.0**, the size of a pixel in the tile.
+* `foregroundColor: CGColor`: **defaults to black**, the foreground color.
+* `backgroundColor: CGColor`: **defaults to white**, the background color.
+
+![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)