CODEWITHSUNDEEP
pixi.js
Alexander Farber
Alexander Farber

Reputation: 22968

How to draw rectangle with 1 round corner?

How to draw rectangle with 1 rounded corner and fill it with color please?

I am trying to use the method arcTo with the following code:

this.bgGraphics.beginFill(0xFFCC00, 1);
this.bgGraphics.moveTo(0, 0);
this.bgGraphics.lineTo(45, 0);
this.bgGraphics.arcTo(45, 0, 60, 15, 15);
this.bgGraphics.lineTo(60, 60);
this.bgGraphics.lineTo(0, 60);
this.bgGraphics.endFill();

I.e. I am drawing a 60 x 60 rectangle and then trying to use arcTo from point 45, 0 to 45, 15 with radius 15.

But instead of the rounded corner on the right top it cuts it off:

screenshot

Upvotes: 1

Views: 2814

Answers (3)

matt_w
matt_w

Reputation: 1116

I agree with Karmacon. I just wanted to add that sometimes it's easier to use quadraticCurveTo(), as it has fewer options. You specify the Bezier control point x and y, and the end point x and y. However, you don't get the convenience of a radius parameter.

this.bgGraphics.quadraticCurveTo(60, 0, 60, 15);

Here's a comparison:

- arcTo(x1,y1,x2,y2,r);
x1  The x-coordinate of the first tangent   
y1  The y-coordinate of the first tangent   
x2  The x-coordinate of the second tangent  
y2  The y-coordinate of the second tangent  
r   The radius of the arc

- quadraticCurveTo(cpx,cpy,x,y);
cpx The x-coordinate of the Bézier control point    
cpy The y-coordinate of the Bézier control point    
x   The x-coordinate of the ending point    
y   The y-coordinate of the ending point

It's hugely useful to see images of the above but I can't post them yet. Have a look on W3Schools or developer.mozilla.org for some good images of how the parameters work.

Upvotes: 2

Karmacon
Karmacon

Reputation: 3190

The arcTo() method is a bit confusing. The (x1,y1) coordinates is not the start point of the curve. Think of it more like points for the bezier handles. In order to get the arc you want, you need to pull a bezier handle straight along the x axis. So your method should actually look like this:

this.bgGraphics.arcTo(60, 0, 60, 15, 15);

enter image description here

Upvotes: 5

Patrick
Patrick

Reputation: 138

Since it's all one color, how about drawing a rounded rect with Graphics.drawRoundedRect and then drawing over the rounded parts that you don't want? You would draw a rounded rect the full size, and then cover up the corners that you want square with normal rects, like this:

Example of drawing with rectangles

Upvotes: 3

Related Questions