ab3204f9f1
The replaces the NextJS site powering FreeSewing.dev with a Docusaurus setup. It's part of my efforts to simplify FreeSewing's setup so we can focus on our core value proposition.
137 lines
3.4 KiB
Text
137 lines
3.4 KiB
Text
---
|
|
title: Trace an existing pattern
|
|
---
|
|
|
|
Converting an existing pattern into a FreeSewing pattern is really a job in two
|
|
parts:
|
|
|
|
- Recreate the pattern's shape
|
|
- Convert it to a parametric design
|
|
|
|
On this page, we'll focus on recreating the original pattern's shape.
|
|
|
|
## Step 1: Convert the original pattern to SVG
|
|
|
|
If you have an existing digital pattern, save or export it as an SVG. If you
|
|
have a paper pattern, you can scan it or take a picture and then trace the
|
|
outline, then save it as SVG.
|
|
|
|
Let's say we've save the original pattern as `original.svg`.
|
|
|
|
:::note
|
|
|
|
[Inkscape](https://inkscape.org/) is a free SVG editor that can both import a
|
|
variety of formats and save them as SVG, as well as trace the lines in a
|
|
picture.
|
|
|
|
:::
|
|
|
|
:::tip
|
|
When saving in Inkscape, use the **Optimized SVG** format
|
|
:::
|
|
|
|
## Step 2: Convert the SVG file to JavaScript
|
|
|
|
Don't panic, this will be easy.
|
|
|
|
- Open the `original.svg` file in your favorite editor
|
|
|
|
```txt
|
|
<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
|
|
...
|
|
</svg>
|
|
```
|
|
|
|
- Remove everything before the opening `svg` tag
|
|
- Give the svg tag an `id` attribute, and set the value to something you will remember later. For example `bg`.
|
|
- Add a line at the top of the file that contains <code>export const background = `</code>
|
|
- Add a line at the bottom of the file that contains <code>`</code>
|
|
- Save the file as `original.mjs`
|
|
|
|
Now your SVG is a JavaScript file:
|
|
|
|
```js
|
|
export const background = `
|
|
<svg id='bg' width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
|
|
...
|
|
</svg>
|
|
`
|
|
```
|
|
|
|
## Step 3: Load the SVG as a snippet
|
|
|
|
You can't just inject raw SVG into a FreeSewing design. But you can add it as
|
|
a snippet, and then include that snippet in your code.
|
|
|
|
To do so, we're going to:
|
|
|
|
- Import our SVG into (the JS file holding) our part
|
|
|
|
```js
|
|
import { background } from './original.mjs'
|
|
```
|
|
|
|
- Create a plugin that will add it as a snippet
|
|
|
|
```js
|
|
const bgPlugin = {
|
|
name: 'svgBackgroundPlugin',
|
|
version: 1,
|
|
hooks: {
|
|
preRender: function (svg) {
|
|
svg.defs.setIfUnset( 'background', background)
|
|
},
|
|
},
|
|
}
|
|
```
|
|
|
|
- Load the plugin in our part
|
|
|
|
```js
|
|
export const part = {
|
|
name: 'example.part',
|
|
draft: draftPart,
|
|
plugins: [
|
|
// Here's our plugin to add the snippet
|
|
bgPlugin,
|
|
]
|
|
}
|
|
```
|
|
|
|
## Step 4: Use the snippet in our draft method
|
|
|
|
```js
|
|
function draftPart ({ Point, points, Path, paths, part }) {
|
|
|
|
// The 'bg' that we use here must match the id we set on the SVG tag
|
|
snippets.background = new Snippet('bg', new Point(0,0))
|
|
|
|
// Snippets aren't taken into account for the bounding box
|
|
points.anchor = new Point(0,0)
|
|
paths.diagonal = new Path()
|
|
.move(points.anchor)
|
|
.line(new Point(2000,2000))
|
|
.setClass('hidden')
|
|
|
|
// Develop your part here
|
|
|
|
return part
|
|
}
|
|
```
|
|
|
|
## Summary
|
|
|
|
What we want is for our original pattern to be shown as the background of our development environment.
|
|
To do so, we needed to take a couple of steps:
|
|
|
|
- Turn it into SVG: Because FreeSewing patterns are SVG
|
|
- Turn it into a JavaScript file: Because you can't `import` an SVG like that
|
|
- Give it an `id`: So we can use that to reference it when adding the snippet
|
|
- `import` the SVG into our part
|
|
- Create a plugin to add it as a snippet
|
|
- Add the plugin to our part
|
|
- Use the snippet in our part's draft method
|
|
|
|
:::warning
|
|
Be mindful of the scale of the background SVG when using this technique
|
|
:::
|