Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
FabricJS – How to check if a specified control is visible in Line?
In this article, we are going to learn about how to check if a specified control is visible in Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to check if a specified control is visible in Line object, we use the isControlVisible method.
Syntax
isControlVisible(controlKey: String): Boolean
Parameters
-
controlKey ? This parameter accepts a String which specifies the control key. The possible values are 'tl', 'tr', 'br' , 'bl', 'ml', 'mt', 'mr', 'mb', 'mtr'. They are listed below:
'tl' ? This property accepts a Boolean value which enables or disables the top-left control.
'tr' ? This property accepts a Boolean value which enables or disables the top-right control.
'br' ? This property accepts a Boolean value which enables or disables the bottom-right control.
'bl' ? This property accepts a Boolean value which enables or disables the bottom-left control.
'ml' ? This property accepts a Boolean value which enables or disables the middle-left control.
'mt' ? This property accepts a Boolean value which enables or disables the middle-top control.
'mr' ? This property accepts a Boolean value which enables or disables the middle-right control.
'mb' ? This property accepts a Boolean value which enables or disables the middle-bottom control.
'mtr' ? This property accepts a Boolean value which enables or disables the middle-top-rotate control.
Using isControlVisible Method for Visible Control
Let's see a code example to see the logged output when the isControlVisible method is used. The isControlVisible method returns a true or false value depending on whether the control key is visible or not. In this case, a true value is returned since the bottom-left control key is visible.
<!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 isControlVisible method</h2>
<p>
You can open console from dev tools and see that the logged output contains a true value
</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: 20,
});
// Add it to the canvas
canvas.add(line);
// Using isControlVisible method
console.log(
"Is the bottom-left control key visible? : ",
line.isControlVisible('bl')
);
</script>
</body>
</html>
Is the bottom-left control key visible? : true
Using isControlVisible Method for Invisible Control
In this example, we have used the isControlVisible to check if the middle-top-rotate control is visible or not. Here, a false value is returned since the middle-top-rotate control key is invisible.
<!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 isControlVisible method for an invisible control</h2>
<p>
You can open console from dev tools and see that the logged output contains a false value
</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: 20,
});
// Add it to the canvas
canvas.add(line);
// Make "mtr" control invisible
line.setControlVisible("mtr", false);
// Using isControlVisible method
console.log(
"Is the middle-top-rotate control key visible? : ",
line.isControlVisible("mtr")
);
</script>
</body>
</html>
Is the middle-top-rotate control key visible? : false
Conclusion
The isControlVisible method is essential for checking control visibility in FabricJS Line objects. It returns boolean values to help manage which controls are shown to users during object manipulation.
385 Views
