Calculate the radius of rectangle corner

2.1k Views Asked by At

TL;DR - rx = |x1-x0|; ry = |y1-y0|; is the formula for figuring out the radius of a rounded rectangle corner. It works with the first set of data but not the second. Why?

I need to calculate the radius of a corner of a rectangle and the data I have to figure it out with is some points along the curve. I am using Adobe Animate to make these rectangles and using code to get the data you see below. Below is picture to illustrate what the data shows me:

3 points along corner

I have learned that rx = |x1-x0|; ry = |y1-y0|;. So the topLeft radius is 321.4 - 301 and that gives me 20.4, which is pretty close to accurate (I told Animate to make the corner radii 20).

Here is the data I have to work with:

middleY: 321.4
middleX: 272.625
height: 40.8
width: 159.25

top: 301
bottom: 341.8
left: 193
right: 352.25
0: x: 331.85, y: 301
1: x: 346.25, y: 306.95
2: x: 352.25, y: 321.4
3: x: 352.25, y: 341.8
4: x: 213.4, y: 301
5: x: 193, y: 341.8
6: x: 193, y: 321.4
7: x: 198.95, y: 306.95

I have sorted it out to corners (top corners are curved and bottom are not):

    {
      "topLeft": [
        { "x": 213.4, "y": 301 },
        { "x": 193,"y": 321.4 },  -----> 321.4-301 = 20.4 OR 213.4-193 = 20.4
        { "x": 198.95,"y": 306.95 }
      ],
      "topRight": [
        { "x": 331.85,"y": 301 },
        { "x": 346.25,"y": 306.95 },     -----> 321.4-301 = 20.4 OR 352.25-331.85 = 20.4
        { "x": 352.25,"y": 321.4 }
      ],
      "bottomLeft": [
        { "x": 193,"y": 341.8 }
      ],
      "bottomRight": [
        { "x": 352.25,"y": 341.8 }
      ]
    }

When I make a rectangle with a smaller width and height but still a radius of 20, here is the data that I get:

top: 301.05
left: 199.55
height: 29
width: 144

middleY: 315.55 
middleX: 271.55
vertices: 
x: 343.55, y: 330.05,
x: 343.55, y: 314.9,
x: 338.1, y: 305.1,
x: 324.9, y: 301.05,
x: 205.05, y: 305.1,
x: 218.25, y: 301.05,
x: 199.55, y: 314.9,
x: 199.55, y: 330.05
"topLeft": [
  { "x": 205.05, "y": 305.1 },
  { "x": 218.25, "y": 301.05 },  ----->  314.05-301.05 = 13 OR 218.25-199.55 = 18.7
  { "x": 199.55, "y": 314.9 }
],
"topRight": [
  { "x": 343.55, "y": 314.9 },
  { "x": 338.1, "y": 305.1 },   ----->  314.05-301.05 = 13 OR 343.55-324.9 = 18.65
  { "x": 324.9, "y": 301.05 }
],
"bottomLeft": [
  { "x": 199.55, "y": 330.05 }
],
"bottomRight": [
  { "x": 343.55, "y": 330.05 }
]

Is it possible that Animate is giving me the wrong numbers or is there a way to calculate the radius to get 20 and I am just doing it wrong?

Or could there be some correlation between the width and height and the radius?

I found this site: https://planetcalc.com/8116/. It gives a radius of 20 for the first set of data (here) and a radius of 17 for the second set of data (here). I am leaning toward that the data is messed up.