How to draw a rectangle with rounded corners

[espruino-discuss]

Posted at 2020-03-13 by @MaBecker

Graphic lib has a new function that can calculate point on a quadratic bezier curve which can be use to draw quarter circle.

Combine four of them will draw a rectangle with rounded corners.

g.clear();

function RectRnd(x1,y1,x2,y2,r) {
      pp = [];
      pp.push.apply(pp,g.quadraticBezier([x2-r,y1, x2,y1,x2,y1+r]));
      pp.push.apply(pp,g.quadraticBezier([x2,y2-r,x2,y2,x2-r,y2]));
      pp.push.apply(pp,g.quadraticBezier([x1+r,y2,x1,y2,x1,y2-r]));
      pp.push.apply(pp,g.quadraticBezier([x1,y1+r,x1,y1,x1+r,y1]));
      return pp;
}

function fillRectRnd(x1,y1,x2,y2,r) {
      g.fillPoly(RectRnd(x1,y1,x2,y2,r),1);
}

function drawRectRnd(x1,y1,x2,y2,r) {
      g.drawPoly(RectRnd(x1,y1,x2,y2,r),1);
}

drawRectRnd(10,10,150,50,5);
fillRectRnd(10,60,150,120,5);

---

Attachments:

• screenshot (2).png

[espruino-discuss]

Posted at 2020-03-14 by @allObjects

Great... fill though has still some issues: right-top and left-bottom... before it was both right top and bottom. Fill seems obviously a really 'neat' problem to solve.