Jak zmienić domyślny wygląd uchwytów zmiany rozmiaru Fabric.js?

Question

Fabric.js jest bardzo poręczny dzięki interaktywnemu trybowi, który pozwala manipulować obiektami, takimi jak program do rysowania wektorowego, taki jak Inkscape. Chciałbym wykorzystać tę zdolność do mojego projektu aplikacji internetowej, w której potrzebny jest edytor kolaży.

Domyślnie, gdy obiekt jest zaznaczony, obwiednia i uchwyty zmiany rozmiaru są wyświetlane na niebiesko, a uchwyty są dużymi niebieskimi pustymi kwadratami. Chciałbym to zmienić, aby pasowało do mojego projektu.

Dokumentacja posiada dedykowaną stronę o tym, jak wykonać ten typ personalizacji tutaj: http://fabricjs.com/customization/

użyciu wyżej wspomnianego przewodnika, jestem w stanie uzyskać pola wyboru, które wyglądają lepiej w moim app. Ale to rozwiązanie jest oparte na poszczególnych obiektach. Podczas wybierania grupy za pomocą klawisza Shift, uchwyty i ramka ograniczająca powracają do domyślnego niebieskiego koloru.

Jak osiągnąć ten sam poziom dostosowania, jak podano w dokumentacji i automatycznie zastosować go do całego obszaru roboczego, w tym do wyboru grup?

Answer 1

Możesz zmienić domyślne właściwości kontroli obiektu globalnie i ustawić je zgodnie z własnymi preferencjami. Oto, jak będzie wyglądał Twój kod:

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

Możesz ustawić to na początku kodu. Spowoduje to zastąpienie domyślnej stylizacji elementów sterujących i będzie stosowane wszędzie. Tutaj znajdziesz działające skrzypce: http://jsfiddle.net/apyeLeut/1/

Answer 2

Możesz zastąpić to zachowanie wewnątrz zdarzenia object:selected. Tak na przykład,

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

FIDDLE

Answer 3

Używam wersji tkaniny 1.7.19 i próbowałem zrobić to jako Swapnil JainJain answer, ale w moim przypadku nie działa.

Jako alternatywa, ja przyszedłem z tym jest rozwiązanie:

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

I przetestowane na następujących sytuacjach:

1. Przed Dokument jest gotowy;
2. Po przygotowaniu dokumentu;
3. Po kliknięciu przycisku;