6
$\begingroup$

I have two rectangles — one with a fill (blue) and one with a stroke (red). The red rectangle is being offset (depending on the stroke width) so that it appears snug and outside the edge of the blue rectangle.

This set up works great except when I need to round the corners.

As you can see I'm getting gaps between the rectangles and I'm stuck trying to figure out the math to calculate the right roundness amount for the outside rectangle (red).

Any ideas?

Rectangles

$\endgroup$
  • 1
    $\begingroup$ I was considering a similar solution to Nero's answer, but you've tagged this bezier-curve. Are you limited to using Bezier curves with thickness, or is drawing circular arcs actually an option? $\endgroup$ – Martin Ender Nov 18 '15 at 9:05
7
$\begingroup$

What you (probably) want to achieve is something like this:

box

When having a closer look at one of the corners and add a few lines, we see this:

corner

The black lines indicate that the center points of the circles along the borders of the red and blue boxes is the same. If the outer radius of the red box, for example, is $50px$, and the distance between the outer borders of the red and blue boxes is $25px$, this leads to a border radius of $50px - 25px = 25px$ for the blue box. The distance, obviously, is dependent on the stroke width of your red stroke.


Note: When creating the above images, I simply drew two filled boxes with rounded corners. So first a filled red box and then a smaller filled blue box above it. This also avoids some pixels being left white due to rounding errors (no pun intended).

$\endgroup$
  • $\begingroup$ Yes, that's what I'm after, but there's still an overlap. If it helps, I'm using Adobe After Effects’ shape layers and expressions to create this. Rectangle 1 is driving Rectangle 2's round corner value. e.g. Rectangle 1 Round Corners = 30 Rectangle 2 Stroke width = 40 Round Corners = 60 (30*2) produces this: !rectangles2 I've set the opacity of Rectangle 1 to 50% so you can see the overlap. The darker purple is the edge of Rectangle 2's stroke. I can supply by After Effects file if it will help. $\endgroup$ – Greg Gunn Nov 18 '15 at 20:37
  • $\begingroup$ @GregGunn If your inner/blue box has a border radius of $30px$ and the red stroke's width is $40px$, then the radius in the middle of the red stroke needs to be $30px + (40px/2) = 50px$. $\endgroup$ – Nero Nov 18 '15 at 20:46
  • $\begingroup$ @Nero Nailed it. That equation works perfectly—thank you. $\endgroup$ – Greg Gunn Nov 18 '15 at 20:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.