Comment faire pivoter un objet par programmation dans Fabric JS

Last Updated on mars 11, 2024 by admin

Il existe de nombreuses façons par défaut de manipuler des objets dans Fabric JS. Lorsque vous effectuez une sélection, vous avez la possibilité de déplacer, redimensionner et faire pivoter un objet à l’aide des commandes d’angle. Mais parfois, vous avez besoin d’un contrôle plus raffiné, en particulier dans les degrés de rotation. Voici comment faire pivoter un objet par programme dans Fabric JS.

Comment faire pivoter un objet par programmation dans Fabric JS

Pour faire pivoter un objet par programme dans Fabric JS, vous devez appeler le rotate() méthode sur l’objet.

    let activeObj = canvas.getActiveObject()

    //Increment the angle by 10 degrees
    let angle = activeObj.angle
    let newAngle = angle == 355 ? 0 : angle + 10

    activeObj.rotate(newAngle) //Rotate Here
    canvas.renderAll()

La rotation d’un objet est effectuée par la méthode rotate() dans Fabric JS. Pour modifier cette propriété, vous devez d’abord récupérer votre objet. Si l’objet que vous souhaitez modifier est actuellement sélectionné sur le canevas, vous pouvez appeler canvas.getActiveObject(); sinon, vous voudrez enregistrer et récupérer l’objet quelque part dans votre code.

Généralement, si vous souhaitez faire pivoter un objet par programmation, c’est parce que vous voulez le faire pivoter par incréments. Vous pouvez saisir l’angle actuel de l’objet en appelant la propriété angle pour y parvenir. Avec cet angle, vous pouvez ajouter le nombre de degrés pour votre incrément de rotation et appeler rotate() pour effectuer la rotation.

N’oubliez pas d’effectuer canvas.renderAll() pour restituer le canevas après avoir appelé une rotation d’objet.

Désactiver la rotation centrale dans Fabric JS

Lorsqu’un objet est créé dans Fabric JS, il tourne autour de son centre par défaut. Il s’agit souvent du point de rotation souhaité, mais vous pouvez avoir un cas d’utilisation spécifique où vous avez besoin que votre objet tourne autour du bord. Ceci est plus courant lors de l’utilisation d’un objet Image. Pour ce faire, vous devez définir le centeredRotation propriété à false sur votre objet.

let obj = new fabric.Rect({
    width: 500,
    height: 200,
    fill: 'red',
    centeredRotation: false
}); 

canvas.add(obj)

Lié: Comment ajouter des paramètres personnalisés à un objet Fabric JS

Cette propriété peut être définie lors de l’initialisation, mais peut également être modifiée à tout moment à l’aide de la commande set() méthode sur votre objet.

Vous avez maintenant les bases de la rotation d’un objet par programme dans Fabric JS. Espérons que ce nouvel ensemble de méthodes fera passer votre application au niveau supérieur. Bon codage !

Références utiles :

Pour des conseils, astuces et guides Fabric JS plus utiles, consultez notre section Fabric JS.

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *