How to draw a rectangle with rounded corners

Posted on Fri 13th, March 2020

• #1

MaBe

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);

1 Attachment

• #2

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.

Post a reply
- Bold
- Italics
- Link
- Image
- List
- Quote
- code
- Preview
Formatting Help

Don't worry about formatting, just type in the text and we'll take care of making sense of it. We will auto-convert links, and if you put asterisks around words we will make them bold.

Tips:

Create headers by underlining text with ==== or ----

To *italicise* text put one asterisk each side of the word

To **bold** text put two asterisks each side of the word

Embed images by entering:
![](https://www.google.co.uk/images/srpr/logo4w.png)
That's the hard one: exclamation, square brackets and then the URL to the image in brackets.

* Create lists by starting lines with asterisks

1. Create numbered lists by starting lines with a number and a dot

> Quote text by starting lines with >

Mention another user by @username

For syntax highlighting, surround the code block with three backticks:

```
Your code goes here
```
Just like Github, a blank line must precede a code block.

If you upload more than 5 files we will display all attachments as thumbnails.

For a full reference visit the Markdown syntax.

How to draw a rectangle with rounded corners

About

How to draw a rectangle with rounded corners

Actions

How to draw a rectangle with rounded corners

Formatting Help

About

How to draw a rectangle with rounded corners

Actions

Espruino