Maison > Article > interface Web > Comment activer la sélection d'objet uniquement lorsque l'objet est entièrement contenu dans la zone de sélection dans FabricJS ?

Comment activer la sélection d'objet uniquement lorsque l'objet est entièrement contenu dans la zone de sélection dans FabricJS ?

WBOYavant: 2023-08-27 11:25:071356parcourir

如何仅当对象完全包含在 FabricJS 中的选择区域中时才启用对象选择？

Dans cet article, nous apprendrons comment utiliser FabricJS pour activer la sélection d'un objet uniquement lorsqu'il est entièrement contenu dans la zone de sélection. Nous pouvons utiliser la propriété SelectionFullyContained pour y parvenir.

Syntax

new fabric.Canvas(element: HTMLElement|String, { selectionFullyContained: Boolean }: Object)

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 la couleur, le curseur, la largeur de la bordure et de nombreuses autres propriétés liées au canevas, dont selectionFullyContained est une propriété. Il accepte une valeur booléenne qui détermine si l'objet doit être sélectionné uniquement s'il est entièrement contenu dans la zone de sélection. La valeur par défaut est Faux.

Exemple 1

Passing SelectionFullyContained clé avec la valeur False

Regardons un exemple de code du comportement par défaut dans FabricJS, c'est-à-dire que l'objet est toujours sélectionné bien qu'il ne soit pas entièrement contenu dans la zone de sélection. Dans cet exemple, nous transmettons la valeur de SelectionFullyContained comme False.

<!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>Enabling selection of an object only when it is fully contained in a selection area</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="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionFullyContained: false
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange",
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Exemple 2

Passer la clé selectionFullyContained à la classe avec la valeur True

Regardons un exemple de code dans lequel la valeur de la propriété selectionFullyContained a été définie sur True. Comme nous pouvons le constater, un objet n'est sélectionné que s'il est entièrement contenu dans la zone de sélection.

<!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>Enabling selection of an object only when it is fully contained in a selection area</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="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         selectionFullyContained: true
      });
      // Creating an instance of the fabric.Rect class
      var circle = new fabric.Circle({
         left: 215,
         top: 100,
         radius: 50,
         fill: "orange"
      });
      // Adding it to the canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

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!

值传递对象

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment appeler une fonction à partir d'un nom de fonction stocké dans une chaîne en utilisant JavaScript ?Article suivant：Comment appeler une fonction à partir d'un nom de fonction stocké dans une chaîne en utilisant JavaScript ?

Articles Liés

Voir plus