Home > Article > Web Front-end > How to disable object selection by dragging in canvas using FabricJS?

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

PHPzforward: 2023-09-13 23:09:08907browse

如何使用 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)

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>
   <!-- Adding the Fabric JS Library-->
   <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>

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>
   <!-- Adding the Fabric JS Library-->
   <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>

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!

对象

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Explain Promise.any() and async-await in JavaScript?Next article：Explain Promise.any() and async-await in JavaScript?

See more

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

Syntax

Parameters

Related articles