git.r.bdr.sh - rbdr/patterns/blame_incremental

... / ...

Commit	Line	Data
	1	# Patterns
	2
	3	SwiftUI tiling black and white patterns.
	4
	5	This project contains `PatternView`, which is built out of `Tiles` with a given
	6	`TileDesign`.
	7
	8	It also includes a `TilePicker` that can be used to control the selected
	9	design.
	10
	11	## Available Tile Designs
	12
	13	The `TileDesign` enum contains the following patterns (shown in the image from
	14	top left to bottom right)
	15
	16	![Image showing the included patterns](./doc/images/patterns.png)
	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
	34	The `PatternView` view will tile the selected design in its frame. It has the
	35	following properties:
	36
	37	* `design: Binding<TileDesign>`: required, which design to use to tile the
	38	frame.
	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	```
	44	// PatternView using default settings
	45	PatternView(design: .constant(TileDesign.shadowGrid))
	46
	47	// PatternView using overrides
	48	PatternView(design: $tileDesign, pixelSize: 4.0, foregroundColor: .pink, backgroundColor: .cyan)
	49	```
	50
	51	### Screenshots of the Patterns
	52
	53	![Screenshots of the patterns showing the different overrides](./doc/images/pattern_example.png)
	54
	55	## Using the PatternPicker
	56
	57	The pattern picker view is intended to be used when you want to allow users to
	58	change the design of the pattern.
	59
	60	* `selectedDesign: Binding<TileDesign>`: required, the current selected
	61	tile design.
	62	* `selectedColor: Color`: defaults to `Color.accentColor`, the color of the
	63	border around the selected tile design.
	64
	65	It also has `pixelSize`, `foregroundColor`, and `backgroundColor` with the
	66	same effect as `Pattern` mentioned above
	67
	68
	69	```
	70	@State var design: TileDesign = .brick
	71	@State var shouldShowPatternPicker = false
	72
	73	...
	74
	75	PatternView(design: $design)
	76	.frame(width: 32.0).border(.black)
	77	.onTapGesture {
	78	shouldShowPatternPicker = !shouldShowPatternPicker;
	79	}
	80	.popover(isPresented: $shouldShowPatternPicker) {
	81	PatternPicker(selectedDesign: $design)
	82	}
	83	.onChange(of: design) { _ in
	84	shouldShowPatternPicker = false;
	85	}
	86	```
	87
	88	### Screenshots of the Pattern Picker
	89
	90	![Screenshots of the pattern picker showing the different overrides](./doc/images/pattern_picker_example.png)
	91
	92	## Supported Platforms
	93
	94	* macOS 12+
	95	* iOS 15+
	96	* tvOS ?+
	97	* watchOS 8+
	98	* catalyst 15+
	99
	100	## The TileImage struct
	101
	102	If you'd like to do other things with the individual tiles, we also provide the
	103	TileImage struct, which generates a CGImage.
	104
	105	The 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.
	111
	112	![Screenshots of the tiles showing the different overrides](./doc/images/tile_example.png)