如何使用 FabricJS 以编程方式实现删除所有操作?

fabricjsjavascripthtml5 canvas更新于 2024/9/14 22:36:17

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

为了以编程方式实现删除所有操作，我们需要使用 clear 方法。此方法清除实例的所有上下文。

语法

clear(): fabric.Canvas

示例 1:在 Polygon 上以编程方式实现删除所有操作

让我们看一个代码示例，以了解如何在 Polygon 上以编程方式实现删除所有操作。我们创建了一个名为 Remove() 的函数，当我们单击 Remove 按钮时，该函数将被调用。在这里，我们使用 clear() 方法从画布中删除所有 Polygon 实例。

<!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>Implementing delete-all programmatically on Polygon</h2>
   <p>
      You can click on the Remove button which removes all instances of Polygon from the canvas
   </p>
   <button id="btn" onclick="Remove()" style="padding: 3px">Remove</button> 
   <canvas id="canvas"></canvas>
   <script>
      
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // 启动 Remove 函数
      function Remove() {
         canvas.clear().renderAll();
      }
      
      // 初始化多边形对象
      var polygon1 = new fabric.Polygon(
         [
            { x: 30, y: 50 },
            { x: 70, y: 50 },
            { x: 0, y: 0 },
            { x: 70, y: 0 },
         ],
         {
            left: 110,
            top: 40,
            fill: "#1e90ff",
            strokeWidth: 4,
            stroke: "black",
            scaleX: 1.5,
            scaleY: 1.5,
            objectCaching: false,
         }
      );
      
      // 初始化另一个多边形对象
      var polygon2 = new fabric.Polygon(
         [
            { x: 60, y: 90 },
            { x: 100, y: 20 },
            { x: 55, y: 40 },
            { x: 75, y: 50 },
         ],
         {
            left: 200,
            top: 60,
            fill: "#080808",
            strokeWidth: 4,
            stroke: "red",
            scaleX: 1.5,
            scaleY: 1.5,
            objectCaching: false,
         }
      );
      
      // 将它们添加到画布
      canvas.add(polygon1, polygon2);
   </script>
</body>
</html>

示例 2:在 Rectangle 上以编程方式实现 delete-all

让我们看一个代码示例，以了解如何在 Rectangle 上以编程方式实现 delete-all。我们已启动两个矩形对象并将它们添加到画布。只要我们单击 Remove 按钮，所有对象都将从画布中删除。

<!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>Implementing delete-all programmatically on Rectangle</h2>
   <p>
      You can click on the Remove button which removes all instances of rectangle from the canvas
   </p>
   <button id="btn" onclick="Remove()" style="padding: 3px">Remove</button>
   <canvas id="canvas"></canvas>
   <script>
      
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating Remove function
      function Remove() {
         canvas.clear().renderAll();
      }
      
      // 初始化一个矩形对象
      var rectangle1 = new fabric.Rect({
         width: 50,
         height: 30,
         left: 110,
         top: 40,
         fill: "#1e90ff",
         strokeWidth: 4,
         stroke: "black",
         objectCaching: false,
      });
      
      // 初始化另一个矩形对象
      var rectangle2 = new fabric.Rect({
         width: 50,
         height: 30,
         left: 200,
         top: 60,
         fill: "#080808",
         strokeWidth: 4,
         stroke: "red",
         objectCaching: false,
      });
      
      // 将它们添加到画布
      canvas.add(rectangle1, rectangle2);
   </script>
</body>
</html>