Come ottenere la posizione relativa alla tela di un oggetto che si trova in un gruppo?

Question

Normalmente è possibile ottenere una posizione dell'oggetto relativa al canvas dagli attributi .left e .top, ma questi diventano relativi al gruppo se l'oggetto si trova in una selezione/gruppo. C'è un modo per ottenere la loro posizione rispetto alla tela?

Answer 1

Quando un oggetto è all'interno di un gruppo, le sue coordinate relative alla tela dipenderà l'origine del gruppo (e origine dell'oggetto)

Diciamo che abbiamo questo codice che ha un rettangolo e un cerchio aggiunti a un gruppo.

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(); 

Questi sono i tre casi possibili di centraggio del gruppo:

1. originaria del gruppo impostato al centro (come nel codice sopra):

   Come mostrato in figura, rect.left ci dà la distanza di sinistra dell'oggetto dal centro del gruppo. rect.group.left indica la distanza del centro del gruppo dalla parte sinistra della tela.

   Così distanza di rect da sinistra di tela = rect.left + rect.group.left (http://jsfiddle.net/uue3hcj6/3/)

   

2. Origine del gruppo è impostato in alto/sinistra (anche l'impostazione di default)

   rect.left ci dà distanza di sinistra dell'oggetto dal centro del gruppo. rect.group.left ci dà la distanza di sinistra del gruppo dalla sinistra della tela. Ora per calcolare la distanza rimanente, dobbiamo aggiungere metà della larghezza del gruppo.

   Così distanza di rect da sinistra di tela = rect.left + rect.group.left + rect.group.width/2 (http://jsfiddle.net/uue3hcj6/6/)

   

3. Origine del gruppo è impostato su basso/a destra

   rect.left ci dà distanza di sinistra dell'oggetto dal centro del gruppo. rect.group.left indica la distanza del diritto del gruppo dalla parte sinistra della tela. Ora per calcolare la distanza totale, dobbiamo sottrarre la metà della larghezza del gruppo.

   Così distanza di rect da sinistra di tela = rect.left + rect.group.left - rect.group.width/2 (http://jsfiddle.net/uue3hcj6/7/)

   

Nota: Casi simili sono possibili per oggetto pure.

Answer 2

La soluzione è prendere in considerazione la larghezza del gruppo. Il object.left è relativamente al centro del gruppo, non è lasciato lato, in modo da prendere 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); 
} 

Answer 3

dovuto risolvere la questione con un altro approccio ... ho dovuto trovare immagini in dati di tela JSON, quindi il mio codice è:

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); 

Questo codice dovrebbe portare una matrice di tutti gli oggetti di immagine e dovrebbe avere attributi rX e rY che sono posizioni relative delle immagini.