bounding box ngoại hình - điều khiển tùy biến với fabricjs

Question

Gurus,

Tôi muốn biết có cách nào để thay đổi biểu tượng hộp bounding, tôi đọc mã nguồn trong fabric.js, nó tạo ra hộp vuông cho hộp bounding, nhưng Tôi muốn thay đổi nó thành vòng tròn hoặc thay đổi để apearence tùy chỉnh của tôi. bạn có thể tư vấn cho tôi không?

Cảm ơn rất nhiều!

Lindy

Answer 1

Kiểm tra các ví dụ:

http://fabricjs.com/customization/

Ví dụ 2:

var canvas = new fabric.Canvas('c3'); 
    canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 })); 

    canvas.item(0).set({ 
    borderColor: 'red', 
    cornerColor: 'green', 
    cornerSize: 6, 
    transparentCorners: false 
    }); 
    canvas.setActiveObject(canvas.item(0)); 

Answer 2

Cách nhanh nhất để tùy chỉnh các điều khiển là viết _drawControl chức năng riêng của bạn và làm cho nó tương thích với fabricjs tiêu chuẩn để ghi đè lên nó. Hãy nhớ rằng chức năng này được gọi là 9 lần cho mỗi lần render, vì vậy hãy cố gắng ở mức thấp với mã và bản vẽ. Ngoài ra, nếu bạn sửa đổi ngữ cảnh (ctx), hãy nhớ sử dụng .save và .restore để không làm lộn xộn đường dẫn dựng hình.

FabricJs sẽ gọi hàm với top và left sẵn sàng cho một hình chữ nhật, vì vậy góc sẽ có mặt tại top + size/2 và left + size/2, trong đó kích thước là this.cornerSize

function newControls(control, ctx, methodName, left, top) { 
    if (!this.isControlVisible(control)) { 
     return; 
     } 
     var size = this.cornerSize; 
     isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size); 
     ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false); 
     ctx.stroke(); 
} 

fabric.Object.prototype._drawControl = newControls; 

function newControls(control, ctx, methodName, left, top) { 
 
    if (!this.isControlVisible(control)) { 
 
     return; 
 
     } 
 
     var size = this.cornerSize; 
 
     this.transparentCorners || ctx.clearRect(left, top, size, size); 
 
     ctx.beginPath(); 
 
     ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false); 
 
     ctx.stroke(); 
 
} 
 

 
fabric.Object.prototype._drawControl = newControls; 
 
fabric.Object.prototype.cornerSize = 15; 
 
var canvas = new fabric.Canvas('c'); 
 

 

 
canvas.add(new fabric.Rect({width:100, height:100, top:50, left:50})); 
 
canvas.setActiveObject(canvas.getObjects()[0]);

<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>