9.9 KiB
| title |
|---|
| Pattern guide |
This short guide will illustrate and explain how patterns work in FreeSewing. Not to be confused with how sewing patterns work — although there's great books about that if you're interested — it's about what goes on under the hood each time a sewing pattern is generated by FreeSewing.
This illustration is a good starting point to gain a better understanding of the structure of a FreeSewing pattern:
```mjs ({ Point, points, Path, paths, options, part }) => {// Draws a w*h box, returns a Path object const box = (name, origin, width, height, classes='fabric') => { let base = height if (width < height) base = width let t = base points[name + 'TopLeft'] = new Point(origin.x, origin.y) points[name + 'BottomLeft'] = new Point(origin.x, origin.y + height) points[name + 'BottomRight'] = new Point( origin.x + width, origin.y + height ) points[name + 'TopRight'] = new Point(origin.x + width, origin.y) points[name + 'Mid'] = points[name + 'TopLeft'].shiftFractionTowards( points[name + 'BottomRight'], 0.5 ) points[name + 'Mid'].y += 3
return new Path()
.move(points[name + 'TopLeft'])
.line(points[name + 'BottomLeft'])
.line(points[name + 'BottomRight'])
.line(points[name + 'TopRight'])
.line(points[name + 'TopLeft'])
.close()
.addClass(classes)
}
// Draws and arrow from to and places text const arrow = (name, text = '') => { let from = points[name + 'From'] let to = points[name + 'To'] from = from.shiftTowards(to, 2) to = to.shiftTowards(from, 2) const base = from.dist(to) const r = 3 points[name + 'Tip1'] = to.shiftTowards(from, 3.5).rotate(r, from) points[name + 'Tip2'] = to.shiftTowards(from, 3.5).rotate(r * -1, from) const path = new Path() .move(from) .line(to) .move(points[name + 'Tip1']) .line(to) .line(points[name + 'Tip2']) .addClass('lining stroke-lg') if (options.focus === name) path.addClass('note')
return text
? path.addText(' ' + text, options.focus === name ? 'fill-note center' : 'center')
: path
}
// Draws a box and handled text placement const drawBox = (name, x, y, width, height, text=true, classes, textClasses='') => { points[name + 'Origin'] = new Point(x, y) paths[name] = box(name, points[name + 'Origin'], width, height, classes) if (text === 'b') { paths[name+'_label'] = new Path() .move(points[name+'BottomLeft']) .line(points[name+'BottomRight']) .addClass('hidden') .addText(name, 'center ' + textClasses) .attr('data-text-dy', -1) } else if (text === 't') { paths[name+'_label'] = new Path() .move(points[name+'TopLeft']) .line(points[name+'TopRight']) .addClass('hidden') .addText(name, 'center ' + textClasses) .attr('data-text-dy', 11) } else if (text === 'r') { paths[name+'_label'] = new Path() .move(points[name+'BottomRight']) .line(points[name+'TopRight']) .addClass('hidden') .addText(name, 'center ' + textClasses) .attr('data-text-dx', -5) } else if (text) points[name + 'Mid'].addText(name, 'center') }
// Settings drawBox('Settings Set 0', -140, -18, 50, 20, 'Settings 0', 'fabric fill-bg') drawBox('Settings Set 1', -140, 6, 50, 20, 'Settings 0', 'fabric fill-bg') const sname = 'Settings' drawBox(sname, -145, -24, 61, 65, 'b', 'fabric', 'text-lg bold') points.arrowDraftFrom = new Point(-84,15) points.arrowDraftTo = new Point(-45, 15) paths.arrowDraft = arrow('arrowDraft', 'draft()')
// Stacks drawBox('Stack 0', -30, -33, 50, 169, 'b', 'mark fill-mark', 'fill-mark') paths['Stack 0'].attr('fill-opacity', 0.2) drawBox('Stack 1', 23, -33, 50, 169, 'b', 'mark fill-mark', 'fill-mark') paths['Stack 1'].attr('fill-opacity', 0.2) drawBox('Stack 2', 76, -33, 50, 169, 'b', 'mark fill-mark', 'fill-mark') paths['Stack 2'].attr('fill-opacity', 0.2)
// Sets drawBox('Set 0', -33, -30, 174, 76, 'r', 'contrast fill-contrast', 'fill-contrast') paths['Set 0'].attr('fill-opacity', 0.2) drawBox('Set 1', -33, 50, 174, 76, 'r', 'contrast fill-contrast', 'fill-contrast') paths['Set 1'].attr('fill-opacity', 0.2)
// Parts set 0 drawBox('Part A (set 0)', -27, -27, 44, 70, 'b', 'note fill-bg') drawBox('points', -24, -24, 38, 12, true, 'note') drawBox('paths', -24, -9, 38, 12, true, 'note') drawBox('snippets', -24, 6, 38, 12, true, 'note')
drawBox('Part B (set 0)', 26, -27, 44, 70, 'b', 'note fill-bg') drawBox(' points ', 29, -24, 38, 12, true, 'note') drawBox(' paths ', 29, -9, 38, 12, true, 'note') drawBox(' snippets ', 29, 6, 38, 12, true, 'note')
drawBox('Part C (set 0)', 79, -27, 44, 70, 'b', 'note fill-bg') drawBox(' points ', 82, -24, 38, 12, true, 'note') drawBox(' paths ', 82, -9, 38, 12, true, 'note') drawBox(' snippets ', 82, 6, 38, 12, true, 'note')
drawBox('setStore 0', -24, 21, 144, 12, true, 'lining fill-lining dashed', 'fill-various') paths['setStore 0'].attr('fill-opacity', 0.2)
// Parts set 1 drawBox('Part A (set 1)', -27, 53, 44, 70, 'b', 'note fill-bg') drawBox(' points', -24, 56, 38, 12, true, 'note') drawBox(' paths', -24, 71, 38, 12, true, 'note') drawBox(' snippets', -24, 86, 38, 12, true, 'note')
drawBox('Part B (set 1)', 26, 53, 44, 70, 'b', 'note fill-bg') drawBox(' points ', 29, 56, 38, 12, true, 'note') drawBox(' paths ', 29, 71, 38, 12, true, 'note') drawBox(' snippets ', 29, 86, 38, 12, true, 'note')
drawBox('Part C (set 1)', 79, 53, 44, 70, 'b', 'note fill-bg') drawBox(' points ', 82, 56, 38, 12, true, 'note') drawBox(' paths ', 82, 71, 38, 12, true, 'note') drawBox(' snippets ', 82, 86, 38, 12, true, 'note')
drawBox('setStore 1', -24, 101, 147, 12, true, 'lining fill-lining dashed', 'fill-various') paths['setStore 1'].attr('fill-opacity', 0.2)
// Pattern drawBox('Pattern Store', -30, -52, 155, 15, true, 'lining fill-lining') paths['Pattern Store'].attr('fill-opacity', 0.2) drawBox('Pattern', -43, -59, 195, 216, 'b', 'fabric stroke-lg', 'text-lg bold')
// Render points.arrowSvgFrom = new Point(154,15) points.arrowSvgTo = new Point(225, -15) paths.arrowSvg = arrow('arrowSvg', 'render()') points.arrowReactFrom = new Point(154,15) points.arrowReactTo = new Point(225, 45) paths.arrowReact = arrow('arrowReact', 'getRenderProps()') drawBox('Render stage', 190, -52, 105, 175, 'b', 'interfacing lashed', 'text-lg bold')
// Render logos points.svg = new Point(225, -15).addText('SVG', 'text-lg bold') points.js = new Point(225, 45).addText("React\nSvelte\nVue\nJS\n...", 'text-lg')
// Prevent clipping paths.unclip = new Path().move(new Point(260, -80))
return part }
</Example>
If it looks like _a lot_ don't despair. There's a lot of repetition, and we'll
work throug the building blocks step by step.
If we look at our image, it can be divided into three areas:
- [The **Settings**](#the-settings) on the left.
- [The **Render stage**](#rendering-your-pattern) on the right
- [The **Pattern**](#anatomy-of-a-pattern)
<Note>
The left and right parts are all about how to integrate FreeSewing in your _frontend_.
In other words, how you'll plug it into your website, or online store, or a mobile
application.
We'll briefly cover those areas in this page. But a deep-dive in those topics
is outside the scope of this guide.
</Note>
## The settings
On the left, we have the **settings** box. It represents the
[settings](/reference/settings) that are provided by the user.
Most of the settings are the same for all designs generated with FreeSewing as they are provided by the core library.
Noteworthy exceptions are the [measurements](/reference/settings/measurements) and [options](/reference/settings/options) keys as they are defined by the pattern design.
In other words, different patterns will required different measurements, and provide different options.
But all patterns will allow users to set the [units](reference/settings/units) (for example).
<Tip>
Settings are provided by passing them to the Pattern contructor
</Tip>
<Note>
##### Multiset support
Since version 3 of FreeSewing, you can pass multiple sets of settings to `Pattern.draft()`.
We call this _multset support_.
In 99% of the cases, you will only have a single set of settings, and you can mostly forget about this feature.
It is typically used to compare different drafts, or to draft for different sets of measurements (for example).
</Note>
## Rendering your pattern
By rendering our pattern, we mean to generate the output to show to the user.
This can be done in two different ways:
### Render to SVG
The core library ships with a renderer that will render your pattern to SVG.
To use it, call [`Pattern.render()`](/reference/api/pattern/render) which will return an SVG string.
### BYOR (bring your own renderer)
If you'd like more fine-grained control over the output, you can use your own renderer.
To do so, call [`Pattern.getRenderProps()`](/reference/api/pattern/getrenderprops) which will return all the data you need to render your pattern in the way you prefer.
<Note compact>
This is what we use on these pages to render with React
</Note>
## The pattern
Last but not least, we've arrived at the central item: the pattern itself.
The pattern is a container that holds all your parts, along with a
(pattern-wide) store.
In reality, your pattern is a _constructor_ that takes the user's settings as
input and will return an instantiated pattern.
That pattern instance will have a `draft()` method which will do the actual work of
drafting the pattern. Once drafted, the pattern can be rendered.
While the pattern does a lot of heavy lifting behind the scenes, we can content
ourselves by understanding its different building blocks:
<ReadMore />