Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emoacht/stripemaker
A design tool to create the tile visuals for striped background
https://github.com/emoacht/stripemaker
stripe stripes svg tile xaml
Last synced: about 5 hours ago
JSON representation
A design tool to create the tile visuals for striped background
- Host: GitHub
- URL: https://github.com/emoacht/stripemaker
- Owner: emoacht
- License: mit
- Created: 2022-02-20T13:13:53.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T14:00:05.000Z (almost 2 years ago)
- Last Synced: 2023-08-26T21:59:00.673Z (about 1 year ago)
- Topics: stripe, stripes, svg, tile, xaml
- Language: C#
- Homepage: https://www.microsoft.com/store/apps/9NV83VMN99TR
- Size: 8.8 MB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Stripe Maker
Stripe Maker is a design tool to create the tile visuals for striped background. It enables the user to try and see the elements of visuals for stripes with interactive live preview.
(Microsoft Store version)
## Requirements
* Windows 10 or newer
* .NET Framework 4.8
## Download
### Microsoft Store version
### Standard version
:floppy_disk: Latest release
## Usage
The visuals for stripes can be defined by 3 elements:
* Offset from the origin (left-top corner) to cross line in the middle
* Width of tile
* Height of tile
You can adjust the offset (top slider), width (bottom slider) and height (left slider) to change the angle, thickness and distance of stripes. The change will be instantly reflected to preview area. In Microsoft Store version, you can change and swap colors, and change direction.
https://user-images.githubusercontent.com/7205690/211199362-e927ae0b-4f58-48fe-89a3-d2385f3edd6d.mp4
Once you get a satisfactory combination of elements, you can copy its path data usable for XAML and SVG. Let's say you want to fill an area of 300x240 with rotationally symmetric stripes and adjust elements as shown below.
The path data would be something like below.
```
M 0,0 L 65.88,79.76 L 65.88,36.55 L 35.69,0 z M 0,79.76 L 35.69,79.76 L 0,36.55 z
```
This is in [Path Markup Syntax](https://docs.microsoft.com/en-us/dotnet/desktop/wpf/graphics-multimedia/path-markup-syntax) for XAML and it works for SVG as well.
### For XAML
You can use this data for `VisualBrush` to fill the background of a window. Set this data to `Data` property of `Path` for VisualBrush's `Visual` property and make the width and height of VisualBrush's `Viewport` property to match those of this data.
```xml
```
Then this window will look like as follows:
### For SVG
You can use this data for `pattern` to fill `rect`.
```xml
```
This SVG will produce the same background as shown above.
FYI, each pair of numbers delimited by a comma (In fact, it can be a space.) represents (x,y) coordinates and this data draws two simple shapes as described below.
| Command | Description |
|---------------------------------------|------------------------------------------------------------|
| M 0,0 | Start drawing a trapezoid from (0,0) |
| L 65.88,79.76 L 65.88,36.55 L 35.69,0 | Draw line to (65.88,79.76), to (65.88,36.55), to (35.69,0) |
| z | Close drawing |
| M 0,79.76 | Start drawing a triangle from (0,79.76) |
| L 35.69,79.76 L 0,36.55 | Draw line to (35.69,79.76), to (0,36.55) |
| z | Close drawing |
Additionally, in Microsoft Store version, you can save the tile image to a file in PNG format.
## Histroy
v1.2 2023-1-8
- Enable to change direction
v1.1 2022-3-27
- Enable to directly change angle
v1.0 2022-2-20
- Initial release
## License
- MIT License
## Libraries
- [XamlBehaviors for WPF](https://github.com/microsoft/XamlBehaviorsWpf)
- [PixiEditor ColorPicker](https://github.com/PixiEditor/ColorPicker)
## Developer
- emoacht (emotom[atmark]pobox.com)