VSinerva/freesewing
1
0
Fork 0
Code Activity

feat: Flat import of markdown repo

Browse source 
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 2021-08-25 16:09:31 +02:00
parent 1671a896b5
commit b34a2ee2ed
6132 changed files with 244167 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

48
markdown/dev/tutorials/pattern-design/shaping-the-straps/en.md Normal file
View file

@ -0,0 +1,48 @@
---
title: Shaping the straps
order: 200
---
Our straps should follow the neck opening, which isn't that hard to do.
We just need to keep the control points of our curves at similar proportions.
Which means, halfway between the start of the curve, and the corner of our rectangle.
<Note>
For this, you'll be using a new method: `Point.shiftFractionTowards()`. We've already
used `Point.shift()` and there's also `Point.shiftTowards()` and `Point.shiftOutwards()`.
As always, [the API docs](/reference/api/point/) have all the details.
</Note>
```js
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();
```
Now, adapt our `rect` path so it's no longer a rectangle:
```js
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();
```
All of a sudden, things are starting to look like a bib:
<Example pattern="tutorial" part="step6" caption="Pretty good, but how are we going to fit it over the baby's head?" />