feat: Flat import of markdown repo
This is a flat (without history) import of (some of) the content from our markdown module. We've imported this without history because the repo contains our blog posts and showcases posts content prior to porting them to strapi. Since this contains many images, it would balloon the size of this repo to import the full history. Instead, please refer to the history of the (archived) markdown repo at: https://github.com/freesewing/markdown
This commit is contained in:
Joost De Cock
parent
1671a896b5
commit
b34a2ee2ed
6132 changed files with 244167 additions and 0 deletions
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
title: Drawing the straps
|
||||
order: 230
|
||||
---
|
||||
|
||||
All we have to do know is flip a bunch of points on the other side, and create one single path that follows our bib outline.
|
||||
|
||||
First, let's create the points:
|
||||
|
||||
```js
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
points.topCp1 = points.topCp2.flipX();
|
||||
points.tipLeftTopStart = points.tipRightTopStart.flipX();
|
||||
points.tipLeftTopCp1 = points.tipRightTopCp1.flipX();
|
||||
points.tipLeftTopCp2 = points.tipRightTopCp2.flipX();
|
||||
points.tipLeftTopEnd = points.tipRightTopEnd.flipX();
|
||||
points.tipLeftBottomStart = points.tipRightBottomStart.flipX();
|
||||
points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX();
|
||||
points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX();
|
||||
points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX();
|
||||
points.snapRight = points.snapLeft.flipX();
|
||||
```
|
||||
|
||||
Now, remove the `neck` and `rect` paths that we created earlier, and replace them with this new path:
|
||||
|
||||
```js
|
||||
paths.seam = new Path()
|
||||
.move(points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(
|
||||
points.edgeRightCp,
|
||||
points.edgeTopRightCp,
|
||||
points.tipLeftTopStart
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftTopCp1,
|
||||
points.tipLeftTopCp2,
|
||||
points.tipLeftTopEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftBottomCp1,
|
||||
points.tipLeftBottomCp2,
|
||||
points.tipLeftBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.topCp1,
|
||||
points.rightCp2,
|
||||
points.right
|
||||
)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.curve(
|
||||
points.bottomCp1,
|
||||
points.leftCp2,
|
||||
points.left
|
||||
)
|
||||
.curve(
|
||||
points.leftCp1,
|
||||
points.topCp2,
|
||||
points.tipRightBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipRightBottomCp2,
|
||||
points.tipRightBottomCp1,
|
||||
points.tipRightBottomStart
|
||||
)
|
||||
.curve(
|
||||
points.tipRightTopCp2,
|
||||
points.tipRightTopCp1,
|
||||
points.tipRightTopStart
|
||||
)
|
||||
.curve(
|
||||
points.edgeTopLeftCp,
|
||||
points.edgeLeftCp,
|
||||
points.edgeLeft
|
||||
)
|
||||
.close()
|
||||
.attr("class", "fabric");
|
||||
```
|
||||
|
||||
With that out of the way, our bib now looks like this:
|
||||
|
||||
<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
|
||||
|
||||
<Note>
|
||||
|
||||
We used the `part.attr()` method to style our path? But because the `fabric` class is drawn in black,
|
||||
it doesn't look much different. We'll use some other classes later that will make its effect more clear.
|
||||
|
||||
</Note>
|
||||
|
||||
It's looking pretty good. But those sharp corners at the bottom don't exactly say *baby* do they? Let's fix that.
|
||||
|
||||
101
markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md
Normal file
101
markdown/dev/tutorials/pattern-design/drawing-the-straps/en.md
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
---
|
||||
title: Drawing the straps
|
||||
order: 230
|
||||
---
|
||||
|
||||
All we have to do know is flip a bunch of points on the other side,
|
||||
and create one single path that follows our bib outline.
|
||||
|
||||
First, let's create the points:
|
||||
|
||||
```js
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
points.topCp1 = points.topCp2.flipX();
|
||||
points.tipLeftTopStart = points.tipRightTopStart.flipX();
|
||||
points.tipLeftTopCp1 = points.tipRightTopCp1.flipX();
|
||||
points.tipLeftTopCp2 = points.tipRightTopCp2.flipX();
|
||||
points.tipLeftTopEnd = points.tipRightTopEnd.flipX();
|
||||
points.tipLeftBottomStart = points.tipRightBottomStart.flipX();
|
||||
points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX();
|
||||
points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX();
|
||||
points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX();
|
||||
points.snapRight = points.snapLeft.flipX();
|
||||
```
|
||||
|
||||
Now, remove the `neck` and `rect` paths that we created earlier, and replace
|
||||
them with this new path:
|
||||
|
||||
```js
|
||||
paths.seam = new Path()
|
||||
.move(points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(
|
||||
points.edgeRightCp,
|
||||
points.edgeTopRightCp,
|
||||
points.tipLeftTopStart
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftTopCp1,
|
||||
points.tipLeftTopCp2,
|
||||
points.tipLeftTopEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftBottomCp1,
|
||||
points.tipLeftBottomCp2,
|
||||
points.tipLeftBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.topCp1,
|
||||
points.rightCp2,
|
||||
points.right
|
||||
)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.curve(
|
||||
points.bottomCp1,
|
||||
points.leftCp2,
|
||||
points.left
|
||||
)
|
||||
.curve(
|
||||
points.leftCp1,
|
||||
points.topCp2,
|
||||
points.tipRightBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipRightBottomCp2,
|
||||
points.tipRightBottomCp1,
|
||||
points.tipRightBottomStart
|
||||
)
|
||||
.curve(
|
||||
points.tipRightTopCp2,
|
||||
points.tipRightTopCp1,
|
||||
points.tipRightTopStart
|
||||
)
|
||||
.curve(
|
||||
points.edgeTopLeftCp,
|
||||
points.edgeLeftCp,
|
||||
points.edgeLeft
|
||||
)
|
||||
.close()
|
||||
.attr("class", "fabric");
|
||||
```
|
||||
|
||||
With that out of the way, our bib now looks like this:
|
||||
|
||||
<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
|
||||
|
||||
<Note>
|
||||
|
||||
We used the `part.attr()` method to style our path? But because the `fabric` class is drawn in black,
|
||||
it doesn't look much different. We'll use some other classes later that will make its effect more clear.
|
||||
|
||||
</Note>
|
||||
|
||||
It's looking pretty good. But those sharp corners at the bottom don't exactly say *baby* do they?
|
||||
Let's fix that.
|
||||
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
title: Drawing the straps
|
||||
order: 230
|
||||
---
|
||||
|
||||
All we have to do know is flip a bunch of points on the other side, and create one single path that follows our bib outline.
|
||||
|
||||
First, let's create the points:
|
||||
|
||||
```js
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
points.topCp1 = points.topCp2.flipX();
|
||||
points.tipLeftTopStart = points.tipRightTopStart.flipX();
|
||||
points.tipLeftTopCp1 = points.tipRightTopCp1.flipX();
|
||||
points.tipLeftTopCp2 = points.tipRightTopCp2.flipX();
|
||||
points.tipLeftTopEnd = points.tipRightTopEnd.flipX();
|
||||
points.tipLeftBottomStart = points.tipRightBottomStart.flipX();
|
||||
points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX();
|
||||
points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX();
|
||||
points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX();
|
||||
points.snapRight = points.snapLeft.flipX();
|
||||
```
|
||||
|
||||
Now, remove the `neck` and `rect` paths that we created earlier, and replace them with this new path:
|
||||
|
||||
```js
|
||||
paths.seam = new Path()
|
||||
.move(points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(
|
||||
points.edgeRightCp,
|
||||
points.edgeTopRightCp,
|
||||
points.tipLeftTopStart
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftTopCp1,
|
||||
points.tipLeftTopCp2,
|
||||
points.tipLeftTopEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftBottomCp1,
|
||||
points.tipLeftBottomCp2,
|
||||
points.tipLeftBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.topCp1,
|
||||
points.rightCp2,
|
||||
points.right
|
||||
)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.curve(
|
||||
points.bottomCp1,
|
||||
points.leftCp2,
|
||||
points.left
|
||||
)
|
||||
.curve(
|
||||
points.leftCp1,
|
||||
points.topCp2,
|
||||
points.tipRightBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipRightBottomCp2,
|
||||
points.tipRightBottomCp1,
|
||||
points.tipRightBottomStart
|
||||
)
|
||||
.curve(
|
||||
points.tipRightTopCp2,
|
||||
points.tipRightTopCp1,
|
||||
points.tipRightTopStart
|
||||
)
|
||||
.curve(
|
||||
points.edgeTopLeftCp,
|
||||
points.edgeLeftCp,
|
||||
points.edgeLeft
|
||||
)
|
||||
.close()
|
||||
.attr("class", "fabric");
|
||||
```
|
||||
|
||||
With that out of the way, our bib now looks like this:
|
||||
|
||||
<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
|
||||
|
||||
<Note>
|
||||
|
||||
We used the `part.attr()` method to style our path? But because the `fabric` class is drawn in black,
|
||||
it doesn't look much different. We'll use some other classes later that will make its effect more clear.
|
||||
|
||||
</Note>
|
||||
|
||||
It's looking pretty good. But those sharp corners at the bottom don't exactly say *baby* do they? Let's fix that.
|
||||
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
title: Dessiner les attaches
|
||||
order: 230
|
||||
---
|
||||
|
||||
Tout ce que nous devons faire maintenant est de retourner un ensemble de points de l'autre côté, et créer un unique chemin qui suit le contour de notre bavoir.
|
||||
|
||||
Tout d'abord, il faut créer les points :
|
||||
|
||||
```js
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
points.topCp1 = points.topCp2.flipX();
|
||||
points.tipLeftTopStart = points.tipRightTopStart.flipX();
|
||||
points.tipLeftTopCp1 = points.tipRightTopCp1.flipX();
|
||||
points.tipLeftTopCp2 = points.tipRightTopCp2.flipX();
|
||||
points.tipLeftTopEnd = points.tipRightTopEnd.flipX();
|
||||
points.tipLeftBottomStart = points.tipRightBottomStart.flipX();
|
||||
points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX();
|
||||
points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX();
|
||||
points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX();
|
||||
points.snapRight = points.snapLeft.flipX();
|
||||
```
|
||||
|
||||
Maintenant, supprimez les chemins `neck` et `rect` que nous avons créés plus tôt, et remplaçez-les avec ce nouveau chemin :
|
||||
|
||||
```js
|
||||
paths.seam = new Path()
|
||||
.move(points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(
|
||||
points.edgeRightCp,
|
||||
points.edgeTopRightCp,
|
||||
points.tipLeftTopStart
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftTopCp1,
|
||||
points.tipLeftTopCp2,
|
||||
points.tipLeftTopEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftBottomCp1,
|
||||
points.tipLeftBottomCp2,
|
||||
points.tipLeftBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.topCp1,
|
||||
points.rightCp2,
|
||||
points.right
|
||||
)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.curve(
|
||||
points.bottomCp1,
|
||||
points.leftCp2,
|
||||
points.left
|
||||
)
|
||||
.curve(
|
||||
points.leftCp1,
|
||||
points.topCp2,
|
||||
points.tipRightBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipRightBottomCp2,
|
||||
points.tipRightBottomCp1,
|
||||
points.tipRightBottomStart
|
||||
)
|
||||
.curve(
|
||||
points.tipRightTopCp2,
|
||||
points.tipRightTopCp1,
|
||||
points.tipRightTopStart
|
||||
)
|
||||
.curve(
|
||||
points.edgeTopLeftCp,
|
||||
points.edgeLeftCp,
|
||||
points.edgeLeft
|
||||
)
|
||||
.close()
|
||||
.attr("class", "fabric");
|
||||
```
|
||||
|
||||
Avec ceci, notre bavoir ressemble à présent à cela :
|
||||
|
||||
<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
|
||||
|
||||
<Note>
|
||||
|
||||
We used the `part.attr()` method to style our path? But because the `fabric` class is drawn in black,
|
||||
it doesn't look much different. Nous allons utiliser d'autres classes plus tard qui rendront son effet plus apparent.
|
||||
|
||||
</Note>
|
||||
|
||||
Cela a un assez bel aspect. But those sharp corners at the bottom don't exactly say *baby* do they? Réglons donc ça.
|
||||
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
---
|
||||
title: De bandjes tekenen
|
||||
order: 230
|
||||
---
|
||||
|
||||
Al wat we nu nog moeten doen, is een hoop punten spiegelen aan de andere kant en één pad maken dat de omtrek van het slabbetje volgt.
|
||||
|
||||
Eerst maken we de punten:
|
||||
|
||||
```js
|
||||
points.edgeTopRightCp = points.edgeTopLeftCp.flipX();
|
||||
points.topCp1 = points.topCp2.flipX();
|
||||
points.tipLeftTopStart = points.tipRightTopStart.flipX();
|
||||
points.tipLeftTopCp1 = points.tipRightTopCp1.flipX();
|
||||
points.tipLeftTopCp2 = points.tipRightTopCp2.flipX();
|
||||
points.tipLeftTopEnd = points.tipRightTopEnd.flipX();
|
||||
points.tipLeftBottomStart = points.tipRightBottomStart.flipX();
|
||||
points.tipLeftBottomCp1 = points.tipRightBottomCp1.flipX();
|
||||
points.tipLeftBottomCp2 = points.tipRightBottomCp2.flipX();
|
||||
points.tipLeftBottomEnd = points.tipRightBottomEnd.flipX();
|
||||
points.snapRight = points.snapLeft.flipX();
|
||||
```
|
||||
|
||||
Nu verwijder je de paden `neck` en `rect` die we eerder gemaakt hebben, en vervang je ze door dit nieuwe pad:
|
||||
|
||||
```js
|
||||
paths.seam = new Path()
|
||||
.move(points.edgeLeft)
|
||||
.line(points.bottomLeft)
|
||||
.line(points.bottomRight)
|
||||
.line(points.edgeRight)
|
||||
.curve(
|
||||
points.edgeRightCp,
|
||||
points.edgeTopRightCp,
|
||||
points.tipLeftTopStart
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftTopCp1,
|
||||
points.tipLeftTopCp2,
|
||||
points.tipLeftTopEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipLeftBottomCp1,
|
||||
points.tipLeftBottomCp2,
|
||||
points.tipLeftBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.topCp1,
|
||||
points.rightCp2,
|
||||
points.right
|
||||
)
|
||||
.curve(
|
||||
points.rightCp1,
|
||||
points.bottomCp2,
|
||||
points.bottom
|
||||
)
|
||||
.curve(
|
||||
points.bottomCp1,
|
||||
points.leftCp2,
|
||||
points.left
|
||||
)
|
||||
.curve(
|
||||
points.leftCp1,
|
||||
points.topCp2,
|
||||
points.tipRightBottomEnd
|
||||
)
|
||||
.curve(
|
||||
points.tipRightBottomCp2,
|
||||
points.tipRightBottomCp1,
|
||||
points.tipRightBottomStart
|
||||
)
|
||||
.curve(
|
||||
points.tipRightTopCp2,
|
||||
points.tipRightTopCp1,
|
||||
points.tipRightTopStart
|
||||
)
|
||||
.curve(
|
||||
points.edgeTopLeftCp,
|
||||
points.edgeLeftCp,
|
||||
points.edgeLeft
|
||||
)
|
||||
.close()
|
||||
.attr("class", "fabric");
|
||||
```
|
||||
|
||||
Nu we dat uit de weg hebben, ziet het slabbetje er zo uit:
|
||||
|
||||
<Example pattern="tutorial" part="step9" caption="That is looking a lot like a bib" />
|
||||
|
||||
<Note>
|
||||
|
||||
We used the `part.attr()` method to style our path? But because the `fabric` class is drawn in black,
|
||||
it doesn't look much different. Later gaan we een paar andere klasses gebruiken die het effect duidelijker maken.
|
||||
|
||||
</Note>
|
||||
|
||||
Het ziet er best goed uit. But those sharp corners at the bottom don't exactly say *baby* do they? Daar gaan we iets aan doen.
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue