FabricjS 如何用Polyline对象获得Canvas的缩放级别

我们可以通过创建 fabric.Polyline 的实例来创建 Polyline 对象。一个折线对象的特点是由一组连接的直线段组成。由于它是FabricJS的基本元素之一，我们也可以通过应用角度、不透明度等属性来轻松定制它。

为了找到当前的缩放级别，我们使用 getZoom() 方法。该方法返回一个代表缩放级别的数字。

语法

getZoom(): Number

示例1：使用getZoom()方法

让我们看一个代码例子，看看我们如何通过使用 getZoom() 方法找到带折线对象的画布的缩放级别。我们将在控制台中记录该值。在这个例子中，我们将记录默认值，它将是1。

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using the getZoom() method</h2>
   <p> You can open Console from Dev tools and see the zoom level </p>
   <canvas id="canvas"></canvas>
   <script>

      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a polyline instance
      var polyline = new fabric.Polyline(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
         ],
         {
            fill: "white",
            stroke: "blue",
            strokeWidth: 2,
         }
      );

      // Add it to the canvas
      canvas.add(polyline);

      // Using getZoom() method
      var zoomLevel = canvas.getZoom();
      console.log("Zoom Level: ", zoomLevel);
   </script>
</body>
</html>

例子2：使用getZoom()方法和放大的折线

让我们看一个代码例子，我们将使用 setZoom() 设置缩放，然后使用 getZoom() 方法获得新的缩放值。我们传递的值是 1.3 ，它将被放大，并在输出中可见，该值也将在控制台中显示为 1.3。

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body> 
   <h2>Using the getZoom() method and with a zoomed in polyline</h2>
   <p> You can open Console from Dev tools and see the zoom level </p>
   <canvas id="canvas"></canvas>
   <script>

      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a polyline instance
      var polyline = new fabric.Polyline(
         [
            { x: 500, y: 20 },
            { x: 550, y: 60 },
            { x: 550, y: 200 },
            { x: 350, y: 200 },
            { x: 350, y: 60 },
         ],
         {
            fill: "white",
            stroke: "blue",
            strokeWidth: 2,
         }
      );

      // Add it to the canvas
      canvas.add(polyline);

      // Set the zoom level
      canvas.setZoom(1.3);

      // Using getZoom() method
      var zoomLevel = canvas.getZoom();
      console.log("Zoom Level: ", zoomLevel);
   </script>
</body>
</html>