Comment activer la sélection d'objet uniquement lorsque l'objet est entièrement contenu dans la zone de sélection dans 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 lui-même et peut être dérivé en utilisant Document.getElementById() ou l'identifiant de l'élément lui-même. Le canevas FabricJS sera initialisé sur cet é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

     
  
Enabling selection of an object only when it is fully contained in a selection area
 
Select a partial area around the object. The entire object would be selected even if you select a partial area containing the object.
    

     
  
Enabling selection of an object only when it is fully contained in a selection area
 
Here you cannot select the object by selecting a partial area around the object. The object must be fully contained inside the selection area.