fix(dev): One-liner admonitions
This commit is contained in:
Joost De Cock
parent
a6d656c19e
commit
da41cc0fc9
60 changed files with 860 additions and 659 deletions
|
|
@ -1,59 +1,67 @@
|
|||
---
|
||||
title: "Include Cutting Instructions"
|
||||
title: 'Include Cutting Instructions'
|
||||
---
|
||||
|
||||
To include cutting instructions with your part, use the [annotations plugin](/reference/plugins/annotations) (included by default via [core-plugins](/reference/plugins/core)) to add the `cutlist.addCut` method to your part's [`store`](/reference/api/store/extend).
|
||||
|
||||
:::tipThe [grainline macro](/reference/macros/grainline) and the [cutonfold macro](/reference/macros/cutonfold) will automatically add grain and fold information to the cutting instructions :::
|
||||
:::tip
|
||||
The [grainline macro](/reference/macros/grainline) and the [cutonfold
|
||||
macro](/reference/macros/cutonfold) will automatically add grain and fold
|
||||
information to the cutting instructions
|
||||
:::
|
||||
|
||||
:::tipThese cutting instructions get used by the [title macro](/reference/macros/title), so be sure to add them before adding your part's title. :::
|
||||
:::tip
|
||||
These cutting instructions get used by the [title
|
||||
macro](/reference/macros/title), so be sure to add them before adding your
|
||||
part's title.
|
||||
:::
|
||||
|
||||
:::note
|
||||
<details>
|
||||
<summary>addCut() Parameters</summary>
|
||||
<details>
|
||||
<summary>addCut() Parameters</summary>
|
||||
|
||||
Pass an object to the `store.cutlist.addCut` method with any of the following keys; any you don't provide will be filled with the defaults:
|
||||
|
||||
| Key | Type | Default | Description |
|
||||
| :-- | :--- | :------ | :---------- |
|
||||
| cut | Number\|false | 2 | the number of pieces to cut from the specified material. Pass `false` to clear all cutting instructions for the material |
|
||||
| material | String | 'fabric' | the translation key of the material to cut from |
|
||||
| identical | Boolean | false | should even numbers of pieces be cut in the same direction? false for mirrored |
|
||||
| bias | Boolean | false | should the pieces in these cutting instructions be cut on the bias? 'false' uses grainline instruction or leaves orientation as is |
|
||||
| ignoreOnFold | Boolean | false | should these cutting instructions ignore any cutOnFold information set by the part |
|
||||
|
||||
| Key | Type | Default | Description |
|
||||
| :----------- | :------------ | :------- | :--------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| cut | Number\|false | 2 | the number of pieces to cut from the specified material. Pass `false` to clear all cutting instructions for the material |
|
||||
| material | String | 'fabric' | the translation key of the material to cut from |
|
||||
| identical | Boolean | false | should even numbers of pieces be cut in the same direction? false for mirrored |
|
||||
| bias | Boolean | false | should the pieces in these cutting instructions be cut on the bias? 'false' uses grainline instruction or leaves orientation as is |
|
||||
| ignoreOnFold | Boolean | false | should these cutting instructions ignore any cutOnFold information set by the part |
|
||||
|
||||
You can use any `string` you want for your material, but here are some standard ones we have translation for
|
||||
|
||||
| Key | Translation |
|
||||
|:--|:--|
|
||||
| fabric | Main Fabric |
|
||||
| lining | Lining |
|
||||
| canvas | Canvas |
|
||||
| lmhCanavas | Light to Medium Hair Canvas |
|
||||
| heavyCanvas | Heavyweight Hair Canvas |
|
||||
| interfacing | Interfacing |
|
||||
| plastic | Plastic |
|
||||
| ribbing | Ribbing |
|
||||
| Key | Translation |
|
||||
| :---------- | :-------------------------- |
|
||||
| fabric | Main Fabric |
|
||||
| lining | Lining |
|
||||
| canvas | Canvas |
|
||||
| lmhCanavas | Light to Medium Hair Canvas |
|
||||
| heavyCanvas | Heavyweight Hair Canvas |
|
||||
| interfacing | Interfacing |
|
||||
| plastic | Plastic |
|
||||
| ribbing | Ribbing |
|
||||
|
||||
</details>
|
||||
:::
|
||||
|
||||
|
||||
## Basic Usage
|
||||
|
||||
For simple cutting instructions, you can rely on the default method parameters
|
||||
|
||||
```js
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
draft: ({part, store}) => {
|
||||
// add instructions to cut two mirrored from main fabric
|
||||
store.cutlist.addCut()
|
||||
}
|
||||
name: 'example.front',
|
||||
draft: ({ part, store }) => {
|
||||
// add instructions to cut two mirrored from main fabric
|
||||
store.cutlist.addCut()
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## Intermediate Usage
|
||||
|
||||
For many designs, you'll want more than just "Cut 2 mirrored from Main Fabric"
|
||||
|
||||
### Specifying materials, number of pieces, orientation
|
||||
|
|
@ -62,72 +70,74 @@ You can override the default values to specify different materials, number of pi
|
|||
|
||||
```js
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
draft: ({part, store}) => {
|
||||
// add instructions to cut three identical from lining
|
||||
store.cutlist.addCut({cut: 3, material: 'lining', identical: true})
|
||||
}
|
||||
name: 'example.front',
|
||||
draft: ({ part, store }) => {
|
||||
// add instructions to cut three identical from lining
|
||||
store.cutlist.addCut({ cut: 3, material: 'lining', identical: true })
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
### Instructions for multiple materials
|
||||
|
||||
You can add as many sets of instructions as you need
|
||||
|
||||
```js
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
draft: ({part, store}) => {
|
||||
// add instructions to cut four mirrored from main fabric
|
||||
store.cutlist.addCut({cut: 4})
|
||||
// add instructions to cut three identical from lining
|
||||
store.cutlist.addCut({cut: 3, material: 'lining', identical: true})
|
||||
}
|
||||
name: 'example.front',
|
||||
draft: ({ part, store }) => {
|
||||
// add instructions to cut four mirrored from main fabric
|
||||
store.cutlist.addCut({ cut: 4 })
|
||||
// add instructions to cut three identical from lining
|
||||
store.cutlist.addCut({ cut: 3, material: 'lining', identical: true })
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## Advanced usage
|
||||
|
||||
### Cut some on the fold, some not
|
||||
|
||||
Sometimes you want some pieces cut on the fold and others cut as halves to seam together.
|
||||
|
||||
```js
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
draft: ({part, points, Point, macro, store}) => {
|
||||
// set the cut on fold line
|
||||
points.p1 = new Point(0, 0)
|
||||
points.p2 = new Point(0, 10)
|
||||
name: 'example.front',
|
||||
draft: ({ part, points, Point, macro, store }) => {
|
||||
// set the cut on fold line
|
||||
points.p1 = new Point(0, 0)
|
||||
points.p2 = new Point(0, 10)
|
||||
|
||||
// pieces should be cut on the fold
|
||||
macro('cutonfold', {from: points.p1, to: points.p2})
|
||||
// pieces should be cut on the fold
|
||||
macro('cutonfold', { from: points.p1, to: points.p2 })
|
||||
|
||||
// cut two on the fold
|
||||
store.cutlist.addCut()
|
||||
// cut two, not on the fold
|
||||
store.cutlist.addCut({cut: 2, ignoreOnFold: true})
|
||||
}
|
||||
// cut two on the fold
|
||||
store.cutlist.addCut()
|
||||
// cut two, not on the fold
|
||||
store.cutlist.addCut({ cut: 2, ignoreOnFold: true })
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Cut some on the grain, some on the bias
|
||||
|
||||
You set the grainline on a piece, but you also need some to be cut on the bias
|
||||
|
||||
```js
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
draft: ({part, points, Point, macro, store}) => {
|
||||
// set the cut on fold line
|
||||
points.p1 = new Point(0, 0)
|
||||
points.p2 = new Point(0, 10)
|
||||
name: 'example.front',
|
||||
draft: ({ part, points, Point, macro, store }) => {
|
||||
// set the cut on fold line
|
||||
points.p1 = new Point(0, 0)
|
||||
points.p2 = new Point(0, 10)
|
||||
|
||||
// the grain runs from p1 to p2
|
||||
macro('grainline', {from: points.p1, to: points.p2})
|
||||
// the grain runs from p1 to p2
|
||||
macro('grainline', { from: points.p1, to: points.p2 })
|
||||
|
||||
// cut two mirrored on the grain
|
||||
store.cutlist.addCut()
|
||||
// cut two mirrored on the bias
|
||||
store.cutlist.addCut({cut: 2, bias: true})
|
||||
}
|
||||
// cut two mirrored on the grain
|
||||
store.cutlist.addCut()
|
||||
// cut two mirrored on the bias
|
||||
store.cutlist.addCut({ cut: 2, bias: true })
|
||||
},
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Design
|
||||
title: Design
|
||||
---
|
||||
|
||||
The `Design` named export in FreeSewing's core library is a constructor that
|
||||
|
|
@ -17,7 +17,7 @@ Pattern Design({
|
|||
## Example
|
||||
|
||||
```js
|
||||
const Sorcha = new Design({
|
||||
const Sorcha = new Design({
|
||||
// design configuration here
|
||||
})
|
||||
```
|
||||
|
|
@ -32,12 +32,14 @@ the Design configuration object only requires a `parts` property that should
|
|||
hold an array of parts to include in the Design.
|
||||
|
||||
```js
|
||||
const Sorcha = new Design({
|
||||
parts: [ front, back, sleeve ],
|
||||
const Sorcha = new Design({
|
||||
parts: [front, back, sleeve],
|
||||
})
|
||||
```
|
||||
|
||||
:::tipA Design in FreeSewing is little more than a container for various Parts:::
|
||||
:::tip
|
||||
A Design in FreeSewing is little more than a container for various Parts
|
||||
:::
|
||||
|
||||
Optionally, you can also pass it a `data` attribute
|
||||
to hold any custom data you'd like to add to your Design.
|
||||
|
|
@ -46,20 +48,19 @@ Any `data` you add to the Design constructor will be added
|
|||
to [the Store](/reference/api/store).
|
||||
|
||||
```js
|
||||
const Sorcha = new Design({
|
||||
parts: [ front, back, sleeve ],
|
||||
const Sorcha = new Design({
|
||||
parts: [front, back, sleeve],
|
||||
data: {
|
||||
version: 3,
|
||||
price: 12,
|
||||
currency: 'euro'
|
||||
}
|
||||
currency: 'euro',
|
||||
},
|
||||
})
|
||||
```
|
||||
|
||||
## Notes
|
||||
|
||||
|
||||
The Design constructor is a _super-constructor_.
|
||||
The Design constructor is a _super-constructor_.
|
||||
It will return a constructor method that will a pattern based on your design.
|
||||
|
||||
## Properties
|
||||
|
|
@ -74,4 +75,3 @@ This holds the design configuration as passed to the Design constructor.
|
|||
### Design.patternConfig
|
||||
|
||||
Holds the resolved pattern configuration based on the configuration passed to the Design constructor.
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,13 @@ title: Hiding parts
|
|||
|
||||
The `hide` option of a part's configuration controls how to hide it and/or its dependencies.
|
||||
|
||||
:::tipA hidden part will not be included in the output when it's rendered:::
|
||||
:::tipThe `hide` configuration from parts that you include in your design will always override configuration from inherited parts.:::
|
||||
:::tip
|
||||
A hidden part will not be included in the output when it's rendered
|
||||
:::
|
||||
|
||||
:::tip
|
||||
The `hide` configuration from parts that you include in your design will always override configuration from inherited parts.
|
||||
:::
|
||||
|
||||
## Settings
|
||||
|
||||
|
|
@ -20,12 +25,11 @@ const part = {
|
|||
name: 'example.front',
|
||||
after: [exampleBase],
|
||||
// hide `exampleBase`
|
||||
hide: {after: true},
|
||||
draft: ({ part }) => part
|
||||
hide: { after: true },
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### hide.always
|
||||
|
||||
To hide a specific part that would otherwise not be hidden by other configuration, add its name to the `hide.always` array
|
||||
|
|
@ -37,8 +41,8 @@ const part = {
|
|||
name: 'example.front',
|
||||
after: [exampleBase, exampleBack],
|
||||
// hide `exampleBack`
|
||||
hide: {always: ['example.back']},
|
||||
draft: ({ part }) => part
|
||||
hide: { always: ['example.back'] },
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -53,16 +57,23 @@ const part = {
|
|||
name: 'other.base',
|
||||
from: exampleBase,
|
||||
// hide exampleBase
|
||||
hide: {from: true},
|
||||
draft: ({ part }) => part
|
||||
hide: { from: true },
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
### hide.inherited
|
||||
|
||||
To hide parts that you have not explicitly included in this part that may be pulled in by the explicitly included `from` and `after` parts, set `hide.inherited` to a truthy value.
|
||||
To hide parts that you have not explicitly included in this part that may be
|
||||
pulled in by the explicitly included `from` and `after` parts, set
|
||||
`hide.inherited` to a truthy value.
|
||||
|
||||
:::noteThis setting will hide any part included as `from` or `after` by your explicitly included `from` part or its dependency chain. It will also hide any part included as `from` by your explicitly included `after` part or its dependency chain. It will not hide the `after` parts of `after` parts:::
|
||||
:::note
|
||||
This setting will hide any part included as `from` or `after` by your
|
||||
explicitly included `from` part or its dependency chain. It will also hide any
|
||||
part included as `from` by your explicitly included `after` part or its
|
||||
dependency chain. It will not hide the `after` parts of `after` parts
|
||||
:::
|
||||
|
||||
```js
|
||||
// the "after" chain
|
||||
|
|
@ -109,30 +120,32 @@ const mainBack = {
|
|||
}
|
||||
|
||||
```
|
||||
|
||||
:::tip
|
||||
|
||||
<details>
|
||||
<summary>Need more clarity?</summary>
|
||||
|
||||
In the above example, the dependency tree for the part `example.mainBack` resolves to the following, with `from` dependencies in **bold** and `after` dependencies *italicized*.
|
||||
In the above example, the dependency tree for the part `example.mainBack` resolves to the following, with `from` dependencies in **bold** and `after` dependencies _italicized_.
|
||||
|
||||
| Part | Dependency Type | Hidden |
|
||||
| :---------------------------- | :-------------- | :----- |
|
||||
| example.mainBack | root | false |
|
||||
| - **other.parent** | from | false |
|
||||
| - - **other.grandParent** | inherited from | true |
|
||||
| - - - _other.grandParentBase_ | inherited after | true |
|
||||
| - _example.mainFront_ | after | false |
|
||||
| - - _example.mainFrontBase_ | after | false |
|
||||
| - - **other.mainFront** | inherited from | true |
|
||||
|
||||
| Part | Dependency Type | Hidden |
|
||||
| :---------- | :---------- | :-----|
|
||||
| example.mainBack | root | false |
|
||||
| - **other.parent** | from | false |
|
||||
| - - **other.grandParent** | inherited from | true |
|
||||
| - - - *other.grandParentBase* | inherited after | true |
|
||||
| - *example.mainFront* | after | false |
|
||||
| - - *example.mainFrontBase* | after | false |
|
||||
| - - **other.mainFront** | inherited from | true |
|
||||
Dependencies are considered inherited if they have two or more dashes (-) next to them, and are either **bold** themselves, or underneath a **bold** part.
|
||||
|
||||
Dependencies are considered inherited if they have two or more dashes (-) next to them, and are either **bold** themselves, or underneath a **bold** part.
|
||||
</details>
|
||||
:::
|
||||
|
||||
### hide.never
|
||||
|
||||
To __not__ hide a specific part that would otherwise be hidden by other configuration, add its name to the `hide.never` array
|
||||
To **not** hide a specific part that would otherwise be hidden by other configuration, add its name to the `hide.never` array
|
||||
|
||||
```js
|
||||
import { exampleBase } from './base.mjs'
|
||||
|
|
@ -144,9 +157,9 @@ const part = {
|
|||
// hide exampleBase and exampleBack
|
||||
after: true,
|
||||
// override hiding exampleBack so that it is shown
|
||||
never: ['example.back']
|
||||
never: ['example.back'],
|
||||
},
|
||||
draft: ({ part }) => part
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -158,18 +171,31 @@ To hide the current part, set `hide.self` to a truthy value:
|
|||
const part = {
|
||||
name: 'example.front',
|
||||
// hide `example.front`
|
||||
hide: {self: true},
|
||||
draft: (({ part }) => part)
|
||||
hide: { self: true },
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
## Presets
|
||||
We provide two presets for common hiding configurations. For convenience, you can pass a preset to the `hide` configuration as a string like `hide: <preset name>`, or you can use `import { hidePresets } from '@freesewing.core` and pass `hide: hidePresets.<preset name>`
|
||||
|
||||
:::tip If you don't like to remember strings and you're working in development a environment that has code completion, importing the presets from `@freesewing/core` will help you be sure you're definitely using an available preset :::
|
||||
We provide two presets for common hiding configurations. For convenience, you
|
||||
can pass a preset to the `hide` configuration as a string like `hide: <preset
|
||||
name>`, or you can use `import { hidePresets } from '@freesewing.core` and pass
|
||||
`hide: hidePresets.<preset name>`
|
||||
|
||||
:::tip
|
||||
If you don't like to remember strings and you're working in development a
|
||||
environment that has code completion, importing the presets from
|
||||
`@freesewing/core` will help you be sure you're definitely using an available
|
||||
preset
|
||||
:::
|
||||
|
||||
### HIDE_ALL
|
||||
For a shortcut to setting all `boolean` hiding options ([`after`](#hideafter), [`from`](#hidefrom), [`inherited`](#hideinherited), and [`self`](#hideself)) to true, use `HIDE_ALL`
|
||||
|
||||
For a shortcut to setting all `boolean` hiding options ([`after`](#hideafter),
|
||||
[`from`](#hidefrom), [`inherited`](#hideinherited), and [`self`](#hideself)) to
|
||||
true, use `HIDE_ALL`
|
||||
|
||||
:::note
|
||||
This is equivalent to using
|
||||
|
||||
|
|
@ -181,9 +207,11 @@ This is equivalent to using
|
|||
inherited: true
|
||||
}
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
To use it as an imported preset:
|
||||
|
||||
```js
|
||||
import { hidePresets } from '@freesewing/core'
|
||||
import { exampleBase } from './base.mjs'
|
||||
|
|
@ -200,8 +228,8 @@ const part = {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
To use it as a string
|
||||
|
||||
```js
|
||||
import { exampleBase } from './base.mjs'
|
||||
import { exampleBack } from './back.mjs'
|
||||
|
|
@ -213,11 +241,12 @@ const part = {
|
|||
// hide `example.front`, `exmpleBase`, and `exampleBack`
|
||||
// as well as any inherited parts
|
||||
hide: 'HIDE_ALL',
|
||||
draft: ({ part }) => part
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
### HIDE_TREE
|
||||
|
||||
For a shortcut to setting [`from: true`](#hidefrom) and [`inherited: true`](#hideinherited), use `HIDE_TREE`
|
||||
|
||||
:::note
|
||||
|
|
@ -228,13 +257,16 @@ This is equivalent to using
|
|||
from: true,
|
||||
inherited: true
|
||||
}
|
||||
````
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
:::note RELATED
|
||||
See [`hide.inherited`](#hideinherited) for a full explanation of how that option works
|
||||
:::
|
||||
|
||||
To use it as an imported preset:
|
||||
|
||||
```js
|
||||
import { hidePresets } from '@freesewing/core'
|
||||
import { exampleBase } from './base.mjs'
|
||||
|
|
@ -245,12 +277,12 @@ const part = {
|
|||
from: exampleBase,
|
||||
// hide `exmpleBase`, and all inherited parts
|
||||
hide: hidePresets.HIDE_TREE,
|
||||
draft: ({ part }) => part
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
To use it as a string
|
||||
|
||||
```js
|
||||
import { exampleBase } from './base.mjs'
|
||||
import { exampleBack } from './back.mjs'
|
||||
|
|
@ -260,6 +292,6 @@ const part = {
|
|||
from: exampleBase,
|
||||
// hide `exmpleBase`, and all inherited parts
|
||||
hide: 'HIDE_TREE',
|
||||
draft: ({ part }) => part
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ The `measurements` and `optionalMeasurements` properties on the
|
|||
part configuration object list the part's required and optional
|
||||
measurements respectively.
|
||||
|
||||
:::tipYou should only include what's required by the part itself, not its dependencies:::
|
||||
:::tip
|
||||
You should only include what's required by the part itself, not its dependencies
|
||||
:::
|
||||
|
||||
## measurements
|
||||
|
||||
|
|
@ -16,8 +18,8 @@ that are required to draft the current part.
|
|||
```js
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
measurements: [ 'head', 'chest' ],
|
||||
draft: ({ part }) => part
|
||||
measurements: ['head', 'chest'],
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -31,9 +33,9 @@ import { pluginBust } from '@freesewing/plugin-bust'
|
|||
|
||||
const part = {
|
||||
name: 'example.front',
|
||||
plugins: [ pluginBust ],
|
||||
measurements: [ 'head', 'chest' ],
|
||||
optionalMeasurements: [ 'highBust' ],
|
||||
draft: ({ part }) => part
|
||||
plugins: [pluginBust],
|
||||
measurements: ['head', 'chest'],
|
||||
optionalMeasurements: ['highBust'],
|
||||
draft: ({ part }) => part,
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: "Path._curve()"
|
||||
title: 'Path._curve()'
|
||||
---
|
||||
|
||||
The `Path._curve()` method draws a cubic Bézier curve
|
||||
|
|
@ -13,7 +13,9 @@ so you do not need to provide it.
|
|||
Path path._curve(Point cp2, Point to)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -21,19 +23,20 @@ Path path._curve(Point cp2, Point to)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(5, 20)
|
||||
points.cp2 = new Point(60, 50)
|
||||
points.to = new Point(90, 20)
|
||||
points.from = new Point(5, 20)
|
||||
points.cp2 = new Point(60, 50)
|
||||
points.to = new Point(90, 20)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
._curve(points.cp2, points.to)
|
||||
.setText("Path._curve()", "text-sm center fill-note")
|
||||
.attr("data-text-dy", -1)
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.\_curve(points.cp2, points.to)
|
||||
.setText("Path.\_curve()", "text-sm center fill-note")
|
||||
.attr("data-text-dy", -1)
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
```
|
||||
|
||||
````
|
||||
</Example>
|
||||
|
||||
|
||||
|
|
@ -45,4 +48,4 @@ as the two following calls yield the same result:
|
|||
```js
|
||||
path.curve(point1, point1, point2)
|
||||
path._curve(point1, point2)
|
||||
```
|
||||
````
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ The `Path.addClass()` method adds a CSS class to the path.
|
|||
Path path.addClass(string className)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -18,17 +20,18 @@ Path path.addClass(string className)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(5, 10)
|
||||
points.to = new Point(95, 10)
|
||||
points.from = new Point(5, 10)
|
||||
points.to = new Point(95, 10)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.addClass('note dashed')
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.addClass('note dashed')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
```
|
||||
|
||||
````
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
|
@ -39,4 +42,4 @@ as the two following calls yield the same result:
|
|||
```js
|
||||
path.attr('class', 'fabric')
|
||||
path.addClass('fabric')
|
||||
```
|
||||
````
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ Path path.addText(string text, string className = '')
|
|||
|
||||
The second argument will optionally be used to set the CSS class for the text.
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -22,14 +24,15 @@ The second argument will optionally be used to set the CSS class for the text.
|
|||
points.from = new Point(5, 10)
|
||||
points.to = new Point(95, 10)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.addText('FreeSewing rocks')
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.addText('FreeSewing rocks')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
```
|
||||
|
||||
````
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
|
@ -40,7 +43,7 @@ as the two following calls yield the same result:
|
|||
```js
|
||||
path.attr('data-text', 'Hello')
|
||||
path.addText('Hello')
|
||||
```
|
||||
````
|
||||
|
||||
The difference with [Path.setText()](/reference/api/path/addtext) is that this
|
||||
method will add to the existing text whereas `Path.setText()` will overwrite
|
||||
|
|
|
|||
|
|
@ -18,7 +18,9 @@ Path path.attr(
|
|||
)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -26,19 +28,20 @@ Path path.attr(
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(10, 20)
|
||||
points.cp1 = new Point(20, -10)
|
||||
points.cp2 = new Point(50, 50)
|
||||
points.to = new Point(70, 20)
|
||||
points.from = new Point(10, 20)
|
||||
points.cp1 = new Point(20, -10)
|
||||
points.cp2 = new Point(50, 50)
|
||||
points.to = new Point(70, 20)
|
||||
|
||||
paths.example = new Path()
|
||||
.move(points.from)
|
||||
.curve(points.cp1, points.cp2, points.to)
|
||||
.attr("class", "canvas")
|
||||
.setText("FreeSewing rocks", "text-xs center")
|
||||
paths.example = new Path()
|
||||
.move(points.from)
|
||||
.curve(points.cp1, points.cp2, points.to)
|
||||
.attr("class", "canvas")
|
||||
.setText("FreeSewing rocks", "text-xs center")
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
|
|
@ -54,3 +57,4 @@ all call this method under the hood.
|
|||
|
||||
See [Using Attributes](/howtos/code/attributes)
|
||||
for information about custom Attributes that can be used with Paths.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,10 +11,12 @@ A negative angle results in a clockwise arc.
|
|||
|
||||
:::tip
|
||||
The new endpoint of this path is the same point
|
||||
that
|
||||
that
|
||||
|
||||
```js
|
||||
path.end().rotate(deg, origin)
|
||||
```
|
||||
|
||||
would return.
|
||||
:::
|
||||
|
||||
|
|
@ -24,7 +26,9 @@ would return.
|
|||
Path path.circleSegment(deg, origin)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -48,5 +52,7 @@ paths.helper = new Path()
|
|||
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ The `Path.close()` method closes a path by drawing a straight line from the curr
|
|||
Path path.close()
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -18,18 +20,20 @@ Path path.close()
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(10, 20)
|
||||
points.cp2 = new Point(60, 30)
|
||||
points.to = new Point(90, 20)
|
||||
points.from = new Point(10, 20)
|
||||
points.cp2 = new Point(60, 30)
|
||||
points.to = new Point(90, 20)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
._curve(points.cp2, points.to)
|
||||
.close()
|
||||
.reverse() // To keep text from being upside-down
|
||||
.setText('Path._close()', 'text-sm right fill-note')
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.\_curve(points.cp2, points.to)
|
||||
.close()
|
||||
.reverse() // To keep text from being upside-down
|
||||
.setText('Path.\_close()', 'text-sm right fill-note')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ via two control points to a given endpoint.
|
|||
Path path.curve(Point cp1, Point cp2, Point to)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,17 +21,19 @@ Path path.curve(Point cp1, Point cp2, Point to)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(10, 20)
|
||||
points.cp1 = new Point(40, 0)
|
||||
points.cp2 = new Point(60, 40)
|
||||
points.to = new Point(90, 20)
|
||||
points.from = new Point(10, 20)
|
||||
points.cp1 = new Point(40, 0)
|
||||
points.cp2 = new Point(60, 40)
|
||||
points.to = new Point(90, 20)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.curve(points.cp1, points.cp2, points.to)
|
||||
.setText("Path.curve()", "text-sm center fill-note")
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.curve(points.cp1, points.cp2, points.to)
|
||||
.setText("Path.curve()", "text-sm center fill-note")
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Path.curve_()
|
|||
---
|
||||
|
||||
The `Path.curve_()` method draws a cubic Bézier curve from the current position
|
||||
via two control points to a given endpoint. However, the end control point is
|
||||
via two control points to a given endpoint. However, the end control point is
|
||||
identical to the end point.
|
||||
|
||||
## Signature
|
||||
|
|
@ -12,16 +12,16 @@ identical to the end point.
|
|||
Path path.curve_(Point cp1, Point to)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
||||
<Example caption="Example of the Path.curve\_() method">
|
||||
|
||||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
;({ Point, points, Path, paths, part }) => {
|
||||
points.from = new Point(10, 20)
|
||||
points.cp1 = new Point(40, 0)
|
||||
points.to = new Point(90, 20)
|
||||
|
|
@ -29,12 +29,13 @@ Path path.curve_(Point cp1, Point to)
|
|||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.curve_(points.cp1, points.to)
|
||||
.setText("Path.curve_()", "text-sm center fill-note")
|
||||
.attr("data-text-dy", -1)
|
||||
.setText('Path.curve_()', 'text-sm center fill-note')
|
||||
.attr('data-text-dy', -1)
|
||||
|
||||
return part
|
||||
}
|
||||
```
|
||||
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ The `Path.end()` method returns the Point object at the end of the path.
|
|||
Point path.end()
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -18,20 +20,22 @@ Point path.end()
|
|||
```js
|
||||
({ Point, points, Path, paths, snippets, Snippet, part }) => {
|
||||
|
||||
points.A = new Point(45, 60)
|
||||
points.B = new Point(10, 30)
|
||||
points.BCp2 = new Point(40, 20)
|
||||
points.C = new Point(90, 30)
|
||||
points.CCp1 = new Point(50, -30)
|
||||
points.A = new Point(45, 60)
|
||||
points.B = new Point(10, 30)
|
||||
points.BCp2 = new Point(40, 20)
|
||||
points.C = new Point(90, 30)
|
||||
points.CCp1 = new Point(50, -30)
|
||||
|
||||
paths.demo = new Path()
|
||||
.move(points.A)
|
||||
.line(points.B)
|
||||
.curve(points.BCp2, points.CCp1, points.C)
|
||||
paths.demo = new Path()
|
||||
.move(points.A)
|
||||
.line(points.B)
|
||||
.curve(points.BCp2, points.CCp1, points.C)
|
||||
|
||||
snippets.end = new Snippet("notch", paths.demo.end())
|
||||
snippets.end = new Snippet("notch", paths.demo.end())
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ The `Path.hide()` hides the path so it does not appear in the output.
|
|||
Path path.hide()
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -18,15 +20,17 @@ Path path.hide()
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.top = new Point(50, 0)
|
||||
points.left = new Point (20,50)
|
||||
points.right = new Point (80,50)
|
||||
points.top = new Point(50, 0)
|
||||
points.left = new Point (20,50)
|
||||
points.right = new Point (80,50)
|
||||
|
||||
paths.a = new Path().move(points.top).line(points.right).setText('a')
|
||||
paths.b = new Path().move(points.right).line(points.left).setText('b').hide()
|
||||
paths.c = new Path().move(points.left).line(points.top).setText('c')
|
||||
paths.a = new Path().move(points.top).line(points.right).setText('a')
|
||||
paths.b = new Path().move(points.right).line(points.left).setText('b').hide()
|
||||
paths.c = new Path().move(points.left).line(points.top).setText('c')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,40 +11,43 @@ operation](/reference/api/path/noop) with id `id`.
|
|||
Path path.insop(string id, Path path)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
<Example caption="Example of the Path.insop() method">
|
||||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.left = new Point(10,10)
|
||||
points.dartLeft = new Point(40, 10)
|
||||
points.dartTip = new Point(50, 50)
|
||||
points.dartRight = new Point(60, 10)
|
||||
points.right = new Point(90, 10)
|
||||
points.left = new Point(10,10)
|
||||
points.dartLeft = new Point(40, 10)
|
||||
points.dartTip = new Point(50, 50)
|
||||
points.dartRight = new Point(60, 10)
|
||||
points.right = new Point(90, 10)
|
||||
|
||||
paths.withoutDart = new Path()
|
||||
.move(points.left)
|
||||
.line(points.dartLeft)
|
||||
.noop('dart')
|
||||
.line(points.right)
|
||||
paths.withoutDart = new Path()
|
||||
.move(points.left)
|
||||
.line(points.dartLeft)
|
||||
.noop('dart')
|
||||
.line(points.right)
|
||||
|
||||
paths.withDart = paths.withoutDart
|
||||
.clone()
|
||||
.insop(
|
||||
'dart',
|
||||
new Path()
|
||||
.line(points.dartTip)
|
||||
.line(points.dartRight)
|
||||
)
|
||||
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
|
||||
paths.withDart = paths.withoutDart
|
||||
.clone()
|
||||
.insop(
|
||||
'dart',
|
||||
new Path()
|
||||
.line(points.dartTip)
|
||||
.line(points.dartRight)
|
||||
)
|
||||
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
||||
This is often used to insert darts into a path.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ given point.
|
|||
Path path.line(Point to)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,15 +21,17 @@ Path path.line(Point to)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(10, 10)
|
||||
points.to = new Point(90, 10)
|
||||
points.from = new Point(10, 10)
|
||||
points.to = new Point(90, 10)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.setText("Path.line()", "text-sm center fill-note")
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.setText("Path.line()", "text-sm center fill-note")
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ with [`Path.insop()`](/reference/api/path/insop).
|
|||
Path path.noop(string id)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -20,29 +22,31 @@ Path path.noop(string id)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.left = new Point(10,10)
|
||||
points.dartLeft = new Point(40, 10)
|
||||
points.dartTip = new Point(50, 50)
|
||||
points.dartRight = new Point(60, 10)
|
||||
points.right = new Point(90, 10)
|
||||
points.left = new Point(10,10)
|
||||
points.dartLeft = new Point(40, 10)
|
||||
points.dartTip = new Point(50, 50)
|
||||
points.dartRight = new Point(60, 10)
|
||||
points.right = new Point(90, 10)
|
||||
|
||||
paths.withoutDart = new Path()
|
||||
.move(points.left)
|
||||
.line(points.dartLeft)
|
||||
.noop('dart')
|
||||
.line(points.right)
|
||||
paths.withoutDart = new Path()
|
||||
.move(points.left)
|
||||
.line(points.dartLeft)
|
||||
.noop('dart')
|
||||
.line(points.right)
|
||||
|
||||
paths.withDart = paths.withoutDart
|
||||
.clone()
|
||||
.insop(
|
||||
'dart',
|
||||
new Path()
|
||||
.line(points.dartTip)
|
||||
.line(points.dartRight)
|
||||
)
|
||||
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
|
||||
paths.withDart = paths.withoutDart
|
||||
.clone()
|
||||
.insop(
|
||||
'dart',
|
||||
new Path()
|
||||
.line(points.dartTip)
|
||||
.line(points.dartRight)
|
||||
)
|
||||
.attr('style', 'stroke-width: 2px; stroke-opacity: 0.5; stroke: orange;')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ The `Path.setClass()` method sets the CSS class(es) of the path.
|
|||
Path path.setClass(string className)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -18,17 +20,18 @@ Path path.setClass(string className)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.from = new Point(5, 10)
|
||||
points.to = new Point(95, 10)
|
||||
points.from = new Point(5, 10)
|
||||
points.to = new Point(95, 10)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.setClass('note dashed')
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.setClass('note dashed')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
```
|
||||
|
||||
````
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
|
@ -39,4 +42,4 @@ as the two following calls yield the same result:
|
|||
```js
|
||||
path.attr('class', 'fabric', true)
|
||||
path.setClass('fabric')
|
||||
```
|
||||
````
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ value you pass it.
|
|||
Path path.setHidden(bool hidden = false)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,15 +21,17 @@ Path path.setHidden(bool hidden = false)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.top = new Point(50, 0)
|
||||
points.left = new Point (20,50)
|
||||
points.right = new Point (80,50)
|
||||
points.top = new Point(50, 0)
|
||||
points.left = new Point (20,50)
|
||||
points.right = new Point (80,50)
|
||||
|
||||
paths.a = new Path().move(points.top).line(points.right).setText('a')
|
||||
paths.b = new Path().move(points.right).line(points.left).setText('b').setHidden(true)
|
||||
paths.c = new Path().move(points.left).line(points.top).setText('c')
|
||||
paths.a = new Path().move(points.top).line(points.right).setText('a')
|
||||
paths.b = new Path().move(points.right).line(points.left).setText('b').setHidden(true)
|
||||
paths.c = new Path().move(points.left).line(points.top).setText('c')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ Path path.setText(string text, string className = '')
|
|||
|
||||
The second argument will optionally be used to set the CSS class for the text.
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -22,14 +24,15 @@ The second argument will optionally be used to set the CSS class for the text.
|
|||
points.from = new Point(5, 10)
|
||||
points.to = new Point(95, 10)
|
||||
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.setText('FreeSewing rocks')
|
||||
paths.line = new Path()
|
||||
.move(points.from)
|
||||
.line(points.to)
|
||||
.setText('FreeSewing rocks')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
```
|
||||
|
||||
````
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
|
@ -40,7 +43,7 @@ as the two following calls yield the same result:
|
|||
```js
|
||||
path.attr('data-text', 'Hello')
|
||||
path.setText('Hello')
|
||||
```
|
||||
````
|
||||
|
||||
The difference with [Path.addText()](/reference/api/path/addtext) is that this
|
||||
method will overwrite existing text on the path, whereas `Path.addText()` will
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ A smooth curve means it will use the reflection of the end control point of the
|
|||
Path path.smurve(Point cp2, Point end)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,22 +21,24 @@ Path path.smurve(Point cp2, Point end)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.aFrom = new Point(10, 10)
|
||||
points.aCp1 = new Point(40, 40)
|
||||
points.aCp2 = new Point(70, -20)
|
||||
points.aTo = new Point(100, 10)
|
||||
points.aFrom = new Point(10, 10)
|
||||
points.aCp1 = new Point(40, 40)
|
||||
points.aCp2 = new Point(70, -20)
|
||||
points.aTo = new Point(100, 10)
|
||||
|
||||
points.bCp2 = new Point(50,50)
|
||||
points.bTo = new Point(10,50)
|
||||
points.bCp2 = new Point(50,50)
|
||||
points.bTo = new Point(10,50)
|
||||
|
||||
paths.smurve = new Path()
|
||||
.move(points.aFrom)
|
||||
.curve(points.aCp1, points.aCp2,points.aTo)
|
||||
.smurve(points.bCp2, points.bTo)
|
||||
.reverse() // Puts text at the end
|
||||
.setText('Path.smurve()')
|
||||
paths.smurve = new Path()
|
||||
.move(points.aFrom)
|
||||
.curve(points.aCp1, points.aCp2,points.aTo)
|
||||
.smurve(points.bCp2, points.bTo)
|
||||
.reverse() // Puts text at the end
|
||||
.setText('Path.smurve()')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ A smooth curve means it will use the reflection of the end control point of the
|
|||
Path path.smurve_(Point cp2, Point end)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -21,21 +23,23 @@ Path path.smurve_(Point cp2, Point end)
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.aFrom = new Point(10, 10)
|
||||
points.aCp1 = new Point(40, 40)
|
||||
points.aCp2 = new Point(70, -20)
|
||||
points.aTo = new Point(100, 10)
|
||||
points.aFrom = new Point(10, 10)
|
||||
points.aCp1 = new Point(40, 40)
|
||||
points.aCp2 = new Point(70, -20)
|
||||
points.aTo = new Point(100, 10)
|
||||
|
||||
points.bTo = new Point(10,50)
|
||||
points.bTo = new Point(10,50)
|
||||
|
||||
paths.smurve = new Path()
|
||||
.move(points.aFrom)
|
||||
.curve(points.aCp1, points.aCp2,points.aTo)
|
||||
.smurve_(points.bTo)
|
||||
.reverse() // Puts text at the end
|
||||
.setText('Path.smurve()')
|
||||
paths.smurve = new Path()
|
||||
.move(points.aFrom)
|
||||
.curve(points.aCp1, points.aCp2,points.aTo)
|
||||
.smurve\_(points.bTo)
|
||||
.reverse() // Puts text at the end
|
||||
.setText('Path.smurve()')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ The `Path.start()` method returns the Point object at the start of the path.
|
|||
Point path.start()
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -18,20 +20,22 @@ Point path.start()
|
|||
```js
|
||||
({ Point, points, Path, paths, snippets, Snippet, part }) => {
|
||||
|
||||
points.A = new Point(45, 60)
|
||||
points.B = new Point(10, 30)
|
||||
points.BCp2 = new Point(40, 20)
|
||||
points.C = new Point(90, 30)
|
||||
points.CCp1 = new Point(50, -30)
|
||||
points.A = new Point(45, 60)
|
||||
points.B = new Point(10, 30)
|
||||
points.BCp2 = new Point(40, 20)
|
||||
points.C = new Point(90, 30)
|
||||
points.CCp1 = new Point(50, -30)
|
||||
|
||||
paths.demo = new Path()
|
||||
.move(points.A)
|
||||
.line(points.B)
|
||||
.curve(points.BCp2, points.CCp1, points.C)
|
||||
paths.demo = new Path()
|
||||
.move(points.A)
|
||||
.line(points.B)
|
||||
.curve(points.BCp2, points.CCp1, points.C)
|
||||
|
||||
snippets.end = new Snippet("notch", paths.demo.start())
|
||||
snippets.end = new Snippet("notch", paths.demo.start())
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Path.unhide()
|
||||
---
|
||||
|
||||
The `Path.unhide()` method unhides the path so it appears in the output. By
|
||||
The `Path.unhide()` method unhides the path so it appears in the output. By
|
||||
default, paths are not hidden. So you should only call this on path previously
|
||||
hidden via `Path.hide()`.
|
||||
|
||||
|
|
@ -12,7 +12,9 @@ hidden via `Path.hide()`.
|
|||
Path path.unhide()
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Path` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Path` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -20,15 +22,17 @@ Path path.unhide()
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.top = new Point(50, 0)
|
||||
points.left = new Point (20,50)
|
||||
points.right = new Point (80,50)
|
||||
points.top = new Point(50, 0)
|
||||
points.left = new Point (20,50)
|
||||
points.right = new Point (80,50)
|
||||
|
||||
paths.a = new Path().move(points.top).line(points.right).setText('a')
|
||||
paths.b = new Path().move(points.right).line(points.left).setText('b').hide().unhide()
|
||||
paths.c = new Path().move(points.left).line(points.top).setText('c')
|
||||
paths.a = new Path().move(points.top).line(points.right).setText('a')
|
||||
paths.b = new Path().move(points.right).line(points.left).setText('b').hide().unhide()
|
||||
paths.c = new Path().move(points.left).line(points.top).setText('c')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@ title: Pattern.addPart()
|
|||
The `Pattern.addPart()` method allows you to add a part to a pattern.
|
||||
It has the same effect as passing a part to the Design constructor.
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.addPart() signature
|
||||
|
||||
|
|
@ -16,30 +18,27 @@ Pattern pattern.addPart(object part)
|
|||
## Pattern.addPart() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
const extra = {
|
||||
name: 'aaron.extra',
|
||||
draft: ({ points, Point, paths, Path, part }) => {
|
||||
points.msg = new Point(50,15)
|
||||
.attr('data-text', "I am an extra part")
|
||||
points.msg = new Point(50, 15).attr('data-text', 'I am an extra part')
|
||||
paths.box = new Path()
|
||||
.move(new Point(0,0))
|
||||
.line(new Point(0,30))
|
||||
.line(new Point(100,30))
|
||||
.line(new Point(100,0))
|
||||
.close(new Point(100,0))
|
||||
.move(new Point(0, 0))
|
||||
.line(new Point(0, 30))
|
||||
.line(new Point(100, 30))
|
||||
.line(new Point(100, 0))
|
||||
.close(new Point(100, 0))
|
||||
.addClass('note')
|
||||
|
||||
return part
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const pattern = new Aaron({ measurements }).addPart(extra)
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ making sure to do so in the right order, handle dependencies, resolve
|
|||
options to their absolute values and a number of other housekeeping things
|
||||
that are required for the pattern to be drafted.
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.draft() signature
|
||||
|
||||
|
|
@ -18,13 +20,11 @@ Pattern pattern.draft()
|
|||
## Pattern.draft() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const pattern = new Aaron({ measurements })
|
||||
|
|
|
|||
|
|
@ -5,7 +5,9 @@ title: Pattern.draftPartForSet()
|
|||
A pattern's `draftPartForSet()` method will draft a part using a
|
||||
given set of settings.
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.draftPartForSet() signature
|
||||
|
||||
|
|
@ -16,14 +18,10 @@ Pattern pattern.draftPartForSet(part, set)
|
|||
## Pattern.draftPartForSet() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
// Load a public test settings set from the FreeSewing backend
|
||||
const set = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
)
|
||||
const set = await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
|
||||
const pattern = new Aaron()
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,9 @@ pattern's [lifecycle hooks](/reference/hooks/). It takes the
|
|||
lifecycle hook's name as the first argument and the function as the second.
|
||||
This method will then be triggered by the lifecycle hook.
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.on() signature
|
||||
|
||||
|
|
@ -26,8 +28,8 @@ should pass it.
|
|||
## Pattern.on() example
|
||||
|
||||
```js
|
||||
pattern.on('preRender', function(svg) {
|
||||
svg.style += "svg { background: yellow;}";
|
||||
pattern.on('preRender', function (svg) {
|
||||
svg.style += 'svg { background: yellow;}'
|
||||
})
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ The `Pattern.sample()` method will _sample_ the pattern which means
|
|||
to draft multiple variants of the same pattern, and stack them on
|
||||
top of each other.
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
Under the hood, this method will call one of
|
||||
[Pattern.sampleOption()](/reference/api/pattern/sampleoption),
|
||||
|
|
@ -34,19 +36,17 @@ Pattern pattern.sample()
|
|||
## Pattern.sample() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const pattern = new Aaron({
|
||||
sample: {
|
||||
models: measurements
|
||||
}
|
||||
models: measurements,
|
||||
},
|
||||
})
|
||||
|
||||
const svg = pattern.sample().render()
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ the measurement of your choice between 90% and 110% if the value in the settings
|
|||
The goal of measurement sampling is to understand the impact of a given measurement on a pattern.
|
||||
:::
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.sampleMeasurement() signature
|
||||
|
||||
|
|
@ -24,13 +26,11 @@ Pattern pattern.sampleMeasurement(string measurement)
|
|||
## Pattern.sampleMeasurement() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const pattern = new Aaron({ measurements })
|
||||
|
|
|
|||
|
|
@ -12,7 +12,9 @@ In this particular case, it will draft a variants for each of the models you pas
|
|||
The goal of model sampling is to verify that a pattern grades correctly up and down as sizes change.
|
||||
:::
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.sampleModels() signature
|
||||
|
||||
|
|
@ -52,16 +54,14 @@ identifying your model in the models object.
|
|||
## Pattern.sampleModels() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
const Aaron = new Aaron()
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const svg = aaron.sampleModels(measurements, "34").render()
|
||||
const svg = aaron.sampleModels(measurements, '34').render()
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ to draft multiple variants of the same pattern, and stack them on
|
|||
top of each other.
|
||||
|
||||
In this particular case, the variants it drafts depend
|
||||
on [the type of option](/reference/api/part/config/options/):
|
||||
on [the type of option](/reference/api/part/config/options/):
|
||||
|
||||
- For a Percentage or Degree option, 10 steps will be sampled, between min and max
|
||||
- For a Counter or Millimeter option, a maximum of 10 steps will be sampled, between min and max
|
||||
|
|
@ -20,7 +20,9 @@ The goal of option sampling is to verify the impact of an option on the pattern,
|
|||
its min and max boundaries are correct and its default value is sensible.
|
||||
:::
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.sampleOption() signature
|
||||
|
||||
|
|
@ -31,13 +33,11 @@ Pattern pattern.sampleOption(string option)
|
|||
## Pattern.sampleOption() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const pattern = new Aaron({ measurements })
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ The `Pattern.use()` method will load a FreeSewing plugin.
|
|||
Plugins are a way to extend a pattern's functionality.
|
||||
For more details, refer to [the plugin guide](/guides/plugins/).
|
||||
|
||||
:::noteThis method is chainable as it returns the Pattern object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Pattern object
|
||||
:::
|
||||
|
||||
## Pattern.use() signature
|
||||
|
||||
|
|
@ -22,14 +24,12 @@ you plugin object.
|
|||
## Pattern.use() example
|
||||
|
||||
```js
|
||||
import { Aaron } from "@freesewing/aaron"
|
||||
import { pluginTheme } from "@freesewing/plugin-theme"
|
||||
import { Aaron } from '@freesewing/aaron'
|
||||
import { pluginTheme } from '@freesewing/plugin-theme'
|
||||
|
||||
// Load some public test measurements from the FreeSewing backend
|
||||
const measurements = (
|
||||
await (
|
||||
await fetch("https://backend3.freesewing.org/curated-sets/1.json")
|
||||
).json()
|
||||
await (await fetch('https://backend3.freesewing.org/curated-sets/1.json')).json()
|
||||
).measurements
|
||||
|
||||
const pattern = new Aaron({ measurements }).use(pluginTheme)
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ Point point.addCircle(
|
|||
)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Point` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Point` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -26,18 +28,20 @@ Point point.addCircle(
|
|||
.addCircle(3, 'lining dashed')
|
||||
.addCircle(7, 'mark dashed')
|
||||
|
||||
points.b = new Point(50, 10)
|
||||
.addCircle(1, 'interfacing')
|
||||
.addCircle(3, 'fabric')
|
||||
.addCircle(5, 'lining')
|
||||
.addCircle(7, 'mark')
|
||||
.addCircle(9, 'note')
|
||||
points.b = new Point(50, 10)
|
||||
.addCircle(1, 'interfacing')
|
||||
.addCircle(3, 'fabric')
|
||||
.addCircle(5, 'lining')
|
||||
.addCircle(7, 'mark')
|
||||
.addCircle(9, 'note')
|
||||
|
||||
points.c = new Point(70, 10)
|
||||
.addCircle(3, 'interfacing')
|
||||
.addCircle(7, 'mark lashed')
|
||||
points.c = new Point(70, 10)
|
||||
.addCircle(3, 'interfacing')
|
||||
.addCircle(7, 'mark lashed')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ Point point.addText(
|
|||
)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Point` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Point` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -26,18 +28,19 @@ Point point.addText(
|
|||
.addText('FreeSewing')
|
||||
.addText('rocks')
|
||||
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(points.anchor)
|
||||
.line(points.anchor.shift(0, 80))
|
||||
.addClass('hidden')
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(points.anchor)
|
||||
.line(points.anchor.shift(0, 80))
|
||||
.addClass('hidden')
|
||||
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
||||
Remember to [use translation keys, not text](/guides/best-practices#use-translation-keys)
|
||||
```
|
||||
|
|
|
|||
|
|
@ -18,8 +18,9 @@ Point point.attr(
|
|||
|
||||
If the third parameter is set to `true` it will call [`this.attributes.set()`](/reference/api/attributes/set/) instead, thereby overwriting the value of the attribute.
|
||||
|
||||
|
||||
:::tipThis method is chainable as it returns the `Point` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Point` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -27,18 +28,19 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.anchor = new Point(100, 25)
|
||||
.attr('data-text', 'FreeSewing')
|
||||
.attr('data-text', 'rocks')
|
||||
points.anchor = new Point(100, 25)
|
||||
.attr('data-text', 'FreeSewing')
|
||||
.attr('data-text', 'rocks')
|
||||
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(points.anchor)
|
||||
.line(points.anchor.shift(0, 80))
|
||||
.addClass('hidden')
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(points.anchor)
|
||||
.line(points.anchor.shift(0, 80))
|
||||
.addClass('hidden')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
|
|
@ -46,3 +48,4 @@ If the third parameter is set to `true` it will call [`this.attributes.set()`](/
|
|||
|
||||
See [Using Attributes](/howtos/code/attributes)
|
||||
for information about custom Attributes that can be used with Points.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ attributes as the original point.
|
|||
Point point.clone()
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Point` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Point` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,21 +21,22 @@ Point point.clone()
|
|||
```js
|
||||
({ Point, points, Path, paths, Snippet, snippets, part }) => {
|
||||
|
||||
points.A = new Point(25, 25)
|
||||
.setText("Point A", "text-xl")
|
||||
.attr("data-text-fill-opacity", "0.5")
|
||||
points.B = points.A.clone().setText("Point B")
|
||||
points.A = new Point(25, 25)
|
||||
.setText("Point A", "text-xl")
|
||||
.attr("data-text-fill-opacity", "0.5")
|
||||
points.B = points.A.clone().setText("Point B")
|
||||
|
||||
snippets.x = new Snippet("notch", points.A)
|
||||
snippets.x = new Snippet("notch", points.A)
|
||||
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(new Point(20,10))
|
||||
.move(new Point(75,30))
|
||||
.addClass('hidden')
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(new Point(20,10))
|
||||
.move(new Point(75,30))
|
||||
.addClass('hidden')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
|
|
@ -43,3 +46,4 @@ Point point.clone()
|
|||
The [`Point.copy()`](/reference/api/point/copy/) method will only copy the
|
||||
point's coordinates, whereas this `Point.clone()` method will also copy its
|
||||
attributes.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@ Point point.setCircle(
|
|||
)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Point` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Point` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -29,22 +31,24 @@ Point point.setCircle(
|
|||
```js
|
||||
({ Point, points, part }) => {
|
||||
|
||||
points.a = new Point(30, 10)
|
||||
.setCircle(3, 'lining dashed')
|
||||
.setCircle(7, 'mark dashed')
|
||||
points.a = new Point(30, 10)
|
||||
.setCircle(3, 'lining dashed')
|
||||
.setCircle(7, 'mark dashed')
|
||||
|
||||
points.b = new Point(50, 10)
|
||||
.setCircle(1, 'interfacing')
|
||||
.setCircle(3, 'fabric')
|
||||
.setCircle(5, 'lining')
|
||||
.setCircle(7, 'mark')
|
||||
.setCircle(9, 'note')
|
||||
points.b = new Point(50, 10)
|
||||
.setCircle(1, 'interfacing')
|
||||
.setCircle(3, 'fabric')
|
||||
.setCircle(5, 'lining')
|
||||
.setCircle(7, 'mark')
|
||||
.setCircle(9, 'note')
|
||||
|
||||
points.c = new Point(70, 10)
|
||||
.setCircle(3, 'interfacing')
|
||||
.setCircle(7, 'mark lashed')
|
||||
points.c = new Point(70, 10)
|
||||
.setCircle(3, 'interfacing')
|
||||
.setCircle(7, 'mark lashed')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -15,7 +15,9 @@ Point point.setText(
|
|||
)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Point` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Point` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -23,21 +25,23 @@ Point point.setText(
|
|||
```js
|
||||
({ Point, points, Path, paths, part }) => {
|
||||
|
||||
points.anchor = new Point(100, 25)
|
||||
.setText('FreeSewing')
|
||||
.setText('rocks')
|
||||
points.anchor = new Point(100, 25)
|
||||
.setText('FreeSewing')
|
||||
.setText('rocks')
|
||||
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(points.anchor)
|
||||
.line(points.anchor.shift(0, 80))
|
||||
.addClass('hidden')
|
||||
// Avoid the text getting cropped
|
||||
paths.hidden = new Path()
|
||||
.move(points.anchor)
|
||||
.line(points.anchor.shift(0, 80))
|
||||
.addClass('hidden')
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
## Notes
|
||||
|
||||
Remember to [use translation keys, not text](/guides/best-practices#use-translation-keys)
|
||||
```
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ title: Snippet.attr()
|
|||
---
|
||||
|
||||
The `Snippet.attr()` method can be used to add attributes to the Snippet
|
||||
object. It calls `this.attributes.add()` under the hood, and returns the
|
||||
object. It calls `this.attributes.add()` under the hood, and returns the
|
||||
Snippet object.
|
||||
|
||||
If the third parameter is set to `true` it will call `this.attributes.set()`
|
||||
|
|
@ -13,13 +13,15 @@ instead, thereby overwriting the value of the attribute.
|
|||
|
||||
```js
|
||||
Snippet snippet.attr(
|
||||
string name,
|
||||
mixed value,
|
||||
string name,
|
||||
mixed value,
|
||||
bool overwrite = false
|
||||
)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Snippet` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Snippet` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -27,17 +29,18 @@ Snippet snippet.attr(
|
|||
```js
|
||||
({ Point, points, Path, paths, Snippet, snippets, part }) => {
|
||||
|
||||
snippets.logo = new Snippet('logo', new Point(0,0))
|
||||
.attr("data-scale", 0.75)
|
||||
.attr("data-rotate", 180)
|
||||
snippets.logo = new Snippet('logo', new Point(0,0))
|
||||
.attr("data-scale", 0.75)
|
||||
.attr("data-rotate", 180)
|
||||
|
||||
// Prevent clipping
|
||||
paths.diag = new Path()
|
||||
.move(new Point(-25,-10))
|
||||
.move(new Point(25,35))
|
||||
// Prevent clipping
|
||||
paths.diag = new Path()
|
||||
.move(new Point(-25,-10))
|
||||
.move(new Point(25,35))
|
||||
|
||||
return part
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
|
|
@ -45,3 +48,4 @@ Snippet snippet.attr(
|
|||
See [Using Attributes](/howtos/code/attributes)
|
||||
for information about what Attributes can be used with Snippets.
|
||||
:::
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ sets the `data-rotate` property.
|
|||
Snippet snippet.rotate(rotation, overwrite=true)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Snippet` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Snippet` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,20 +21,22 @@ Snippet snippet.rotate(rotation, overwrite=true)
|
|||
```js
|
||||
({ Point, Path, paths, Snippet, snippets, part }) => {
|
||||
|
||||
for (const i of [0,1,2,3,4,5,6]) {
|
||||
snippets[`demo${i}`] = new Snippet(
|
||||
"logo",
|
||||
new Point(60*i, 0)
|
||||
).rotate(60 * i)
|
||||
}
|
||||
|
||||
// Prevent clipping
|
||||
paths.diag = new Path()
|
||||
.move(new Point(-30,-50))
|
||||
.move(new Point(400,50))
|
||||
|
||||
return part
|
||||
for (const i of [0,1,2,3,4,5,6]) {
|
||||
snippets[`demo${i}`] = new Snippet(
|
||||
"logo",
|
||||
new Point(60*i, 0)
|
||||
).rotate(60 * i)
|
||||
}
|
||||
|
||||
// Prevent clipping
|
||||
paths.diag = new Path()
|
||||
.move(new Point(-30,-50))
|
||||
.move(new Point(400,50))
|
||||
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ sets the `data-scale` property.
|
|||
Snippet snippet.scale(scale, overwrite=true)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Snippet` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Snippet` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -19,20 +21,22 @@ Snippet snippet.scale(scale, overwrite=true)
|
|||
```js
|
||||
({ Point, Path, paths, Snippet, snippets, part }) => {
|
||||
|
||||
for (const i of [1,2,3,4,5,6]) {
|
||||
snippets[`demo${i}`] = new Snippet(
|
||||
"logo",
|
||||
new Point(30*i, 0)
|
||||
).scale(i/10)
|
||||
}
|
||||
|
||||
// Prevent clipping
|
||||
paths.diag = new Path()
|
||||
.move(new Point(0,-30))
|
||||
.move(new Point(200,20))
|
||||
|
||||
return part
|
||||
for (const i of [1,2,3,4,5,6]) {
|
||||
snippets[`demo${i}`] = new Snippet(
|
||||
"logo",
|
||||
new Point(30\*i, 0)
|
||||
).scale(i/10)
|
||||
}
|
||||
|
||||
// Prevent clipping
|
||||
paths.diag = new Path()
|
||||
.move(new Point(0,-30))
|
||||
.move(new Point(200,20))
|
||||
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,4 +11,6 @@ original stack.
|
|||
Stack stack.addPart(Part part)
|
||||
```
|
||||
|
||||
:::noteThis method is chainable as it returns the Stack object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Stack object
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -20,4 +20,6 @@ If the third parameter is set to `true` it will call
|
|||
`this.attributes.set()` instead,
|
||||
thereby overwriting the value of the attribute.
|
||||
|
||||
:::noteThis method is chainable as it returns the Stack object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Stack object
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ title: Stack.generateTransform()
|
|||
The `Stack.generateTransform()` method generates SVG transforms for the stack,
|
||||
sets them as attributes, and returns the original stack.
|
||||
|
||||
|
||||
## Stack.generateTransform() signature
|
||||
|
||||
```js
|
||||
|
|
@ -16,11 +15,13 @@ The `Stack.generateTransforms()` method takes a single argument,
|
|||
an object with the following properties containing the transforms
|
||||
to apply:
|
||||
|
||||
| Property | Type |Description |
|
||||
|----------|------|------------|
|
||||
| `move` | Object | `move.x` and `move.y` are coordinates to which the stack should be translated
|
||||
| `rotate` | Number | The number of degrees to rate the stack around its center |
|
||||
| `flipX` | Boolean | Whether to flip the stack along the X axis |
|
||||
| `flipY` | Boolean | Whether to flip the stack along the Y axis |
|
||||
| Property | Type | Description |
|
||||
| -------- | ------- | ----------------------------------------------------------------------------- |
|
||||
| `move` | Object | `move.x` and `move.y` are coordinates to which the stack should be translated |
|
||||
| `rotate` | Number | The number of degrees to rate the stack around its center |
|
||||
| `flipX` | Boolean | Whether to flip the stack along the X axis |
|
||||
| `flipY` | Boolean | Whether to flip the stack along the Y axis |
|
||||
|
||||
:::noteThis method is chainable as it returns the Stack object:::
|
||||
:::note
|
||||
This method is chainable as it returns the Stack object
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -11,7 +11,10 @@ and returns the original stack.
|
|||
```js
|
||||
Stack stack.home()
|
||||
```
|
||||
:::noteThis method is chainable as it returns the Stack object:::
|
||||
|
||||
:::note
|
||||
This method is chainable as it returns the Stack object
|
||||
:::
|
||||
|
||||
## Notes
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,9 @@ rather through a plugin.
|
|||
Store Store.extend(Array methods=[])
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Store` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Store` object
|
||||
:::
|
||||
|
||||
The single argument should be an Array of methods to add to the
|
||||
store. Each entry in the array should be an array itself holding a path in
|
||||
|
|
@ -23,13 +25,11 @@ The expected first parameter for the method is the `Store` instance.
|
|||
|
||||
```js
|
||||
function myCustomMethod(store, ...otherArguments) {
|
||||
// Do something clever
|
||||
// Do something clever
|
||||
}
|
||||
|
||||
const store = new Store([
|
||||
["path.to.the.method", myCustomMethod ]
|
||||
])
|
||||
```
|
||||
const store = new Store([['path.to.the.method', myCustomMethod]])
|
||||
```
|
||||
|
||||
With the configuration above, you can call `store.path.to.the.method()` and it
|
||||
will run `myCustomMethod()`.
|
||||
|
|
@ -46,5 +46,3 @@ The Store will not allow you to extend any of the following keys:
|
|||
- `unset`
|
||||
- `get`
|
||||
- `extend`
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -12,18 +12,18 @@ If `key` does not hold and Array, the Store will log a warning, but nothing will
|
|||
Store store.push(mixed value1, mixed value2, ...)
|
||||
```
|
||||
|
||||
:::noteThis method is [variadic](https://en.wikipedia.org/wiki/Variadic_function):::
|
||||
:::note
|
||||
This method is [variadic](https://en.wikipedia.org/wiki/Variadic_function)
|
||||
:::
|
||||
|
||||
:::tipThis method is chainable as it returns the `Store` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Store` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
const store = new Store()
|
||||
store.set('example', ['Hi there'])
|
||||
store.push(
|
||||
'How are you doing',
|
||||
'How are YOU doing'
|
||||
)
|
||||
store.push('How are you doing', 'How are YOU doing')
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ The `Store.set()` method stores the value of `value` in the store under key
|
|||
Store store.set(mixed key, mixed value)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Store` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Store` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -42,4 +44,3 @@ value = store.get(['my', 'other', 'nested', 'example']) // works
|
|||
value = store.my.nested.example // Also works
|
||||
value = store.my.other.nested.example // Also works
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ The `Store.set()` method stores the value of `value` in the store under key
|
|||
Store store.set(mixed key, mixed value)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Store` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Store` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
|
|
@ -20,4 +22,3 @@ const store = new Store()
|
|||
store.set('example', 'Hi there')
|
||||
store.setIfUnset('example', 'Hi again') // This has no effect
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -10,12 +10,12 @@ The `Store.unset()` value removes a `key` from the store.
|
|||
Store store.unset(string key)
|
||||
```
|
||||
|
||||
:::tipThis method is chainable as it returns the `Store` object:::
|
||||
:::tip
|
||||
This method is chainable as it returns the `Store` object
|
||||
:::
|
||||
|
||||
## Example
|
||||
|
||||
```js
|
||||
const store = new Store()
|
||||
.set('example', 'I will be gone before you know it')
|
||||
.unset('example')
|
||||
const store = new Store().set('example', 'I will be gone before you know it').unset('example')
|
||||
```
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ git clone https://github.com/your-username/freesewing
|
|||
cd freesewing
|
||||
yarn kickstart
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
This sets up the monorepo. If you would like to create a new design, run the
|
||||
|
|
@ -135,13 +136,15 @@ npx @freesewing/new-design
|
|||
```
|
||||
|
||||
After you've answered [some questions](#questions), it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
|
||||
:::tipThe folder will have the name you chose above.:::
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
|
|
|
|||
|
|
@ -10,4 +10,6 @@ We'll cover the following steps:
|
|||
|
||||
<ReadMore />
|
||||
|
||||
:::tipThese instructions are also valid for BSD or other Unix systems:::
|
||||
:::tip
|
||||
These instructions are also valid for BSD or other Unix systems
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ git clone https://github.com/your-username/freesewing
|
|||
cd freesewing
|
||||
yarn kickstart
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
This sets up the monorepo. If you would like to create a new design, run the
|
||||
|
|
@ -120,13 +121,15 @@ npx @freesewing/new-design
|
|||
```
|
||||
|
||||
After you've answered [some questions](#questions), it will take a while to set
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
everything up. When it's done, you will have a new folder with the development
|
||||
environment inside.
|
||||
|
||||
Now you're ready to [start the development
|
||||
environment](/tutorials/getting-started-linux/dev-start).
|
||||
|
||||
:::tipThe folder will have the name you chose above.:::
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
|
|
|
|||
|
|
@ -35,11 +35,13 @@ FreeSewing project.
|
|||
|
||||
### Install WSL
|
||||
|
||||
:::warning This guide uses WSL version 2, which requires installing the Hyper-V
|
||||
:::warning
|
||||
This guide uses WSL version 2, which requires installing the Hyper-V
|
||||
virtualisation system. If you have another virtualisation system installed (such
|
||||
as VirtualBox or VMWare) you may run into conflicts which require either
|
||||
updating that system to a version which can use the HyperV backend or porting
|
||||
your existing machines to use HyperV. :::
|
||||
your existing machines to use HyperV.
|
||||
:::
|
||||
|
||||
Follow the [Windows Subsystem for Linux Installation Guide for Windows
|
||||
10](https://docs.microsoft.com/en-gb/windows/wsl/install-win10) (requires a
|
||||
|
|
@ -48,8 +50,8 @@ recent version of Windows 10).
|
|||
#### Install NVM
|
||||
|
||||
Open a new WSL terminal from the shortcuts created or by searching for "WSL
|
||||
Terminal" in the start menu. [Install NVM by following the NVM setup
|
||||
guide](https://github.com/nvm-sh/nvm#install--update-script). Once installed
|
||||
Terminal" in the start menu. [Install NVM by following the NVM setup
|
||||
guide](https://github.com/nvm-sh/nvm#install--update-script). Once installed
|
||||
you will need to activate NVM by either following the instructions printed to
|
||||
the screen or opening a new terminal.
|
||||
|
||||
|
|
@ -63,10 +65,12 @@ then activate using `nvm use <version>`. You can determine what version the
|
|||
FreeSewing project uses by checking
|
||||
[freesewing/freesewing/.nvmrc](https://github.com/freesewing/freesewing/blob/develop/.nvmrc).
|
||||
|
||||
:::warning At the time this guide was written the latest version of Node.js/npm has
|
||||
:::warning
|
||||
At the time this guide was written the latest version of Node.js/npm has
|
||||
a bug in the dependency resolution process which causes the freesewing project
|
||||
to fail to build. Use the latest LTS version (currently 18.17.0) or the specific
|
||||
version used by the main project to avoid this issue. :::
|
||||
version used by the main project to avoid this issue.
|
||||
:::
|
||||
|
||||
Node.js comes with the Node Package Manager (npm) by default which can be used to
|
||||
set up the project. The default package manager uses a fairly simplistic approach
|
||||
|
|
@ -122,7 +126,6 @@ this guide you have already done steps 1 and 2, you will only need to install
|
|||
the [remote development
|
||||
extension](https://aka.ms/vscode-remote/download/extension))
|
||||
|
||||
|
||||
## Setting up a development environment in Windows.
|
||||
|
||||
### Install NVM
|
||||
|
|
@ -165,9 +168,12 @@ In VSCode or in a terminal, navigate to the folder you wish to contain your new
|
|||
After you've answered [some questions](#questions), it will take a while to set everything up.
|
||||
When it's done, you will have a new folder with the development environment inside.
|
||||
|
||||
:::tipThe folder will have the name you chose above.:::
|
||||
:::tip
|
||||
The folder will have the name you chose above.
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
### Questions
|
||||
|
||||
#### What template to use
|
||||
|
|
|
|||
|
|
@ -17,10 +17,12 @@ tedious. There are macros to add titles to our pattern, or grainline
|
|||
indicators, a scalebox, and there's a macro to round corners. The `round`
|
||||
macro.
|
||||
|
||||
:::note You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).:::
|
||||
:::note
|
||||
You can find more information on the `round` macro in [the macros docs](/reference/macros/round/).
|
||||
:::
|
||||
|
||||
We need a half circle here, but the `round` macro works on 90° angles, so
|
||||
we'll use it twice. As such, we'll add some points to guide the macro, and
|
||||
we'll use it twice. As such, we'll add some points to guide the macro, and
|
||||
then put it to work.
|
||||
|
||||
Like our neck opening, we've only drawn half since we can simply copy the
|
||||
|
|
@ -41,36 +43,38 @@ function draftBib({
|
|||
part,
|
||||
}) {
|
||||
|
||||
/*
|
||||
* Construct the quarter neck opening
|
||||
*/
|
||||
/\*
|
||||
|
||||
- Construct the quarter neck opening
|
||||
_/
|
||||
let tweak = 1
|
||||
let target = (measurements.head * options.neckRatio) /4
|
||||
let target = (measurements.head _ options.neckRatio) /4
|
||||
let delta
|
||||
do {
|
||||
points.right = new Point(
|
||||
tweak * measurements.head / 10,
|
||||
0
|
||||
)
|
||||
points.bottom = new Point(
|
||||
0,
|
||||
tweak * measurements.head / 12
|
||||
)
|
||||
|
||||
points.right = new Point(
|
||||
tweak _ measurements.head / 10,
|
||||
0
|
||||
)
|
||||
points.bottom = new Point(
|
||||
0,
|
||||
tweak _ measurements.head / 12
|
||||
)
|
||||
|
||||
|
||||
points.rightCp1 = points.right.shift(
|
||||
90,
|
||||
90,
|
||||
points.bottom.dy(points.right) / 2
|
||||
)
|
||||
points.bottomCp2 = points.bottom.shift(
|
||||
0,
|
||||
0,
|
||||
points.bottom.dx(points.right) / 2
|
||||
)
|
||||
|
||||
|
||||
paths.quarterNeck = new Path()
|
||||
.move(points.right)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.hide()
|
||||
|
|
@ -78,11 +82,13 @@ function draftBib({
|
|||
delta = paths.quarterNeck.length() - target
|
||||
if (delta > 0) tweak = tweak * 0.99
|
||||
else tweak = tweak * 1.02
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
/*
|
||||
* Construct the complete neck opening
|
||||
*/
|
||||
} while (Math.abs(delta) > 1)
|
||||
|
||||
/\*
|
||||
|
||||
- Construct the complete neck opening
|
||||
\*/
|
||||
points.rightCp2 = points.rightCp1.flipY()
|
||||
points.bottomCp1 = points.bottomCp2.flipX()
|
||||
points.left = points.right.flipX()
|
||||
|
|
@ -92,83 +98,88 @@ function draftBib({
|
|||
points.topCp1 = points.bottomCp2.flipY()
|
||||
points.topCp2 = points.bottomCp1.flipY()
|
||||
|
||||
paths.neck = new Path()
|
||||
.move(points.top)
|
||||
.curve(points.topCp2, points.leftCp1, points.left)
|
||||
.curve(points.leftCp2, points.bottomCp1, points.bottom)
|
||||
.curve(points.bottomCp2, points.rightCp1, points.right)
|
||||
.curve(points.rightCp2, points.topCp1, points.top)
|
||||
.close()
|
||||
.addClass('fabric')
|
||||
paths.neck = new Path()
|
||||
.move(points.top)
|
||||
.curve(points.topCp2, points.leftCp1, points.left)
|
||||
.curve(points.leftCp2, points.bottomCp1, points.bottom)
|
||||
.curve(points.bottomCp2, points.rightCp1, points.right)
|
||||
.curve(points.rightCp2, points.topCp1, points.top)
|
||||
.close()
|
||||
.addClass('fabric')
|
||||
|
||||
/*
|
||||
* Drawing the bib outline
|
||||
*/
|
||||
const width = measurements.head * options.widthRatio
|
||||
const length = measurements.head * options.lengthRatio
|
||||
/\*
|
||||
|
||||
points.topLeft = new Point(
|
||||
width / -2,
|
||||
points.top.y - (width / 2 - points.right.x)
|
||||
)
|
||||
points.topRight = points.topLeft.shift(0, width)
|
||||
points.bottomLeft = points.topLeft.shift(-90, length)
|
||||
points.bottomRight = points.topRight.shift(-90, length)
|
||||
- Drawing the bib outline
|
||||
_/
|
||||
const width = measurements.head _ options.widthRatio
|
||||
const length = measurements.head \* options.lengthRatio
|
||||
|
||||
/*
|
||||
* Shape the straps
|
||||
*/
|
||||
points.topLeft = new Point(
|
||||
width / -2,
|
||||
points.top.y - (width / 2 - points.right.x)
|
||||
)
|
||||
points.topRight = points.topLeft.shift(0, width)
|
||||
points.bottomLeft = points.topLeft.shift(-90, length)
|
||||
points.bottomRight = points.topRight.shift(-90, length)
|
||||
|
||||
/\*
|
||||
|
||||
- Shape the straps
|
||||
\*/
|
||||
points.edgeLeft = new Point(points.topLeft.x, points.left.y)
|
||||
points.edgeRight = new Point(points.topRight.x, points.right.y)
|
||||
points.edgeTop = new Point(0, points.topLeft.y)
|
||||
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5)
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX()
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
)
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX()
|
||||
points.edgeLeftCp = points.edgeLeft.shiftFractionTowards(points.topLeft, 0.5)
|
||||
points.edgeRightCp = points.edgeLeftCp.flipX()
|
||||
points.edgeTopLeftCp = points.edgeTop.shiftFractionTowards(
|
||||
points.topLeft,
|
||||
0.5
|
||||
)
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX()
|
||||
|
||||
// highlight-start
|
||||
// Round the straps
|
||||
const strap = points.edgeTop.dy(points.top)
|
||||
// highlight-start
|
||||
// Round the straps
|
||||
const strap = points.edgeTop.dy(points.top)
|
||||
|
||||
points.tipRight = points.edgeTop.translate(strap / 2, strap / 2)
|
||||
points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y)
|
||||
points.tipRightBottom = new Point(points.tipRight.x, points.top.y)
|
||||
points.tipRight = points.edgeTop.translate(strap / 2, strap / 2)
|
||||
points.tipRightTop = new Point(points.tipRight.x, points.edgeTop.y)
|
||||
points.tipRightBottom = new Point(points.tipRight.x, points.top.y)
|
||||
|
||||
macro("round", {
|
||||
id: "tipRightTop",
|
||||
from: points.edgeTop,
|
||||
to: points.tipRight,
|
||||
via: points.tipRightTop,
|
||||
hide: false
|
||||
})
|
||||
macro("round", {
|
||||
id: "tipRightBottom",
|
||||
from: points.tipRight,
|
||||
to: points.top,
|
||||
via: points.tipRightBottom,
|
||||
hide: false
|
||||
})
|
||||
// highlight-end
|
||||
macro("round", {
|
||||
id: "tipRightTop",
|
||||
from: points.edgeTop,
|
||||
to: points.tipRight,
|
||||
via: points.tipRightTop,
|
||||
hide: false
|
||||
})
|
||||
macro("round", {
|
||||
id: "tipRightBottom",
|
||||
from: points.tipRight,
|
||||
to: points.top,
|
||||
via: points.tipRightBottom,
|
||||
hide: false
|
||||
})
|
||||
// highlight-end
|
||||
|
||||
/*
|
||||
* Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
*/
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close()
|
||||
|
||||
return part
|
||||
- Now, adapt our `rect` path so it's no longer a rectangle:
|
||||
\*/
|
||||
paths.rect = new Path()
|
||||
.move(points.edgeTop)
|
||||
.curve(points.edgeTopLeftCp, points.edgeLeftCp, points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(points.edgeRightCp, points.edgeTopRightCp, points.edgeTop)
|
||||
.close()
|
||||
|
||||
return part
|
||||
}
|
||||
|
||||
```
|
||||
</Example>
|
||||
|
||||
Notice that we always draw our path at the end after we've manipulated our points.
|
||||
Notice that we always draw our path at the end after we've manipulated our points.
|
||||
```
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@ does.
|
|||
## Destructuring the function parameter
|
||||
|
||||
If you're not familiar with the `({ part })` syntax you see above, this is a
|
||||
technique called *parameter destructuring* or more generally, [object
|
||||
technique called _parameter destructuring_ or more generally, [object
|
||||
destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment).
|
||||
|
||||
The draft method receives only 1 parameter: An object that holds everything we
|
||||
need to draft our method. Destructuring is a way to *pull things out of the
|
||||
object into their own variable*. It saves us a bunch of typing as these two are
|
||||
need to draft our method. Destructuring is a way to _pull things out of the
|
||||
object into their own variable_. It saves us a bunch of typing as these two are
|
||||
equivalent:
|
||||
|
||||
<Tabs>
|
||||
|
|
@ -53,7 +53,7 @@ function draftBib({ part }) {
|
|||
|
||||
As we'll make our way through this tutorial, we'll need more and more stuff, so
|
||||
we'll be pulling it out of the object passed to the draft method via
|
||||
*destructuring*.
|
||||
_destructuring_.
|
||||
|
||||
:::note
|
||||
|
||||
|
|
@ -92,7 +92,9 @@ Here's a brief summary of the things we've added above:
|
|||
- `points`: A container object to hold the part's points
|
||||
- `paths`: A container object to hold the part's paths
|
||||
|
||||
:::tipRemember: Constructors start with a **C**apital letter:::
|
||||
:::tip
|
||||
Remember: Constructors start with a **C**apital letter
|
||||
:::
|
||||
|
||||
Long story short: These will make it possible for us to draw points and paths easily.
|
||||
|
||||
|
|
|
|||
|
|
@ -3,5 +3,6 @@ title: Supporting translation
|
|||
order: 80
|
||||
---
|
||||
|
||||
:::note [FIXME]Write this section for v3:::
|
||||
|
||||
:::note [FIXME]
|
||||
Write this section for v3
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ If you set a `menu` property on your option, the FreeSewing frontend will use
|
|||
this to organize your various options in a menu structure.
|
||||
|
||||
### Sub menus
|
||||
|
||||
You can a nested menu structure with dot-notation. So `style.pockets` will
|
||||
create a `pockets` submenu under the `style` menu and put your option there.
|
||||
|
||||
|
|
@ -65,4 +66,6 @@ function(
|
|||
|
||||
This is typically used to hide options conditionally.
|
||||
|
||||
:::note [FIXME]Include example:::
|
||||
:::note [FIXME]
|
||||
Include example
|
||||
:::
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@ title: Testing your designs
|
|||
order: 70
|
||||
---
|
||||
|
||||
:::note [FIXME] Update this for v3 :::
|
||||
|
||||
With the basic outline of our pattern ready, now would be a good time
|
||||
to test it to see how well it adapts to different measurements,
|
||||
and the range of options we provided.
|
||||
|
||||
:::note [FIXME]
|
||||
Update this for v3
|
||||
|
||||
This page needs to be updated with screenshots from the v3 development
|
||||
environment
|
||||
:::
|
||||
|
|
@ -40,7 +40,7 @@ these.
|
|||
## Testing pattern options
|
||||
|
||||
We used percentage options, which can vary between their minimum and maximum
|
||||
value. For these tests, FreeSewing will divide that range into 10 steps and
|
||||
value. For these tests, FreeSewing will divide that range into 10 steps and
|
||||
draft our pattern for each step.
|
||||
|
||||
Click on any of the options we've added to our pattern, and our bib will be
|
||||
|
|
@ -54,11 +54,13 @@ that it only influences the length:
|
|||
|
||||
|
||||
:::note [FIXME]Update screenshot for v3:::
|
||||
:::note [FIXME]
|
||||
Update screenshot for v3
|
||||
:::
|
||||
|
||||
### neckRatio
|
||||
|
||||
The `neckRatio` option will determine the size of the neck opening. For the
|
||||
The `neckRatio` option will determine the size of the neck opening. For the
|
||||
same `head` measurement, varying this option should result in bibs with
|
||||
increasingly larger neck opening.
|
||||
|
||||
|
|
@ -68,11 +70,13 @@ smaller, we will rotate the straps further out of the way to avoid overlap:
|
|||
|
||||
|
||||
:::note [FIXME]Update screenshot for v3:::
|
||||
:::note [FIXME]
|
||||
Update screenshot for v3
|
||||
:::
|
||||
|
||||
### widthRatio
|
||||
|
||||
The `widthRatio` option will determine the width of our bib. For the same
|
||||
The `widthRatio` option will determine the width of our bib. For the same
|
||||
`head` measurement, varying this option should result in increasingly wider
|
||||
bibs.
|
||||
|
||||
|
|
@ -84,7 +88,9 @@ bib shorter when it's worn.
|
|||
|
||||
|
||||
:::note [FIXME]Update screenshot for v3:::
|
||||
:::note [FIXME]
|
||||
Update screenshot for v3
|
||||
:::
|
||||
|
||||
:::note
|
||||
|
||||
|
|
@ -101,12 +107,14 @@ to the reader_.
|
|||
## Testing measurements
|
||||
|
||||
Testing a measurement will vary that measurement 10% up or down while leaving
|
||||
everything else the same. This gives us the option to determine how any given
|
||||
everything else the same. This gives us the option to determine how any given
|
||||
measurement is influencing the pattern.
|
||||
|
||||
For our bib, we only use one measurement, so it influences the entire pattern.
|
||||
|
||||
:::note [FIXME]Add screenshot:::
|
||||
:::note [FIXME]
|
||||
Add screenshot
|
||||
:::
|
||||
|
||||
## Testing measurments sets
|
||||
|
||||
|
|
@ -121,27 +129,31 @@ ends up being the same as testing a complete set of measurements.
|
|||
But most patterns use multiple measurements, and we'll find this test gives
|
||||
us insight into how our pattern will adapt to differently sized bodies.
|
||||
|
||||
:::note [FIXME]Add screenshot:::
|
||||
:::note [FIXME]
|
||||
Add screenshot
|
||||
:::
|
||||
|
||||
## The antperson test
|
||||
|
||||
A special case of model testing is the so-called _antperson test_. It drafts
|
||||
A special case of model testing is the so-called _antperson test_. It drafts
|
||||
our pattern with a set of _typical_ measurements , and then drafts it again
|
||||
with measurements that are 1/10th of those _typical_ measurements.
|
||||
|
||||
It is named after [the cartoon
|
||||
character](https://en.wikipedia.org/wiki/Ant-Man_\(film\)) who can shrink, yet
|
||||
character](<https://en.wikipedia.org/wiki/Ant-Man_(film)>) who can shrink, yet
|
||||
somehow his suit still fits.
|
||||
|
||||
The purpose of the antperson test is to bring out areas in our pattern where
|
||||
we made assumptions that will not properly scale. Many drafting books will
|
||||
we made assumptions that will not properly scale. Many drafting books will
|
||||
tell us to _add 3 cm there_ or _measure 2 inch to the right_. Those
|
||||
instructions don't scale, and we should avoid them.
|
||||
|
||||
The best patterns will pass the antperson test with 2 patterns exactly the
|
||||
same, where one will simply be 1/10th the scale of the other.
|
||||
|
||||
:::note [FIXME]Add screenshot:::
|
||||
:::note [FIXME]
|
||||
Add screenshot
|
||||
:::
|
||||
|
||||
When we're happy with how our pattern passes these tests, it's time to
|
||||
complete our design.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue