Comment centrer un objet dans un autre objet dans Fabric JS

Fabric JS consiste à manipuler des objets. Les objets peuvent être déplacés, redimensionnés, ajoutés, supprimés, etc. Lors de l’ajout d’un objet, vous le centrerez sur le canevas, mais parfois, vous souhaiterez peut-être le centrer dans un autre objet. Heureusement, nous avons le code pour le faire. Voici comment centrer un objet dans un autre objet dans Fabric JS.

Comment centrer un objet dans un autre objet dans Fabric JS

Utilisez le getCenterPoint() méthode avec la setPositionByOrigin() pour centrer un objet Fabric JS dans un autre objet. Regardons un exemple :

let centerPoint = objectA.getCenterPoint()

objectB.setPositionByOrigin(centerPoint, 'center', 'center')
      
        Copied  
        
      
    

Tout d’abord, nous devons obtenir le point central du premier objet, l’objet A, dans notre exemple. Pour obtenir facilement les coordonnées du point central, nous pouvons utiliser la fonction intégrée getCenterPoint() méthode.

Avec les coordonnées du point central en main, nous devons les appliquer à notre deuxième objet, l’objet B. Nous pouvons utiliser le setPositionByOrigin() méthode pour y parvenir.

Vous pouvez utiliser le même code pour centrer deux objets l’un sur l’autre au sein d’un groupe.

let circle = new fabric.Circle({
  radius: 200,
  fill: 'green'
})

let rect = new fabric.Rect({
  fill: 'red'
  width: 100,
  height: 200,
})

let group = new fabric.Group([circle, rect])
canvas.add(group)

let centerPoint = circle.getCenterPoint()
rect.setPositionByOrigin(centerPoint, 'center', 'center')
      
        Copied  
        
      
    

Les objets d’un groupe sont liés les uns aux autres et seront déplacés et manipulés ensemble.

Comment modifier l’ordre des objets dans Fabric JS

Pour modifier la profondeur d’un objet, utilisez la sendToBack() ou sendBackwards() méthodes pour repousser un objet.

let rectA = new fabric.Rect({
  fill: 'green'
  width: 100,
  height: 200,
})

let rectB = new fabric.Rect({
  fill: 'red'
  width: 200,
  height: 400,
})

canvas.add(rectA)
canvas.add(rectB)

canvas.sendToBack(rectB)
      
        Copied  
        
      
    

Une fois que vous avez centré vos objets, selon votre cas d’utilisation, vous souhaiterez peut-être réorganiser l’ordre des objets afin que l’un chevauche l’autre.

Pour ce faire, nous avons quatre méthodes différentes que nous pouvons utiliser :

canvas.sendBackwards(yourObj)
canvas.bringForward(yourObj)
canvas.sendToBack(yourObj)
canvas.bringToFront(yourObj)
      
        Copied  
        
      
    

Ces méthodes peuvent être utilisées avant ou après le déplacement initial de votre objet.

Vous savez maintenant centrer un objet dans un autre objet et également modifier son ordre avec Fabric JS. Bien que cela ne concerne que des cas d’utilisation spécifiques, il s’agit d’une technique précieuse si vous souhaitez ajouter des superpositions uniques à notre projet.

Consultez nos autres guides, conseils et astuces Fabric JS dans notre section Codage Fabric JS.