Comment désactiver la sélection d'objets en les faisant glisser dans le canevas à l'aide de FabricJS ?-js tutoriel-php.cn

Comment désactiver la sélection d'objets en les faisant glisser dans le canevas à l'aide de FabricJS ?

PHPz

Libérer： 2023-09-13 23:09:08

avant

950 Les gens l'ont consulté

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

Dans cet article, nous expliquerons comment désactiver la sélection d'objets par glisser-déposer dans FabricJS. Dans le canevas FabricJS, nous pouvons essentiellement cliquer n'importe où et sélectionner une zone et tout objet de cette zone sera sélectionné. Dans cet article, nous verrons comment désactiver ce comportement

Syntaxe

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

Copier après la connexion

Parameters

Element - Ce paramètre est l'élément
Options (facultatif) - Ce paramètre est un objet qui permet une personnalisation supplémentaire de notre canevas. À l'aide de ce paramètre, vous pouvez modifier des propriétés telles que la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées au canevas. Le paramètre de sélection indique si la sélection doit être activée. La valeur par défaut de cette clé est True.

Exemple 1

Voyons d'abord comment la sélection par glisser fonctionne comme lorsqu'elle est activée. Dans cet exemple, nous transmettons la clé de sélection comme True, qui est également la valeur par défaut. Voyons comment le canevas se comporte avec la sélection activée.

<!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>

Copier après la connexion

Exemple 2

Touche de sélection Spécifie s'il faut activer ou désactiver la sélection d'objets dans le canevas en les faisant glisser. Si nous définissons cette clé sur False alors nous ne pourrons plus sélectionner d'objets en les faisant glisser.

<!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>

Copier après la connexion

Maintenant que nous avons défini la sélection sur False, nous ne pouvons plus sélectionner de parties autour de l'objet pour le faire glisser. Cependant, nous pouvons toujours cliquer et sélectionner des objets manuellement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!