Wie ändert man das Standard-Erscheinungsbild von Fabric.js-Griffen?

Question

Fabric.js ist sehr praktisch mit seinem interaktiven Modus, mit dem Objekte wie in einem Vektorgrafikprogramm wie Inkscape manipuliert werden können. Ich möchte diese Kapazität in meinem Web-Anwendungsprojekt verwenden, wo eine Art Collage-Editor benötigt wird.

Wenn ein Objekt ausgewählt wird, werden die Begrenzungsrahmen- und Größenanpassungsgriffe standardmäßig blau und die Griffe sind große blaue leere Quadrate. Ich würde dies gern ändern, um dem Design meines Projekts zu entsprechen.

Die Dokumentation hat eine eigene Seite, wie diese Art der Anpassung auszuführen hier: http://fabricjs.com/customization/

die zuvor erwähnte Führungs Verwendung, ich bin in der Lage Auswahlfelder zu erhalten, die in meine App besser aussehen. Aber diese Lösung ist pro Objekt. Wenn Sie eine Gruppenauswahl mit der Umschalttaste durchführen, werden die Griffe und die Begrenzungsbox wieder auf die blaue Standardfarbe zurückgesetzt.

Wie erreiche ich das gleiche Maß an Anpassung wie in der Dokumentation angegeben und automatisch auf die gesamte Arbeitsfläche angewendet, einschließlich der Gruppenauswahl?

Answer 1

Sie die Steuerstandardobjekt außer Kraft setzen Eigenschaften global und sie als pro Ihre Präferenz. So sieht Ihr Code aus:

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

Sie können dies am Anfang Ihres Codes festlegen. Dies überschreibt das Standard-Styling von Steuerelementen und wird überall angewendet. Sie können eine funktionierende Geige hier finden: http://jsfiddle.net/apyeLeut/1/

Answer 2

Sie können dieses Verhalten innerhalb object:selected Ereignis überschreiben. So kann beispielsweise

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

FIDDLE

Answer 3

Ich benutze die Stoffversion 1.7.19 und ich habe versucht, als Swapnil JainJain answer zu tun, aber in meinem Fall funktioniert nicht.

Als Alternative habe ich mit dieser kam, ist Lösung:

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

ich auf den folgenden Situationen getestet:

1. Bevor das Dokument fertig gestellt ist;
2. Nachdem das Dokument fertig ist;
3. Nach einem Klick auf die Schaltfläche;