0

There is almost a duplicate for what I'm asking: almost duplicate

But I want to make the rounded corners at the top.

I tried to modify the code looking at the documentation but I'm pretty new to this drawing in Java and I didn't get it to work. :/

So my question is, how would I modify this: 

moveTo(0,0);
lineTo(0, radius);
curveTo(0, 0, radius, radius, 0, radius);
lineTo(width, height - radius);
curveTo(width, height, width, height, width - radius, height);
lineTo(0, height);
closePath();

to make the rounded corners be the top corners.

I really appreciate all answers that can help me with this.

Thanks

Community
  • 1
  • 1
malmling
  • 2,398
  • 4
  • 19
  • 33

1 Answers1

3

The key is you want to visualize how the code is drawing the object. The original code starts at the top left corner and draws in a clockwise direction.

First, you need to move your start point, this will be much easier if you start on a corner, not a rounded edge.

Next, you need to modify your draws so that your rounding the edges in the right place.

moveTo(0, height);
lineTo(0, radius);
curveTo(0, 0, 0, 0, radius, 0);
lineTo(width - radius, 0);
curveTo(width, 0, width, 0, width, radius);
lineTo(width, height);
closePath();

So, what I've done here is:

  1. Start in the bottom left corner
  2. Move vertically to the start of the curve located in the top left corner
  3. Draw the curve in the top left corner
  4. Move horizontally to the start of the curve located in the top right corner
  5. Draw the curve in the top right corner
  6. Move vertically to the bottom right corner
  7. Close the shape (move horizontally to the bottom left corner)
user3507600
  • 1,075
  • 9
  • 15
  • Thank you for a great answer! This really makes it clear to me how to think. If you want you could a little bit more about step 3. and 5. , with the curves, how it is drawn with the 3 different x&y points. I'll try this out as soon as I can and see if it works. – malmling Apr 30 '14 at 20:29
  • 1
    @raxelsson, the curveTo method draws a "Bézier curve that intersects both the current coordinates and the specified coordinates (x3,y3)" ([reference, check the curveTo methods](http://docs.oracle.com/javase/7/docs/api/java/awt/geom/Path2D.html)). You may want to check out Wikipedia for more on Bézier curves, but essentially the reason the two points are the same is to convert it to a quadratic Bézier curve. – user3507600 May 01 '14 at 12:37