Làm thế nào để có được vị trí tương đối canvas của một đối tượng trong một nhóm?

Question

Thông thường vị trí của đối tượng liên quan đến canvas có thể được lấy từ các thuộc tính .left và .top của chúng, nhưng chúng trở nên tương đối so với nhóm nếu đối tượng nằm trong một nhóm/lựa chọn. Có cách nào để có được vị trí của họ liên quan đến canvas không?

Answer 1

Khi một đối tượng là bên trong một nhóm, tọa độ của nó tương đối so với vải sẽ phụ thuộc vào nguồn gốc của nhóm (và nguồn gốc của đối tượng là tốt).

Cho phép nói rằng chúng tôi có mã này có hình tròn và hình tròn được thêm vào một nhóm.

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

Dưới đây là ba trường hợp có thể căn giữa đối tượng nhóm:

1. xứ của nhóm thiết đến trung tâm (như trong đoạn code trên):

   Như thể hiện trong hình bên dưới, rect.left cho chúng ta khoảng cách trái của đối tượng từ trung tâm của nhóm. rect.group.left cho chúng ta khoảng cách giữa nhóm từ bên trái của canvas.

   Vì vậy, khoảng cách của rect từ bên trái của vải = rect.left + rect.group.left (http://jsfiddle.net/uue3hcj6/3/)

   

2. xứ của nhóm được thiết lập để đầu/trái (cũng là thiết lập mặc định)

   rect.left cho chúng ta khoảng cách bên trái của đối tượng từ trung tâm của nhóm. rect.group.left cho chúng ta khoảng cách bên trái của nhóm từ bên trái của canvas. Bây giờ để tính toán khoảng cách còn lại, chúng ta phải thêm một nửa chiều rộng của nhóm.

   Vì vậy, khoảng cách của rect từ bên trái của vải = rect.left + rect.group.left + rect.group.width/2 (http://jsfiddle.net/uue3hcj6/6/)

   

3. xứ của nhóm được thiết lập để dưới/phải

   rect.left cho chúng ta khoảng cách bên trái của đối tượng từ trung tâm của nhóm. rect.group.left cho chúng ta khoảng cách bên phải của nhóm từ bên trái của canvas. Bây giờ để tính tổng khoảng cách, chúng ta phải trừ đi một nửa chiều rộng của nhóm.

   Vì vậy, khoảng cách của rect từ bên trái của vải = rect.left + rect.group.left - rect.group.width/2 (http://jsfiddle.net/uue3hcj6/7/)

   

Lưu ý: trường hợp tương tự có thể xảy ra cho đối tượng là tốt.

Answer 2

Giải pháp là tính đến chiều rộng nhóm. Các object.left là liên quan đến trung tâm của nhóm, không nó trái phía, vì vậy chúng ta hãy 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

Đã phải giải quyết vấn đề này với cách tiếp cận khác ... Tôi đã phải tìm hình ảnh trong dữ liệu canvas JSON, do đó, mã của tôi là:

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

Mã này nên mang theo một mảng của tất cả các đối tượng hình ảnh và họ nên có thuộc tính rX và rY là vị trí tương đối của hình ảnh.