如何使用 FabricJS 使多边形对象放大和缩小?

fabricjsjavascripthtml5 canvas更新于 2024/9/15 4:28:17

我们可以通过创建 fabric.Polygon 实例来创建多边形对象。多边形对象的特征可以是任何由一组连接的直线段组成的封闭形状。由于它是 FabricJS 的基本元素之一，我们还可以通过应用角度、不透明度等属性轻松自定义它。

语法

canvas.on("mouse:wheel", callbackFunction);

示例 1:在多边形对象上应用缩放控件

让我们看一个代码示例，了解如何在多边形对象上应用缩放控件。我们可以移动鼠标滚轮来放大或缩小。我们添加了事件监听器来监听鼠标滚动并分别使用setZoom更新缩放值。

<!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>Applying zoom controls on a Polygon object</h2>
   <p>You can move the mouse wheel to zoom-in or zoom-out</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // 初始化一个多边形实例
      var polygon = new fabric.Polygon(
         [
            { x: 0, y: 50 },
            { x: 50, y: 0 },
            { x: 0, y: 0 },
         ],
         {
            left: 30,
            fill: "#aa98a9",
            stroke: "#002e63",
            strokeWidth: 2,
         }
      );
      
      // 将其添加到画布
      canvas.add(polygon);
      
      // 使用鼠标:滚轮事件
      canvas.on("mouse:wheel", function (options) {
         
        // 获取滚轮滚动值
        var delta = options.e.deltaY;
        
        // 获取当前缩放值
        var zoom = canvas.getZoom();
        
        // 更新当前缩放值
        zoom = (0.999 ** delta) * zoom;
        
        // 设置当前缩放值
        canvas.setZoom(zoom);
        options.e.preventDefault();
        options.e.stopPropagation();
      });
   </script>
</body>
</html>

示例 2:在矩形对象上应用缩放控件

让我们看一个代码示例，以了解如何在其他对象(如矩形)中应用缩放控件。我们已初始化一个宽度为 100px、高度为 60px 的矩形对象。我们可以移动鼠标滚轮来放大或缩小。

<!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>Applying zoom controls on a Rectangle object</h2>
   <p>You can move the mouse wheel to zoom-in or zoom-out</p>
   <canvas id="canvas"></canvas>
   <script>
      
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // 初始化一个矩形实例
      var rectangle = new fabric.Rect({
         height: 60,
         width: 100,
         left: 30,
         fill: "#aa98a9",
         stroke: "#002e63",
         strokeWidth: 2,
      });
      
      // 将其添加到画布
      canvas.add(rectangle);
      
      // 使用鼠标:滚轮事件
      canvas.on("mouse:wheel", function (options) {
         
        // 获取滚轮滚动值
        var delta = options.e.deltaY;
        
        // 获取当前缩放值
        var zoom = canvas.getZoom();
        
        // 更新当前缩放值
        zoom = (0.999 ** delta) * zoom;
        
        // 设置当前缩放值
        canvas.setZoom(zoom);
        options.e.preventDefault();
        options.e.stopPropagation();
      });
   </script>
</body>
</html>