FabricJS: Toujours le Centre de l'Objet sur la Toile

est-il possible de TOUJOURS le centre d'un objet sur un fabricjs toile?

Contexte: je suis en construction d'un outil web qui le rend facile de créer des animations complexes à l'aide de fabricjs. Je veux être en mesure de définir la taille du canevas à 100% pour la largeur et la hauteur. Donc je veux placer mes objets au centre et ajouter un X/Y offset. Quand j'ai redimensionner la zone de travail plus tard, je peux réajuster les objets à partir d'un centre à l'aide de x/y de décalage.

Existe-t-il une fonction? Ou devrais-je simplement ajouter une propriété à l'objet et si la toile est en cours de redimensionnement de vérifier tous les objets de cette propriété et de réajuster la position de l'objet à partir de la nouvelle toile " center?

Cordialement et Merci
Robert

OriginalL'auteur Robert | 2013-06-24

  1. 15

    Tissu objets ont des méthodes suivantes pour le centrage:

    obj.center();  //Centers object vertically and horizontally on canvas to which is was added last
obj.centerV(); //Centers object vertically on canvas to which it was added last
obj.centerH(); //Centers object horizontally on canvas to which it was added last

    Je ne vois rien à propos de décalage dans les docs.

    Quelque chose comme ce qui suit serait probablement travailler

    var canvas = new fabric.Canvas('c');

$(window).resize(function(){

     var w = $(window).width();
     var h = $(window).height();
     var center = {x:w / 2, y:h / 2);

     canvas.setDimensions({width:w,height:h});
     canvas.forEachObject(function(obj){

        obj.set({
            left : center.x + obj.offsetLeft,
            top : center.y + + obj.offsetTop,
        });

        obj.setCoords();

    });

//need to call calcOffset whenever the canvas resizes
canvas.calcOffset();
canvas.renderAll();

});
    n'oubliez pas .setCoords() après l'exploitation du centre!

    OriginalL'auteur cyberpantz

  2. 24

    Ou vous pouvez centrer l'objet comme

        //add the image object 
    Canvas.add(oImg)
    //set the object to be centered to the Canvas
    Canvas.centerObject(oImg);

    Canvas.setActiveObject(oImg);
    Canvas.renderAll();
    c'est beaucoup plus propre
    Après le centrage de l'image, vous devez appeler oImg.setCoords() afin de déplacer ses coordonnées à la position droite. Lorsque vous omettez l'appel, l'image est déplacée, mais vous devez cliquer sur son ancienne position pour interagir avec elle.

    OriginalL'auteur Darryl Hebbes