440a273329
These are changes suggested by @darigovresearch so all credit to them. They were submitted in PR #3115 but that PR has a bunch of whitespace changes and I am concerned they will have unintended side-effects on some of the MDX components. So I'm extracting them here.
3.6 KiB
| title | order |
|---|---|
| Drawing the bib outline | 190 |
With our neck opening in place, let us draw the basic outline of our bib.
```design/src/bib.mjs function draftBib({ Path, Point, paths, points, measurements, options, part, }) {// Construct the quarter neck opening let tweak = 1 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.rightCp1 = points.right.shift(90, points.bottom.dy(points.right)/2)
points.bottomCp2 = points.bottom.shift(0, points.bottom.dx(points.right)/2)
paths.quarterNeck = new Path()
.move(points.right)
.curve(points.rightCp1, points.bottomCp2, points.bottom)
.hide() // Add this line
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 points.rightCp2 = points.rightCp1.flipY() points.bottomCp1 = points.bottomCp2.flipX() points.left = points.right.flipX() points.leftCp1 = points.rightCp2.flipX() points.leftCp2 = points.rightCp1.flipX() points.top = points.bottom.flipY() 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')
// highlight-start // 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)
paths.rect = new Path() .move(points.topLeft) .line(points.bottomLeft) .line(points.bottomRight) .line(points.topRight) .line(points.topLeft) .close() .addClass('fabric') // highlight-end
return part }
</Example>
First thing we did was create the `width` and `length` variables to
save ourselves some typing:
```js
const width = measurements.head * options.widthRatio
const 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()
.addClass('fabric')
We're calculating the topLeft point so that the top edge of our bib
and the sides are equidistant from the neck opening.
We didn't have to do that. But it looks nicely balanced this way.