如何使用FabricJS禁用矩形的可选择性？-js教程-PHP中文网

如何使用FabricJS禁用矩形的可选择性？

PHPz

发布： 2023-08-25 09:25:04

转载

1099人浏览过

如何使用fabricjs禁用矩形的可选择性？

在本文中，我们将学习如何使用FabricJS禁用矩形的可选择性。矩形是FabricJS提供的各种形状之一。为了创建一个矩形，我们需要创建一个fabric.Rect类的实例并将其添加到画布中。为了修改一个对象，我们必须在FabricJS中选择它。然而，我们可以通过使用可选择属性来改变这种行为。

语法

new fabric.Rect{ selectable: Boolean }: Object)

登录后复制

参数

选项（可选） - 此参数是一个对象，用于为矩形提供其他自定义。使用此参数，可以更改与可选择性质相关的颜色、光标、笔画宽度和许多其他属性。

选项键

可选择性 - 此属性接受一个布尔值。当它被赋值为“false”时，该对象不能被选中进行修改。其默认值为true。

示例1

默认行为或当可选择性属性设置为“True”时

让我们看一个代码示例，以了解当默认情况下可选择性属性设置为True时对象的行为。当可选择性属性设置为True时，我们可以选择一个对象，在画布上移动它并对其进行修改。

<!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>Default behaviour; selectable property is set to True</h2>
   <p>You can try moving the rectangle around the canvas or scaling it to prove
that it's selectable.</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

登录后复制

示例2

将可选择属性作为键传递

在这个示例中，我们将可选择属性的值设置为False。这意味着我们不能再选择矩形对象进行修改。

<!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>Passing selectable property as key</h2>
   <p>You can try clicking on the rectangle to see that it is no longer selectable.</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 rectangle object
      var rect = new fabric.Rect({
         left: 105,
         top: 70,
         width: 170,
         height: 70,
         fill: "#dcdcdc",
         stroke: "#696969",
         strokeWidth: 5,
         selectable: false,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

登录后复制

以上就是如何使用FabricJS禁用矩形的可选择性？的详细内容，更多请关注php中文网其它相关文章！