cách xoay quanh một điểm được chỉ định trong fabric.js?

Question

Có ai biết cách xoay quanh một điểm được chỉ định trong fabric.js không? Ví dụ:

var line1 = new fabric.Line([70, 20, 70, 100], { 
    stroke: "#000000", 
    strokeWidth: 6 
}); 

Tôi muốn xoay nó dựa trên điểm cuối (70, 100) nhưng không xoay nó ở giữa.

Answer 1

Không có cách nào để xoay quanh điểm tùy ý tại thời điểm này. Nguồn gốc của phép biến đổi - để mở rộng quy mô & xoay - hiện tại là tâm của một đối tượng. Chúng tôi đang lập kế hoạch để thêm hỗ trợ cho nguồn gốc tùy ý của chuyển đổi trong tương lai gần.

Answer 2

Bạn có thể xoay vòng một điểm tùy ý bằng cách sử dụng fabric.util.rotatePoint. Điều này sẽ cho phép bạn xoay một đường thẳng (được xác định bởi x1, y1, x2 và y2) về một nguồn gốc (được xác định bởi origin_x và origin_y) theo một góc theo độ (được xác định bởi angle).

Lưu ý rằng fabric.util.rotatePoint mất một vòng quay theo radian, mặc dù angle s thường được chỉ định bằng độ khi sử dụng fabric.js.

var rotation_origin = new fabric.Point(origin_x, origin_y); 
var angle_radians = fabric.util.degreesToRadians(angle); 
var start = fabric.util.rotatePoint(new fabric.Point(x1,y1), rotation_origin, angle_radians); 
var end = fabric.util.rotatePoint(new fabric.Point(x2,y2), rotation_origin, angle_radians); 
var line1 = new fabric.Line([start.x, start.y, end.x, end.y], { 
    stroke: '#000000', 
    strokeWidth: 6 
}); 

Bạn có thể làm tương tự với các đối tượng khác, nhưng bạn có thể cần phải cung cấp thuộc tính angle để xoay đối tượng một cách thích hợp.