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 enable selection of object only when it is fully contained in a selection area in FabricJS?
In this article, we are going to learn how to enable the selection of an object only when it is fully contained in the selection area using FabricJS. We can use the selectionFullyContained property to achieve this.
Syntax
new fabric.Canvas(element: HTMLElement|String, {
selectionFullyContained: Boolean
}: Object)
Parameters
-
element ? This parameter is the <canvas> element itself which can be derived using Document.getElementById() or the id of the <canvas> element itself. The FabricJS canvas will be initialized on this element.
-
options (optional) ? This parameter is an Object which provides additional customizations to our canvas. Using this parameter, properties such as color, cursor, border width, and a lot of other properties can be changed related to the canvas, of which
selectionFullyContainedis a property. It accepts a Boolean value which determines if the object should be selected only when it is fully contained in the selection area or not. Its default value isfalse.
How Selection Works
By default, FabricJS selects objects when the selection box overlaps with any part of the object. When selectionFullyContained is set to true, objects are selected only when they are completely inside the selection rectangle.
Example 1: Default Behavior (selectionFullyContained: false)
Let's see a code example of the default behavior in FabricJS, where the object is selected despite not being fully contained in the selection area.
<!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 Selection Behavior</h2>
<p>Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.</p>
<canvas id="canvas1"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas1", {
selectionFullyContained: false
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(500);
canvas.setHeight(250);
</script>
</body>
</html>
Example 2: Full Containment Required (selectionFullyContained: true)
Let us see a code example where the value of selectionFullyContained property has been set to true. The object will be selected only when it is fully contained in the selection area.
<!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>Full Containment Selection</h2>
<p>Here you cannot select the object by selecting a partial area around the object. The object must be fully contained inside the selection area.</p>
<canvas id="canvas2"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas2", {
selectionFullyContained: true
});
// Creating an instance of the fabric.Circle class
var circle = new fabric.Circle({
left: 215,
top: 100,
radius: 50,
fill: "orange"
});
// Adding it to the canvas
canvas.add(circle);
canvas.setWidth(500);
canvas.setHeight(250);
</script>
</body>
</html>
Comparison
| Property Value | Selection Behavior | Use Case |
|---|---|---|
false (default) |
Objects selected when selection box overlaps any part | Quick selection, user-friendly interaction |
true |
Objects selected only when fully contained | Precise selection, avoiding accidental selections |
Common Use Cases
Set selectionFullyContained to true when you need precise control over object selection, such as in drawing applications where accidental selections should be minimized. Use the default false value for general-purpose applications where ease of selection is preferred.
Conclusion
The selectionFullyContained property in FabricJS controls whether objects must be fully within the selection area to be selected. Setting it to true enables precise selection behavior, while false provides the default overlapping selection mode.
902 Views
