1
0
Fork 0
freesewing/markdown/dev/tutorials/pattern-design/drawing-the-bib-outline/de.md
Joost De Cock b34a2ee2ed 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
2021-08-25 16:09:31 +02:00

1.9 KiB

title order
Drawing the bib outline 190

With our neck opening in place, let's draw basic outline of our bib:

let width = measurements.head * options.widthRatio;
let 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);

paths.rect = new Path()
  .move(points.topLeft)
  .line(points.bottomLeft)
  .line(points.bottomRight)
  .line(points.topRight)
  .line(points.topLeft)
  .close();

Firs thing we did was create the width and length variables to save ourselves some typing:

let width = measurements.head * options.widthRatio;
let length = measurements.head * options.lengthRatio;

Both the length and width of your bib are a factor of the head circumference. This way, your bib size will adapt to the size of the baby, and the user can tweak the length and width by playing with the options you added to the pattern.

Once we have our variables, we're adding some new points, and a second path called rect.

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);

paths.rect = new Path()
  .move(points.topLeft)
  .line(points.bottomLeft)
  .line(points.bottomRight)
  .line(points.topRight)
  .line(points.topLeft)
  .close();

We're calculating the topLeft point so that the top edge of our bib and the sides are equidistant from the neck neck opening.

You didn't have to do that. But it looks nicely balanced this way: