cannot draw a Basic roundRectangle

beginners
#1

Hello,

I’m having difficulty drawing a Basic roundRectangle!

the only way I managed to do it was with circles and rectangles, but using alpha messes everything up:
ofCircle(x+10, y+10, 10);
ofCircle(x+90, y+10, 10);
ofCircle(x+90, y+90, 10);
ofCircle(x+10, y+90, 10);
ofRect(x+10, y, 80, 100);
ofRect(x, y+10, 100, 80);

I tried using ofVertex and ofCurveVertex, but I get some weird polygon, as if it ignored some of the vertex:
ofBeginShape();
ofVertex(10+x, y);
ofVertex(90+x, y);
ofCurveVertex(100+x, y+10);
ofVertex(100+x, y+90);
ofCurveVertex(90+x, y+100);
ofVertex(x+10, y+100);
ofCurveVertex(x, y+90);
ofVertex(x, y+10);
ofCurveVertex(X+10, y);
ofEndShape(true);

also tried with ofCurve, ofBezier and ofLine, but I still get some weird polygon drawing:
ofLine(10+x, y, 90+x, y);
ofCurve(80+x, y, 90+x, y, 100+x, y+10, 100+x, y+20);
ofLine(100+x, y+10, 100+x, y+90);

can anyone help?

thnks

#2

Hello Miguel,

I believe you will have to draw the shape procedurally, either by using ofBeginShape, or by dropping into “raw” opengl.

You need 4 straight lines for the sides and 4 quarter circles for the corners.
I would create a function allowing you to set width, height and corner rounding radius.
For the round bits, I would stay with ofVertex or glVertex and have a “circle” function generate the points necessary to define the corner quarter circles.

or… you could use a rounded rectangle texture maybe?

hope this helps.

best regards

ps. if you google for opengl rounded rectangles, you should be able to find some code.

#3

me again :smiley:

had a quick look around and found this post for processing that can be ported to OF easily.

quick and dirty port would be:

  
  
void roundedRect(float x, float y, float w, float h, float r) {  
    ofBeginShape();  
        ofVertex(x+r, y);  
        ofVertex(x+w-r, y);  
        quadraticBezierVertex(x+w, y, x+w, y+r, x+w-r, y);  
        ofVertex(x+w, y+h-r);  
        quadraticBezierVertex(x+w, y+h, x+w-r, y+h, x+w, y+h-r);  
        ofVertex(x+r, y+h);  
        quadraticBezierVertex(x, y+h, x, y+h-r, x+r, y+h);  
        ofVertex(x, y+r);  
        quadraticBezierVertex(x, y, x+r, y, x, y+r);  
    ofEndShape();  
}  
  
void quadraticBezierVertex(float cpx, float cpy, float x, float y, float prevX, float prevY) {  
  float cp1x = prevX + 2.0/3.0*(cpx - prevX);  
  float cp1y = prevY + 2.0/3.0*(cpy - prevY);  
  float cp2x = cp1x + (x - prevX)/3.0;  
  float cp2y = cp1y + (y - prevY)/3.0;  
  
  // finally call cubic Bezier curve function  
  ofBezierVertex(cp1x, cp1y, cp2x, cp2y, x, y);  
};

hope it helps

regards

david

#4

hello David,

worked perfectly! thanks very much :smiley:

all the best
Miguel