Canvas tọa độ trong Fabric.js đã bù đắp

Question

Tôi chỉ mới bắt đầu với fabric.js và tôi có một (có thể là mới bắt đầu) lỗi:

Tôi đang sử dụng vải với jquery với đoạn mã sau:

$(document).ready(function() { 

canvas = new fabric.StaticCanvas('scroller'); 

canvas.add(
    new fabric.Rect({ top: 0, left: 0, width: 140, height: 100, fill: '#f55' }) 
); 

}); 

Mã này sẽ vẽ Hình chữ nhật 140x100 trên canvas. Đáng buồn thay, chỉ một phần tư Hình chữ nhật xuất hiện. Nếu tôi thay đổi giá trị trên cùng và bên trái thành số cao hơn, nhiều hình chữ nhật sẽ xuất hiện trên canvas.

Vì vậy, có vẻ như, nguồn gốc canvas không phải là 0/0, nhưng tại sth. cao hơn.

Có ai đó biết cách sửa lỗi này hoặc những gì tôi đang làm sai?

Cảm ơn trước, McFarlane

Answer 1

Dưới đây là một liên kết jsfiddle với một số ví dụ http://jsfiddle.net/pukster/sdQ7U/2/

đoán của tôi là fabric.js tính toán tất cả mọi thứ từ nguồn gốc (điểm giữa) kể từ khi nó được vẽ chính xác một phần tư của một hình chữ nhật ngay cả với canvas gấp 10 lần kích thước của hình chữ nhật. Đoán của tôi là top và left thực sự đề cập đến nguồn gốc chứ không phải phía trên cùng và bên trái của hộp giới hạn tưởng tượng. Rắc rối là có rất ít tài liệu về fabricjs. Có bất kỳ lý do bạn đang sử dụng fabricjs và không easeljs

EDIT Đây là fiddle tương tự nhưng với hình vuông thay vì hình chữ nhật (nó là rõ ràng hơn) http://jsfiddle.net/pukster/sdQ7U/3/

EDIT OK Tôi bây giờ gần như hoàn toàn chắc chắn rằng fabric.js sử dụng trung tâm là top/left. Tôi tách example off of their site của họ và phủ nó với minh bạch cho những hình dạng đã được họ được mã hóa trong vải tinh khiết http://jsfiddle.net/pukster/uathZ/2/ (viền màu xanh là giới hạn của phần tử canvas).

Những gì bạn thấy là các hộp là chính xác bù đắp bằng một nửa nhưng đường tròn (tôi chỉ vẽ một vòng tròn bán nếu không nó sẽ không có được xác đáng) là hoàn toàn chồng chéo. Đây là b/c trong HTML Canvas, tọa độ vòng tròn (x,y) là nguồn gốc và không phải ở trên cùng bên trái. Tôi không bận tâm với tam giác b/c lượng giác của tôi là một chút gỉ. Cá nhân tôi cho rằng việc sử dụng các điều khoản là top và left, khi x và y sẽ trở nên đại diện và ngắn hơn.

Answer 2

Có, điều này rất bất ngờ và thậm chí còn nhiều tài liệu hơn.

Cách giải quyết:

Set

originX: "left" 
originY: "top" 

cho từng đối tượng được tạo ra.

chỉnh sửa: hoặc sử dụng giải pháp đơn giản kangax trong nhận xét bên dưới.

Answer 3

Tôi muốn nhận xét nhưng thiếu danh tiếng để làm như vậy. Vì vậy, dù sao, đây là những gì xảy ra khi tôi làm như sau:

fabric.Object.prototype.originX = "left"; 
fabric.Object.prototype.originY = "top"; 

Hình dạng được kết xuất tốt nhưng khi tôi chọn nó cho thay đổi kích thước hay di chuyển, nó được bù đắp đến một địa điểm khác nhau. Cách tiếp cận tốt nhất có vẻ là thiết lập các tọa độ cho từng đối tượng riêng biệt bằng phương thức set().