数据结构
网络
关系数据库管理系统(RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装研究
法律研究FabricJS – 如何禁用线对象中的多个特定控制点？
在本教程中，我们将学习如何使用 FabricJS 禁用线对象的多个特定控制点。线元素是 FabricJS 提供的基本元素之一，用于创建直线。由于线元素在几何上是一维的，并且不包含内部，因此它们永远不会被填充。我们可以通过创建 fabric.Line 的实例，指定线的 x 和 y 坐标并将其添加到画布上来创建线对象。为了禁用线对象的多个特定控制点，我们使用setControlsVisibility 方法。
语法
setControlsVisibility(options: Object): fabric.Object
参数
options − 此参数接受一个对象值，用于设置控件的可见性状态。可能的值为：
‘tl’ − 此属性接受一个布尔值，用于启用或禁用左上角控制点。
‘tr’ − 此属性接受一个布尔值，用于启用或禁用右上角控制点。
‘br’ − 此属性接受一个布尔值，用于启用或禁用右下角控制点。
‘bl’ − 此属性接受一个布尔值，用于启用或禁用左下角控制点。
‘ml’ − 此属性接受一个布尔值，用于启用或禁用中间左侧控制点。
‘mt’ − 此属性接受一个布尔值，用于启用或禁用中间顶部控制点。
‘mr’ − 此属性接受一个布尔值，用于启用或禁用中间右侧控制点。
‘mb’ − 此属性接受一个布尔值，用于启用或禁用中间底部控制点。
‘mtr’ − 此属性接受一个布尔值，用于启用或禁用中间顶部旋转控制点。
使用setControlsVisibility 方法
示例
让我们来看一个代码示例，看看使用setControlsVisibility 方法时的输出。setControlsVisibility 方法设置多个指定控件的可见性。在本例中，由于我们为‘tl’和‘bl’控件传递了 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>Using setControlsVisibility method</h2> <p> You can select the line object to see that the bottom-left and top-left controls have been disabled </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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 6, }); // Add it to the canvas canvas.add(line); // Using setControlsVisibility method line.setControlsVisibility({ tl: false, bl: false, }); </script> </body> </html>
使用setControlsVisibility 方法禁用中间顶部旋转控制点
示例
在这个例子中，我们将使用setControlsVisibility 方法来禁用‘mtr’控件，它也被称为中间顶部旋转控件。
<!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>Using setControlsVisibility method</h2> <p> You can select the line object to see that the middle-top-rotate control has been disabled </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 Line object var line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 6, }); // Add it to the canvas canvas.add(line); // Using setControlsVisibility method line.setControlsVisibility({ 'mtr': false, }); </script> </body> </html>
更新于：2022年10月21日
498 次浏览
广告