How to disable object selection by dragging in canvas using FabricJS?-JS Tutorial-php.cn

How to disable object selection by dragging in canvas using FabricJS?

PHPz

Release： 2023-09-13 23:09:08

forward

1034 people have browsed it

如何使用 FabricJS 通过在画布中拖动来禁用对象选择？

In this article, we will explain how to disable object selection by dragging in FabricJS. In the FabricJS canvas we can basically click anywhere and select an area and any object in that area will be selected. In this article we will learn how to disable this behavior

Syntax

new fabric.Canvas(element: HTMLElement|String, {selection: boolean}: Object)

Copy after login

Parameters

Elements - This parameter is the
Options (optional) - This parameter is an object that provides additional information about our Canvas for customization. Using this parameter, you can change properties such as color, cursor, border width, and many other properties related to the canvas. The selection parameter indicates whether selection should be enabled. The default value for this key is True.

Example 1
Let’s first see how selecting by dragging works just like when it is enabled. In this example, we pass the selection key as
True, which is also the default value. Let's see how the canvas behaves with selection enabled.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the selection of objects on a canvas</h2> <p>Here you can select the object as the selection key is True</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selection: true }); // Creating an instance of the fabric.Circle class var cir = new fabric.Circle({ radius: 40, fill: "#87a96b", left: 30, top: 20, }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
Example 2
Selection key specifies whether to enable or disable selection of objects in the canvas by dragging. If we set this key to
False, then we will no longer be able to select objects by dragging.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Disabling the selection of objects on a canvas</h2> <p> Here you cannot select an area around the object as the selection key is set to False.</p> <canvas id="canvas"></canvas> <script> //Initiate a canvas instance var canvas = new fabric.Canvas("canvas", { selection: false }); //creating an instance of the fabric.Circle class var cir = new fabric.Circle({ radius: 40, fill: "#87a96b", left: 30, top: 20, }); //adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Copy after login
Now that we have set selection to False, we can no longer select parts around the object to drag it. However, we can still click and select objects manually.
The above is the detailed content of How to disable object selection by dragging in canvas using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!