×

注意！页面内容来自https://freesewing.dev/guides/designs/，本站不储存任何内容，为了更好的阅读体验进行在线解析，若有广告出现，请及时反馈。若您觉得侵犯了您的利益，请通知我们进行删除，然后访问 原网页

Skip to main content

Design guide

Hi there and welcome to this guide that explains how FreeSewing designs work.

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 design:

<>:root { --pattern-scale: 1} Settings draft() Stack 0 Stack 1 Stack 2 Set 0 Set 1 Part A (set 0) Part B (set 0) Part C (set 0) Part A (set 1) Part B (set 1) Part C (set 1) Design render() getRenderProps() Render stage Settings Set 0 Settings Set 1 points paths snippets points paths snippets points paths snippets setStore 0 points paths snippets points paths snippets points paths snippets setStore 1 Pattern Store SVG ReactSvelteVueJS...

A schematic overview of what goes on inside a FreeSewing design

If it looks like a lot don't despair. I included all the info on the graphical overviewbut most of it you can safely ignore and consider under the hood unless you want to do some really advanced things with FreeSewing.

If we look at our image through squinted eyeswe can identify three areas:

note

The left and right parts are all about how to integrate FreeSewing in your frontend. In other wordshow you'll plug it into your websiteor online storeor a mobile application.

We'll briefly cover those areas in this page. But a deep-dive into those topics is outside the scope of this guide.

The settings​

On the leftwe have the settings box. It represents the 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 and options keys as they are defined by the pattern design.

In other wordsdifferent patterns will required different measurements and provide different options. But all patterns will allow users to set the units (for example).

tip

Settings are provided by passing them to the Pattern constructor

note
Multiset support​

Since version 3 of FreeSewingyou can pass multiple sets of settings to Pattern.draft(). We call this multset support.

In 99% of the casesyou will only have a single set of settingsand 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).

Rendering your pattern​

By rendering the patternwe 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 itcall Pattern.render() which will return an SVG string.

BYOR (bring your own renderer)​

If you'd like more fine-grained control over the outputyou can use your own renderer.

To do socall Pattern.getRenderProps() which will return all the data you need to render your pattern in the way you prefer.

note

This is what we use on these documentation pages to render with React

The pattern​

Last but not leastwe've arrived at the central item: the pattern itself. The pattern is a container that holds all your partsalong with a (pattern-wide) store.

In realityyour pattern is a 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 draftedthe pattern can be rendered.

While the pattern does a lot of heavy lifting behind the sceneswe can content ourselves by understanding its different building blocks: