如何獲取組中對象的畫布相對位置？

Question

通常情況下，對象相對於畫布的位置可以從它的.left和.top屬性中獲得，但如果對象位於選擇/組中，則這些屬性相對於該組而言。有沒有辦法讓他們的位置相對於畫布？

Answer 1

當一個對象是一組裏面，它的座標相對於畫布將取決於集團的起源（和對象的原點也是如此）。

可以說我們有這段代碼，它有一個矩形和一個圓圈添加到一個組中。

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

以下是這三種情況下可能用於定心組：

1. 原點設置爲中心組的（如在上面的代碼中）：

   如下面的圖所示， rect.left給我們物體的左邊距組的中心的距離。 rect.group.left給我們從畫布左邊到組的中心距離。

   所以從左帆布的矩形的距離= rect.left + rect.group.left（http://jsfiddle.net/uue3hcj6/3/）

   

2. 組地被設置爲頂部/左側（也默認設置）

   rect.left給我們距離左側的物體離開組的中心。 rect.group.left給我們從畫布左側的組的左側距離。現在要計算剩餘距離，我們必須增加組的一半寬度。

   所以RECT的距離從左帆布= rect.left + rect.group.left組的+ rect.group.width/2（http://jsfiddle.net/uue3hcj6/6/）

   

3. 原點被設置爲底/右

   rect.left給我們留下對象的距離從該組的中心。 rect.group.left給了我們從畫布左側開始的組右側距離。現在要計算總距離，我們必須減去組的一半寬度。

   所以RECT的距離從左帆布= rect.left + rect.group.left - rect.group.width/2（http://jsfiddle.net/uue3hcj6/7/）

   

注意：類似的情況下是可能的對象爲好。

Answer 2

解決方法是考慮組寬度。該object.left相對於集團的中心，而不是它的左側，因此，我們採取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

必須解決這一問題的另一種方法... 我必須找到在JSON數據畫布圖像，所以我的代碼是：

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

此代碼應把所有圖像對象的數組，他們應該有rX和rY屬性，它們是圖像的相對位置。