如何使用 FabricJS 克隆画布?

fabricjsjavascripthtml5 canvas更新于 2025/1/28 2:52:17

在本文中，我们将学习如何使用 FabricJS 克隆画布。我们可以使用 clone() 方法克隆画布实例。通常，当我们想要将画布实例远程发送到其他地方时，这很有用，通常以 JSON 形式发送画布实例克隆而不是发送画布图像是个好主意。 clone() 方法可帮助我们创建任何画布实例及其对象的克隆。

语法

clone(callback: Object, propertiesToInclude: Array)

参数

回调(可选) − 此参数是一个使用克隆调用的回调函数。
propertiesToInclude(可选) −此参数包括我们希望包含在克隆画布实例中的任何其他属性。这必须是数组的形式。

示例 1

克隆画布并渲染它

让我们看一个代码示例，了解如何使用回调方法克隆实例。 clone() 方法接收回调函数作为第一个参数，在其中我们将克隆的画布对象转换为 JSON。这个新的克隆画布对象现在被覆盖到画布上。

<!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>Cloning a Canvas in Fabric.js</h2>
   <canvas id="canvas"></canvas>
   <script>
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas");
      var circle = new fabric.Circle({
         left: 115,
         top: 50,
         radius: 50,
         fill: "#85bb65",
      });
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      canvas.clone(function(clonedCanvas) {
         // 将克隆的 Canvas 对象转换为 JSON
         let canvasJSON = clonedCanvas.toJSON();
         // 将新克隆的 Canvas 对象加载到画布
         canvas.loadFromJSON(canvasJSON);
      });
   </script>
</body>
</html>

示例 2

将附加属性传递给 clone 方法

在此示例中，我们将了解如何将附加属性传递给画布并允许它们存在于克隆的画布中。默认情况下不会克隆附加属性；我们必须使用第二个参数传递我们希望在克隆实例中存在的属性名称。

<!DOCTYPE html>
<html>
<head>
   <!-- 添加 Fabric JS 库-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>How to clone a canvas using Fabric.js</h2>
   <p>Inspect this output canvas on the browser. You will find the additional properties have been recorded.</p>
   <canvas id="canvas"></canvas>
   <script>
      // 启动一个canvas实例
      var canvas = new fabric.Canvas("canvas", {
         "myRandomProperty": "value"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      canvas.clone(function(clonedCanvas) {
         // 记录克隆的 Canvas 以检查是否添加了
         // 附加属性
         console.log(clonedCanvas);
      },
      ["myRandomProperty"]);
   </script>
</body>
</html>

现在，在浏览器上检查此输出画布，您将看到以下值。请注意，我们提供的附加属性"myRandomProperty"已被记录。