102 lines
2.4 KiB
Markdown
102 lines
2.4 KiB
Markdown
|
---
|
||
|
|
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.
|
||
|
|
|