如何解决Fabric.js矩形高度缩小时圆角变形问题？

复现步骤 #

• 创建一个固定宽高的Fabric.js Rectangle对象。
• 为该矩形设置border-radius（圆角）。
• 大幅缩小矩形的高度（例如，将高度缩小至远小于宽度的值）。
• 观察圆角出现变形的情况，其外观可能不均匀或视觉异常，与图片中展示的问题类似。

预期表现 #

无论高度如何变化，矩形的圆角都应保持比例协调且平滑圆润。

实际表现 #

当矩形高度缩小时，圆角出现变形且表现不符合预期。

代码示例：

const canvas = new fabric.Canvas('canvas');
let canvasWidth = 640;
let canvasHeight = 640;

canvas.setWidth(canvasWidth);
canvas.setHeight(canvasHeight);

const rect = new fabric.Rect({
      left: 145, // Center the rectangle within the canvas
      top: 145,  // Center the rectangle within the canvas
      fill: 'blue',
      width: 350,
      height: 350,
      rx: 20, // Horizontal border radius
      ry: 20  // Vertical border radius
});

// Add rectangle to the canvas
canvas.add(rect);

canvas.renderAll();

版本信息：

• Node版本：20.16.0
• Fabric.js版本：6.4.0

内容的提问来源于stack exchange，提问作者yash chapani