is there a method to draw/fill a rounded rectangle?

You are reading a single comment by @Andreas_Rozek and its replies. Click here to read the full conversation.

•

RaoulDuke

Funny, i would have thought Bresenham´s would be a lot faster. It seems to be (i just checked in the emulator, not on the real hardware), but only below a radius of about 12. Most of the code is straight from Wikipedia, no optimization at all:

function bRoundedRectangle (x1,y1,x2,y2,r) {
    var f = 1 - r;
    var ddF_x = 0;
    var ddF_y = -2 * r;
    var x = 0;
    var y = r;
    g.drawLine(x1+r,y1,x2-r,y1);
    g.drawLine(x1+r,y2,x2-r,y2);
    g.drawLine(x1,y1+r,x1,y2-r);
    g.drawLine(x2,y1+r,x2,y2-r);
    var cx1=x1+r;
    var cx2=x2-r;
    var cy1=y1+r;
    var cy2=y2-r;
    while(x < y)
    {
      if(f >= 0)
      {
        y--;
        ddF_y += 2;
        f += ddF_y;
      }
      x++;
      ddF_x += 2;
      f += ddF_x + 1;
      g.setPixel(cx2 + x, cy2 + y);
      g.setPixel(cx1 - x, cy2 + y);
      g.setPixel(cx2 + x, cy1 - y);
      g.setPixel(cx1 - x, cy1 - y);
      g.setPixel(cx2 + y, cy2 + x);
      g.setPixel(cx1 - y, cy2 + x);
      g.setPixel(cx2 + y, cy1 - x);
      g.setPixel(cx1 - y, cy1 - x);
    }
  }

•

Andreas_Rozek in reply to @RaoulDuke

this code is more compact than mine and doesn't need Math.sin, at least - but I'd have to modify it in order to be able to draw and/or fill a rounded rectangle. Radii below 12 are certainly the most common ones.

Thanks a lot for this contribution!

•

RaoulDuke in reply to @Andreas_Rozek

Here is a version for filled rectangles. Performance is roughly the same, faster for r<=12, slower for larger radii. Performance is an issue here, on my Bangle2, "bFillRoundedRectangle(10,10,160,160,13);" takes about 85ms. For UI use, i think a LUT for rounded corners would be the best approach. All coordinates needed for a circle covering the complete screen would take up just 52 bytes.

 function bFillRoundedRectangle (x1,y1,x2,y2,r) {
    var f = 1 - r;
    var ddF_x = 0;
    var ddF_y = -2 * r;
    var x = 0;
    var y = r;
    g.fillRect(x1+r,y1,x2-r,y2);
    var cx1=x1+r;
    var cx2=x2-r;
    var cy1=y1+r;
    var cy2=y2-r;
    while(x < y)
    {
      if(f >= 0)
      {
        y--;
        ddF_y += 2;
        f += ddF_y;
      }
      x++;
      ddF_x += 2;
      f += ddF_x + 1;
      g.drawLine(cx1-x,cy1-y,cx1-x,cy2+y);
      g.drawLine(cx1-y,cy1-x,cx1-y,cy2+x);
      g.drawLine(cx2+x,cy1-y,cx2+x,cy2+y);
      g.drawLine(cx2+y,cy1-x,cx2+y,cy2+x);
    }
  }

is there a method to draw/fill a rounded rectangle?

About

Espruino