Fabric.js Polygon minScaleLimit属性

在本文中，我们将看到如何使用 FabricJS 设置画布多边形的最小缩放限制，以便多边形的大小不能小于该限制。画布多边形指的是可移动的多边形，可以根据需求进行拉伸。此外，当涉及到初始描边颜色、形状、填充颜色或描边宽度时，可以对多边形进行自定义设置。

为了实现这一目的，我们将使用一个名为 FabricJS 的JavaScript库。在导入库之后，我们将在body标签中创建一个包含多边形的画布块。然后，我们将使用 FabricJS 提供的Canvas和polygon的实例，并使用 minScaleLimit 属性设置多边形的最小缩放限制，并像下面的示例一样在Canvas上呈现多边形。

语法：

fabric.Polygon([
      { x: pixel, y: pixel },
      { x: pixel, y: pixel },
      { x: pixel, y: pixel },
      { x: pixel, y: pixel },
      { x: pixel, y: pixel }],
      {
                      minScaleLimit: number
      }
)

参数：

此属性接受上述提及的单个参数，并在下面进行描述：

minScaleLimit： 它是一个数字，用于指定在多边形上使用的最小比例限制。

注意：

使用像素维度来创建多边形是必须的。

下面的示例演示了JavaScript中的 Polygon minScaleLimit Property ：

示例：

<!DOCTYPE html> 
<html> 
<head> 
  <!-- Loading the FabricJS library -->
  <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js"> 
  </script> 
</head> 
<body> 
  <div style="text-align: center; 
              width: 600px;"> 
    <h1 style="color: green;"> 
      GeeksforGeeks 
    </h1> 
    <b> 
      Fabric.js | Polygon minScaleLimit Property 
    </b> 
  </div> 
  <canvas id="canvas" width="600" height="400"
          style="border:1px solid #000000;"> 
  </canvas> 
  <script> 
  
    // Initiate a Canvas instance  
    var canvas = new fabric.Canvas("canvas"); 
  
    // Initiate a polygon instance  
    var polygon = new fabric.Polygon([ 
      { x: 295, y: 10 }, 
      { x: 235, y: 198 }, 
      { x: 385, y: 78 }, 
      { x: 205, y: 78 }, 
      { x: 355, y: 198 }], { 
  
      // Specify the amount 
      // of the minimum scale 
      minScaleLimit: 1.5 
    }); 
  
    // Render the polygon in canvas  
    canvas.add(polygon);  
  </script> 
</body> 
</html>

输出：

Fabric.js Polygon minScaleLimit属性