Comment désactiver la rotation centrale d'un rectangle à l'aide de FabricJS ?

Dans ce tutoriel, nous apprendrons comment désactiver la rotation centrée d'un rectangle à l'aide de FabricJS. Le rectangle est l'une des différentes formes fournies par FabricJS. Afin de créer un rectangle, nous devons créer une instance de la classe Fabric.Rect et l'ajouter au canevas. Par défaut, tous les objets de FabricJS utilisent leur centre comme point de rotation. Cependant, nous pouvons modifier ce comportement en utilisant l'attributcenteredRotation.

Syntaxe

new fabric.Rect({ centeredRotation: Boolean }: Object)

Paramètres

• Options (facultatif)- Ce paramètre est unobjetqui fournit une personnalisation supplémentaire à notre rectangle. En utilisant ce paramètre, vous pouvez modifier la couleur, le curseur, la largeur du trait et d'autres propriétés de l'objet liées à l'attributcenteredRotation.

< /ul>

Touche d'option

• centeredRotation- Cette propriété accepte une valeurBoolean, nous permettant de contrôler s'il faut utiliser le point central comme origine de transformation lorsque l'objet tourne. Sa valeur par défaut est True.

Exemple 1

Comportement par défaut de la rotation du rectangle dans FabricJS

< p>Regardons un exemple de code qui décrit le comportement par défaut d'un objet rectangle. Puisque la propriété centeredRotationest définie sur true par défaut, l'objet rectangulaire utilise son centre comme point de rotation.

     
  
Default behaviour of rotation of Rectangle in FabricJS
 
Click on the rectangle and rotate it. You will notice that the object rotates around its center, which is the default behaviour.
    

Copier après la connexion

Exemple 2

Passer la clé centeredRotation avec la valeur "false"

Maintenant que nous avons vu le comportement par défaut, examinons un exemple de code pour voir ce qui se passe lorsque vous attribuez une valeur False à centeredRotation propriété.

     
  
Passing centeredRotation key with the value as “false”
 
Click on the rectangle and rotate it to see the changed center of rotation
    

Copier après la connexion

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!