web-dev-qa-db-fra.com

Comment obtenir la position relative par rapport à la toile d'un objet appartenant à un groupe?

Normalement, la position d'un objet par rapport au canevas peut être obtenue à partir de ses attributs .left et .top, mais ceux-ci deviennent relatifs au groupe si l'objet se trouve dans une sélection/un groupe. Y a-t-il un moyen d'obtenir leur position par rapport à la toile?

javascriptfabricjs
13
Jasper van den Bosch

Lorsqu'un objet est à l'intérieur d'un groupe, ses coordonnées par rapport au canevas dépendent de l'origine du groupe (et de l'origine de l'objet également).

Disons que nous avons ce code qui a un rect et un cercle ajouté à un groupe.

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

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 175,
    top: 75,
    fill: '#aac'
});

var group = new fabric.Group([rect, circle],{
    originX: 'center',
    originY: 'center'
});
canvas.add(group);
canvas.renderAll();

Voici les trois cas possibles pour centrer le groupe:

  1. Origine du groupe définie au centre (comme dans le code ci-dessus):

    Comme le montre la figure ci-dessous, rect.left nous indique la distance entre l'objet et le centre du groupe. rect.group.left nous donne la distance entre le centre du groupe et la gauche de la toile.

    Donc distance du rect à gauche de la toile = rect.left + rect.group.left ( http://jsfiddle.net/uue3hcj6/3/ )

    enter image description here

  2. L'origine du groupe est définie en haut/à gauche (également le paramètre par défaut)

    rect.left nous donne la distance de gauche de l'objet du centre du groupe. rect.group.left nous donne la distance entre la gauche du groupe et la gauche de la toile. Maintenant, pour calculer la distance restante, nous devons ajouter la moitié de la largeur du groupe.

    Donc distance du rect à gauche de la toile = rect.left + rect.group.left + rect.group.width/2 ( http://jsfiddle.net/uue3hcj6/6/ )

    enter image description here

  3. L'origine du groupe est définie en bas/à droite

    rect.left nous donne la distance de gauche de l'objet du centre du groupe. rect.group.left nous donne la distance de droite du groupe de gauche de la toile. Maintenant, pour calculer la distance totale, il faut soustraire la moitié de la largeur du groupe.

    Donc distance du rect à gauche de la toile = rect.left + rect.group.left - rect.group.width/2 ( http://jsfiddle.net/uue3hcj6/7/ )

    enter image description here

Remarque: Des cas similaires sont également possibles pour un objet.

18
Swapnil Jain

La solution consiste à prendre en compte la largeur du groupe. Le object.left est relatif au centre du groupe, pas à sa gauche, nous prenons donc group.width/2:

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

var rect = new fabric.Rect({
    width: 100,
    height: 100,
    left: 50,
    top: 50,
    fill: 'rgba(255,0,0,0.5)'
});
var circle = new fabric.Circle({
    radius: 50,
    left: 150,
    top: 75,
    fill: '#aac'
});


canvas.add(rect);
canvas.add(circle);
canvas.renderAll();

function getPOS(){
    var group = canvas.getActiveGroup();
    if (group == null) {
        var pos = rect.left;
    }
    else {
        var pos = rect.group.left + rect.group.width/2 + rect.left;
    }
    alert("Position of rect from left:"+pos);
}
0
Jasper van den Bosch

Dû résoudre ce problème avec une autre approche ... Je devais trouver des images dans les données de la toile JSON, mon code est donc:

let findItemByType = function(source, type, rX, rY)
{
    rX = rX ? rX : 0;
    rY = rY ? rY : 0;
    let objs = [];
    source.forEach(function(item){
        if (item.type === type){
            item.rX = rX + item.left;
            item.rY = rY + item.top;
            objs.Push(item);
        }
        else {
            if (item.objects)
            {
                item.rX = rX;
                item.rY = rY;
                let subresult = findItemByType(item.objects, 
                type, 
                item.rX + item.left + item.width / 2, 
                item.rY + item.top + item.height / 2);
                if (subresult){
                    objs = objs.concat(subresult);
                }
            }   
        }
    });
    return objs;
}
let images = findItemByType(canvas.toJSON().objects, "image", 0, 0);

Ce code doit amener un tableau de tous les objets image et ceux-ci doivent avoir les attributs rX et rY qui sont des positions relatives des images.

0
Fuat Şengül