Jak uzyskać położenie względne płótna obiektu należącego do grupy?

Question

Zwykle pozycja obiektu względem płótna może być uzyskana z jego atrybutów, ale stają się one względne w stosunku do grupy, jeśli obiekt znajduje się w selekcji/grupie. Czy istnieje sposób, aby uzyskać ich pozycję względem płótna?

Answer 1

Gdy obiekt znajduje się wewnątrz grupy, jego współrzędne względne na płótnie będzie zależała od pochodzenia grupy (i pochodzenie obiektu również).

Powiedzmy, że mamy ten kod, który ma prostą i okrąg dodany do grupy.

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

Poniżej przedstawiono trzy przypadki możliwość centrowania grupy:

1. POCHODZENIE grupy ustawiony na środku (jak w powyższym kodzie)

   Jak przedstawiono na rysunku poniżej, rect.left podaje nam odległość lewej strony obiektu od środka grupy. rect.group.left podaje odległość środka grupy od lewej strony płótna.

   Więc odległość od rect od lewej strony płótna = rect.left + rect.group.left (http://jsfiddle.net/uue3hcj6/3/)

   

2. Pochodzenie grupy jest ustawiony do góry/w lewo (także ustawienie domyślne)

   rect.left daje nam dystans lewej strony obiektu od środka grupy. rect.group.left daje nam odległość po lewej stronie grupy od lewej strony płótna. Aby obliczyć pozostałą odległość, musimy dodać połowę szerokości grupy.

   Więc odległość od rect od lewej strony płótna = rect.left + rect.group.left + rect.group.width/2 (http://jsfiddle.net/uue3hcj6/6/)

   

3. Pochodzenie grupy jest ustawiona do dołu/w prawo

   rect.left daje nam dystans lewo od obiektu od centrum grupy. rect.group.left daje nam dystans prawej grupy od lewej płótna. Aby obliczyć całkowitą odległość, musimy odjąć połowę szerokości grupy.

   Więc odległość od rect z lewej strony płótna = rect.left + rect.group.left - rect.group.width/2 (http://jsfiddle.net/uue3hcj6/7/)

   

Uwaga: Podobne przypadki są możliwe dla obiektu, jak również.

Answer 2

Rozwiązaniem jest uwzględnienie szerokości grupy. object.left jest w stosunku do centrum grupy, nie jest to lewy bok, więc bierzemy 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

Musieliśmy rozwiązać ten problem z innym podejściem ... musiałem znaleźć obrazy w płóciennych danych JSON, więc mój kod jest:

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

Kod ten powinien przynieść tablicę wszystkich obiektów graficznych i ich powinien mieć atrybuty rX i rY, które są względnymi pozycjami obrazów.