# Fill areas drawn by bezier curves?

## Recommended Posts

I am using this code:

``````var sp = new phaser.Point(frmX, frmY + halfCupboardDepth + thickness),
mp = new phaser.Point(frmX, frmY),
ep = new phaser.Point(leftWallShiftX, frmY);

frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1);

ep = new phaser.Point(frmX, frmX, frmY + halfCupboardDepth + thickness * 2);
mp = new phaser.Point(frmX, frmY + thickness);
ep = new phaser.Point(leftWallShiftX, frmY + thickness);
frnConstr.Utility.drawBezierCurve(graphics, sp, mp, ep, 1, borderColor, 1);``````

where: drawBezierCurve() is:

``````drawBezierCurve: function (graphics, sp, mp, ep, borderWidth, borderColor, borderAlpha) {
graphics.lineStyle(borderWidth, borderColor, borderAlpha);
graphics.moveTo(sp.x, sp.y);
graphics.bezierCurveTo(sp.x, sp.y, mp.x, mp.y, ep.x, ep.y);
}``````

An it is drawing this drawing:

Yes the green areas were drawn by other code but the above code draws just curved lines. I would like to fill the area between those two curves and

the area below the second curve in-between the green area and the second curve.

How can I do that? Should I draw first rectangle and then call bezierCurveTo() to make it curved.

Well tried with polygon but it didn't do the trick. What do i miss?

##### Share on other sites

Could I possibly take a list of points on the bezier curve and draw polygon with those points?

Is there some sort of getPointOnCurve() method?

##### Share on other sites

Have you tried beginFill/endFill?

##### Share on other sites

Ok. Improvement

But how to add another point to fill the leftover triangle?

##### Share on other sites

By using moveTo() and lineTo() methods I got to this result:

But cannot accept it because of the strike-trough line. Need it in one piece white. I basically drew triangle below the curved area of white.

##### Share on other sites

So you did endFill 2 times? Do it only once in the end:

beginFill

moveTo  / lineTo

bezierCurveTo...

endFill

##### Share on other sites

Ok I removed the commented out line and it worked. So yes it is possible. Thanks

``````graphics.beginFill(0xffffff, 1);
graphics.lineStyle(borderWidth, borderColor, borderAlpha);
graphics.moveTo(sp.x, sp.y);
graphics.bezierCurveTo(sp.x, sp.y, mp.x, mp.y, ep.x, ep.y);
// graphics.moveTo(ep.x, ep.y); I removed this one
graphics.lineTo(ep.x, sp.y);
graphics.lineTo(sp.x, sp.y);
graphics.endFill();``````

##### Share on other sites

No problem, glad it worked.

• ### Recently Browsing   0 members

• No registered users viewing this page.
×
×
• Create New...