b34a2ee2ed
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
2.4 KiB
2.4 KiB
| title | order |
|---|---|
| De bandjes tekenen | 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:
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:
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:
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.
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.