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

在本文中，我们将学习如何使用fabricjs禁用矩形的可选择性。矩形是fabricjs提供的各种形状之一。为了创建一个矩形，我们需要创建一个fabric.rect类的实例并将其添加到画布中。为了修改一个对象，我们必须在fabricjs中选择它。然而，我们可以通过使用可选择属性来改变这种行为。
语法new fabric.rect{ selectable: boolean }: object)
参数选项（可选） - 此参数是一个对象，用于为矩形提供其他自定义。使用此参数，可以更改与可选择性质相关的颜色、光标、笔画宽度和许多其他属性。
选项键可选择性 - 此属性接受一个布尔值。当它被赋值为“false”时，该对象不能被选中进行修改。其默认值为true。
示例1默认行为或当可选择性属性设置为“true”时
让我们看一个代码示例，以了解当默认情况下可选择性属性设置为true时对象的行为。当可选择性属性设置为true时，我们可以选择一个对象，在画布上移动它并对其进行修改。
<!doctype html><html><head>  <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 provethat 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>  <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禁用矩形的可选择性？的详细内容。

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

推荐信息