[Help for Bounty] Calculate Inner Border Radius of Wrapped Object

[ralphcode]

Hey 👋

I am looking for some help calculating rx and ry inline with Stroke's renderer. I am trying (and failing) to calculate the inner relative border radius to an outer wrapper rect. For layout and aesthetic purposes, I want to have the same non-linear border radius calculation continued to the inner element to avoid missmatched radii.

I've set up an example that demonstrates the situation I cannot find the correct math to solve: https://codepen.io/ralpharoo/pen/NWZwMwa

Examples that I cannot figure a workaround to include;

• Stroke 1 & Padding 0: Stroke's inner border radius is different to outer of image
• Stroke 10 & Padding 1: Stroke squares corners after a distance
• Stroke 1+ & Padding 1+: aesthetically when there is padding, the distance around the corner is not constant
• Stroke 0 & Padding 1+: Works nicely in current set up

Happy to pay a 100 USD bounty / charity donation to someone to help solve 🥇 Aim is to ensure that the alignment works in all cases in a responsive manner to any height / width image wrapped. The calculation must already be available, but I cannot figure how to use it 😅

Happy to consider alternative approaches but this is used in a complicated project and may not be possible.

Thanks in advanced!

[asturur]

i think any design/ css person could know the math, let me ask some

[asturur]

So the math is very simple, is inner radius + distance = outer radius.

Now what it makes a bit more complicated is that i think that works for dimensionless lines while you are working with strokewidth.

I m currently out but when i m back i ll play with the fiddle, if that simple rule doesn't help it may have to do with canvas small differences in drawing or fabric calculations

[asturur]

// Frame settings
let frameRoundingPercentX = 0.06;
let frameRoundingPercentY = 0.03;
let frameStrokePercent = 0.01;
let framePaddingPercent = 0.00;

let strokeRange = document.getElementById('stroke');
strokeRange.onchange = function (e) { 
  frameStrokePercent = strokeRange.value; 
  render(); 
  document.getElementById('strokeVal').innerText = (frameStrokePercent * 100) + '%';
};
strokeRange.value = frameStrokePercent;
let paddingRange = document.getElementById('padding');
paddingRange.onchange = function (e) { 
  framePaddingPercent = paddingRange.value; 
  render(); 
  document.getElementById('paddingVal').innerText = (framePaddingPercent * 100) + '%';
};
paddingRange.value = framePaddingPercent;

let canvas = new fabric.Canvas('canvas', { 
  renderOnAddRemove: false,
  preserveObjectStacking: true,
  skipOffscreen: false,
  enableRetinaScaling: false 
});
let canvasWidth = canvas.width;
let canvasHeight = canvas.height;

// Load an image of size;
let targetHeight = 270, targetWidth = 585; // TODO: FROM INPUT
let image;
fabric.Image.fromURL('https://placehold.co/' + targetHeight + 'x' + targetWidth + '/FFFFFF/000000/png', function(fabricImage) {
  fabricImage.strokeWidth = 0;
  image = fabricImage;
  render();
});

function render() {
  canvas.clear();
  canvas.set({ backgroundColor: 'red' });
  
  let imageWidth = image.width;
  let imageHeight = image.height; 
  
  // Calculate relative frame to image
  let innerPadding = framePaddingPercent * imageWidth;
  let frameStroke = frameStrokePercent * imageHeight;
  let frameWidth = imageWidth + (innerPadding * 2) + (frameStroke * 1); // Fabric strokes half-in-half-out, so only 1x for extra padding
  let frameHeight = imageHeight + (innerPadding * 2) + (frameStroke * 1);
  let frameRoundingX = frameRoundingPercentX * frameWidth;
  let frameRoundingY = frameRoundingPercentY * frameHeight;
  let frame = new fabric.Rect({
    width: frameWidth,
    height: frameHeight,
    originX: 'center', 
    originY: 'center',
    fill: 'rgb(255, 255, 255, 0.5)',
    stroke: 'rgb(0, 0, 0, 1)',
    strokeWidth: frameStroke,
    rx: frameRoundingX,
    ry: frameRoundingY
  });
  canvas.add(frame);
  
  // Update image
  // Calculate relative rounding for inner object;
  // TODO: CALCULATE RELATIVE TO OUTER, SO ALIGNS WITH INNER 
  let imageRoundingX = frameRoundingX - frameStroke / 2 - innerPadding;
  let imageRoundingY = frameRoundingY - frameStroke / 2 - innerPadding;
  console.log(imageRoundingX, imageRoundingY)
  image.set({ 
    originX: 'center', 
    originY: 'center',
    clipPath: new fabric.Rect({
      originX: 'center',
      originY: 'center',
      width: imageWidth,
      height: imageHeight,
      rx: imageRoundingX,
      ry: imageRoundingY,
    })
  }).setCoords();
  canvas.add(image);
  
  // Position group on screen;
  debugger;
  group = new fabric.Group([frame, image], { objectCaching: false });
  group.scaleToWidth(canvasWidth - (canvasWidth * 0.05));
  if (group.getScaledHeight() > canvasHeight) {
    group.scaleToHeight(canvasHeight - (canvasHeight * 0.05));
  }
  group.top = (canvasHeight - group.getScaledHeight()) / 2;
  group.left = (canvasWidth - group.getScaledWidth()) / 2;
  
  // Render
  canvas.renderAll();
}

This looks consistent to me, but it goes to 0 pretty quickly

yes seems to be a good consistent padding.
The solution was just to look at this:
let imageRoundingX = frameRoundingX - frameStroke / 2 - innerPadding;
let imageRoundingY = frameRoundingY - frameStroke / 2 - innerPadding;
and calculate imageRounding based on the value in pixels of the rect and not starting again from a percentage.
That may change if the image has a scaling factor, but i think it will boil down to just have the image rouding values dividide by the image scale

[ralphcode]

Amazing asturur, that sure is simple 😅 As you mention, it degrades to zero quickly so I will likely adjust this based on stroke rather than padding to find a happy middle ground that looks correct. Thanks so much, appreciate you and your help 🙏 I'll send via sponsor 🙌

[asturur]

You didn't have to, but thanks.