Làm cách nào để thay đổi diện mạo mặc định của các tay cầm thay đổi kích thước Fabric.js?

Question

Fabric.js thực sự tiện dụng với chế độ tương tác cho phép thao tác các đối tượng như trong chương trình vẽ vector như Inkscape. Tôi muốn sử dụng khả năng này vào dự án ứng dụng web của tôi, nơi cần một trình soạn thảo cắt dán.

Theo mặc định, khi một đối tượng được chọn, hộp giới hạn và các núm điều khiển thay đổi kích thước xuất hiện màu xanh lam, và các chốt là các ô vuông màu xanh lam lớn. Tôi muốn thay đổi điều này để phù hợp với thiết kế của dự án của tôi.

Các tài liệu có một trang dành riêng về cách thực hiện kiểu tùy chỉnh này ở đây: http://fabricjs.com/customization/

Sử dụng hướng dẫn nêu trên, tôi có thể nhận được hộp lựa chọn mà trông tốt hơn vào ứng dụng của tôi. Nhưng giải pháp này là trên cơ sở mỗi đối tượng. Khi thực hiện lựa chọn nhóm bằng phím Shift, các tay cầm và hộp giới hạn trở lại màu xanh mặc định.

Làm cách nào tôi có thể đạt được cùng một mức độ tùy chỉnh như được nêu trong tài liệu và tự động áp dụng nó cho toàn bộ canvas, bao gồm các lựa chọn nhóm?

Answer 1

Bạn có thể ghi đè lên các thuộc tính kiểm soát đối tượng mặc định trên toàn cầu và đặt chúng theo sở thích của bạn. Dưới đây là cách mã của bạn trông như thế nào:

fabric.Object.prototype.set({ 
    transparentCorners: false, 
    borderColor: '#ff00ff', 
    cornerColor: '#ff0000' 
}); 

Bạn có thể đặt mã này ở đầu mã. Thao tác này sẽ ghi đè kiểu dáng điều khiển mặc định và sẽ được áp dụng ở mọi nơi. Bạn có thể tìm thấy một fiddle làm việc ở đây: http://jsfiddle.net/apyeLeut/1/

Answer 2

Bạn có thể ghi đè hành vi đó bên trong sự kiện object:selected. Vì vậy, ví dụ,

canvas.on('object:selected',function(e){ 
    e.target.transparentCorners = false; 
    e.target.borderColor = 'green'; 
    e.target.cornerColor = 'purple'; 
}); 

FIDDLE

Answer 3

Tôi đang sử dụng phiên bản vải 1.7.19 và tôi đã cố gắng làm như Swapnil JainJain answer nhưng trong trường hợp của tôi không hoạt động.

Như thay thế, tôi đến với điều này là giải pháp:

fabric.Object.prototype.selectionColor ='rgba(255,119,0,0.3)'; 
fabric.Object.prototype.cornerSize = 20; 
fabric.Object.prototype.transparentCorners = false; 
fabric.Object.prototype.cornerColor = '#eee'; 

tôi thử nghiệm trên các tình huống sau đây:

1. Trước khi tài liệu đã sẵn sàng;
2. Sau khi tài liệu sẵn sàng;
3. Sau khi nhấp vào nút;