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
How to disable a specific control point of Line object using FabricJS?
In this tutorial, we are going to learn about how to disable a specific control point of Line object 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 disable a specific control point of Line object, we use the setControlVisible method.
Syntax
setControlVisible(controlKey: String, visible: Boolean): fabric.Object
Parameters
-
controlKey ? This parameter accepts a String value which specifies the key of control. The possible values are:
'tl' ? Enables or disables the top-left control.
'tr' ? Enables or disables the top-right control.
'br' ? Enables or disables the bottom-right control.
'bl' ? Enables or disables the bottom-left control.
'ml' ? Enables or disables the middle-left control.
'mt' ? Enables or disables the middle-top control.
'mr' ? Enables or disables the middle-right control.
'mb' ? Enables or disables the middle-bottom control.
'mtr' ? Enables or disables the middle-top-rotate control.
visible ? This parameter accepts a Boolean value. When
true, it makes the specified control visible; whenfalse, it hides the control.
Example 1: Disabling Bottom-Right Control
Let's see a code example to see the output when the setControlVisible method is used. The setControlVisible method sets the visibility of the specified control. In this case, since we have passed the 'br' control to a false value, the bottom-right control will no longer be 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 setControlVisible method</h2>
<p>
You can select the line object to see that the bottom-right control is not visible
</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 setControlVisible method
line.setControlVisible("br", false);
</script>
</body>
</html>
Example 2: Disabling Middle-Top-Rotate Control
In this example, we use the setControlVisible method to disable the 'mtr' control, which is also known as the middle-top-rotate control. This control is typically used for rotating objects.
<!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 setControlVisible method to disable the middle-top-rotate control
</h2>
<p>
You can select the line object to see that the middle-top-rotate control is not visible
</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 setControlVisible method
line.setControlVisible("mtr", false);
</script>
</body>
</html>
Key Points
- The
setControlVisiblemethod provides fine-grained control over which manipulation handles are available to users. - This is particularly useful when you want to restrict certain transformations on specific objects.
- The method returns the fabric object itself, allowing for method chaining.
- All control points are visible by default when an object is created.
Conclusion
The setControlVisible method in FabricJS allows you to selectively hide specific control points on Line objects, giving you precise control over how users can interact with and manipulate objects on the canvas. This is essential for creating controlled editing experiences in canvas applications.
383 Views
