Fabric.js 圆形 lockUniScaling 属性

在本文中，我们将看到如何使用FabricJS锁定画布圆形的非均匀缩放，以保持对象的纵横比。画布表示圆形可移动并可根据需求进行拉伸。此外，当涉及初始描边颜色、填充颜色、描边宽度或半径时，可以自定义圆形。
为了实现这一目标，我们将使用一个名为FabricJS的JavaScript库。在使用CDN导入库之后，我们将在标签中创建一个包含我们的圆形的块。之后，我们将使用FabricJS提供的Canvas和Circle的实例，并使用lockUniScaling属性锁定圆形的非均匀缩放，在Canvas上呈现出给定的圆形，就像下面的示例中所示。
语法：

fabric.Circle({
    radius: number,
    lockUniScaling: boolean
});

参数: 此函数接受上述两个参数，并具体描述如下：

radius： 此参数指定了圆的半径。
lockUniScaling： 此参数指定是否锁定非均匀缩放。

示例: 此示例使用FabricJS来锁定画布上圆的非均匀缩放。

<!DOCTYPE html>
<html>
 
<head>
    <title> 
        Fabric.js Circle lockUniScaling Property
    </title>
 
    <!-- FabricJS CDN -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
</head>
 
<body>
    <center>
        <h1 style="color: green;">
            GeeksforGeeks
        </h1>
 
        <b>
            lock non-uniform scaling of a canvas 
            circle using FabricJS
        </b>
    </center>
 
    <canvas id="canvas" width="600" height="200" 
        style="border:1px solid #000000">
    </canvas>
 
    <script>
 
        // Initiate a Canvas instance
        var canvas = new fabric.Canvas("canvas");
 
        // Initiate a Circle instance
        var circle = new fabric.Circle({
            radius: 50,
            lockUniScaling: true
        });
 
        // Render the circle in canvas
        canvas.add(circle);
    </script>
</body> 
 
</html>

输出：

Fabric.js 圆形 lockUniScaling 属性