降低高度时如何防止边框半径变形？

问题描述 投票：0回答：1

复制链接

https://jsfiddle.net/YashChapani/g0xm9tqv/2/

重现步骤

  1. 创建织物。 js 具有固定宽度和高度的矩形对象。
  2. 对矩形应用边框半径。
  3. 显着减小矩形的高度（例如，将其减小到远小于宽度的值）。
  4. 观察边框半径的扭曲外观，这可能看起来不均匀或视觉上不正确，类似于图像中显示的问题。

预期行为

无论高度如何，矩形的边框半径都应保持比例且平滑圆润。

实际行为

当矩形的高度减小时，边框半径会出现扭曲并表现出意外。

代码：

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

版本信息：

  • 节点版本：20.16.0
  • Fabric.js：6.4.0

image

image

angular fabricjs angular18
1个回答
0
投票

您可以使用矩形

scaling
事件来更新
width
和
height
，以便将缩放设置为
1
并且更新矩形
height
和
width
。

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

rect.on("scaling", function () {
  this.set({
    width: this.width * this.scaleX,
    height: this.height * this.scaleY,
    scaleX: 1,
    scaleY: 1,
  })
})

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

canvas.renderAll()
<!DOCTYPE html>
<html>

<head>
    <title>Fabric.js Adjustable Dashed Line</title>
    <!-- Using Fabric.js version 6.4.0 -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js"></script>
</head>

<body>
    <canvas id="canvas"></canvas>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.