Come modificare l'aspetto predefinito degli handle di ridimensionamento Fabric.js?

Question

Fabric.js è davvero a portata di mano con la sua modalità interattiva che consente di manipolare oggetti come in un programma di disegno vettoriale come Inkscape. Vorrei utilizzare questa capacità nel mio progetto di applicazione web in cui è necessaria una sorta di editor di collage.

Per impostazione predefinita, quando un oggetto viene selezionato, il riquadro di delimitazione e le maniglie di ridimensionamento appaiono in blu e le maniglie sono grandi quadrati vuoti blu. Mi piacerebbe cambiare questo per abbinare il design del mio progetto.

La documentazione ha una pagina dedicata su come eseguire questo tipo di personalizzazione qui: http://fabricjs.com/customization/

Utilizzando la guida di cui sopra, sono in grado di ottenere caselle di selezione che sembrano meglio nel mio app. Ma questa soluzione è su una base per oggetto. Quando si esegue una selezione di gruppo utilizzando il tasto Maiusc, le maniglie e la casella di delimitazione tornano al colore blu predefinito.

Come posso ottenere lo stesso livello di personalizzazione indicato nella documentazione e applicarlo automaticamente all'intero canvas, incluse le selezioni di gruppo?

Answer 1

È possibile ignorare le proprietà di controllo oggetto di default a livello globale e impostarle secondo la vostra preferenza. Ecco come apparirà il tuo codice:

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

È possibile impostare questo all'inizio del codice. Ciò sostituirà lo stile predefinito dei controlli e verrà applicato ovunque. Qui puoi trovare un violino funzionante: http://jsfiddle.net/apyeLeut/1/

Answer 2

È possibile sovrascrivere tale comportamento all'interno dell'evento object:selected. Così, per esempio,

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

FIDDLE

Answer 3

Sto usando la versione di tessuto 1.7.19 e ho provato a fare come Swapnil JainJain answer ma nel mio caso non funziona.

In alternativa, sono venuto con questa è la soluzione:

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

ho testato su seguenti situazioni:

1. Prima che il documento è pronto;
2. Dopo che il documento è pronto;
3. Dopo un clic del pulsante;