Unul dintre lucrurile uimitoare despre Fabric este cât de personalizabil este. Puteți modifica zeci de parametri diferiți pe pânză sau obiecte de pânză, pentru a face lucrurile să se comporte exact așa cum doriți. Să aruncăm o privire la unele dintre ele.
Blocarea obiectelor
Fiecare obiect de pe pânză poate fi blocat în câteva moduri. „lockMovementX”, „lockMovementY”, „lockRotation”, „lockScalingX”, „lockScalingY” sunt proprietăți care blochează acțiunile obiectului corespunzătoare. Deci, setarea object.lockMovementX la true împiedică mutarea obiectului pe orizontală. Totuși, îl puteți muta în plan vertical. În mod similar, lockRotation previne rotația și lockScalingX/lockScalingY — scalarea. Toate acestea sunt cumulate. Le puteți combina în orice mod.
Schimbarea granițelor, colțurilor
Puteți controla vizibilitatea marginilor și colțurilor obiectelor prin intermediul proprietăților „hasControls” și „hasBorders”. Doar setați-le la false și obiectele se redau instantaneu „goale”.
object.hasBorders = false;
object.hasControls = false;
De asemenea, le puteți modifica aspectul modificând unele dintre proprietățile de personalizare „cornerDashArray”, „borderDashArray”, „borderColor”, „transparentCorners” „cornerColor”, „cornerStrokeColor”, „cornerStyle”, „selectionBackgroundColor”, „padding” și „cornerSize”. „proprietăți.
object.set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6
});
object.set({
transparentCorners: false,
cornerColor: 'blue',
cornerStrokeColor: 'red',
borderColor: 'red',
cornerSize: 12,
padding: 10,
cornerStyle: 'circle',
borderDashArray: [3, 3]
});
Se dezactivează selecția
Puteți dezactiva selecția obiectelor de pe pânză setând proprietatea „selectare” a pânzei la fals. Acest lucru împiedică selecția pe absolut tot ceea ce este afișat pe pânză. Dacă trebuie doar să faceți anumite obiecte neselectabile, puteți modifica proprietatea „selectabilă” a obiectelor. Doar setați-l la fals și un obiect își pierde interactivitatea.
Personalizarea selecției
Acum, ce se întâmplă dacă nu doriți să dezactivați selecția, ci doriți să îi schimbați aspectul? Nici o problemă.
Există 4 proprietăți pe pânză care controlează prezentarea acesteia — „selectionColor”, „selectionBorderColor”, „selectionLineWidth” și „selectionDashArray”. Acestea ar trebui să se explice de la sine, așa că haideți să aruncăm o privire la un exemplu:
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
Ultima proprietate — „selectionDashArray” — nu este la fel de simplă. Ceea ce ne permite să facem este să facem linii de selecție întrerupte. Modul de definire a modelului liniuțelor este prin specificarea intervalelor printr-o matrice. Deci, pentru a crea un model în care există o liniuță lungă urmată de o liniuță scurtă, am putea folosi ceva de genul [10, 5] ca „selectionDashArray”. Aceasta va desena o linie lungă de 10 px, apoi va omite 5 px, va desena din nou o linie de 10 px și așa mai departe. Dacă ar fi să folosim matricea [2, 4, 6], modelul ar fi creat prin desenarea unei linii de 2px, apoi săriți peste 4px, apoi sărind o linie de 6px, apoi sărind peste 2px, apoi desenând o linie de 4px, apoi sărind peste 6px și așa mai departe. Înțelegi ideea. Ca exemplu, așa arată modelul [5, 10]:
Accident vascular cerebral punctat
Similar cu „selectionDashArray” pe pânză, toate obiectele Fabric au proprietatea „strokeDashArray” responsabilă pentru modelul punctat al oricărei lovituri efectuate pe un obiect.
var rect = new fabric.Rect({
fill: '#06538e',
width: 125,
height: 125,
stroke: 'red',
strokeDashArray: [5, 5]
});
canvas.add(rect);
Zona pe care se poate face clic
După cum știți, toate obiectele Fabric au o casetă de delimitare care este folosită pentru a trage un obiect sau pentru a-l roti și a-l scala, atunci când controalele/colțurile sunt prezente. S-ar putea să fi observat că obiectul poate fi tras chiar și atunci când faceți clic pe spațiul din cadrul casetei de delimitare a obiectului unde nu este desenat nimic.
Aruncă o privire la această imagine:
În mod implicit, toate obiectele Fabric de pe pânză pot fi trase de caseta de delimitare. Cu toate acestea, dacă doriți un comportament diferit - făcând clic/tragând obiecte numai după conținutul său real, puteți utiliza proprietatea „perPixelTargetFind” pe un obiect. Setați-l la adevărat pentru a obține comportamentul dorit.
Punct de rotație
Deoarece versiunea 1.0 Fabric utilizează implicit o interfață de utilizare alternativă - obiectele nu mai pot fi scalate și rotite în același timp. În schimb, există un control separat de rotire pe fiecare obiect. Proprietatea corespunzătoare pentru acel control este „hasRotatingPoint”. Puteți personaliza offset-ul în raport cu obiectul prin proprietatea numerică „rotatingPointOffset”.
Transformarea obiectului
Există o serie de alte proprietăți legate de transformare disponibile în Fabric începând cu versiunea 1.0. Una dintre ele este „uniScaleTransform” pe instanța canvas. Este fals în mod implicit și poate fi folosit pentru a activa scalarea neuniformă a obiectului; cu alte cuvinte, permite modificarea proporțiilor obiectului la tragerea de colțuri.
Apoi există proprietăți „centeredScaling” și „centeredRotation” (înainte de v1.3.4 era o proprietate - „centerTransform”). Ele specifică dacă un centru al unui obiect trebuie utilizat ca origine a transformării. Când ambele sunt setate la adevărat, acesta reproduce comportamentul anterior 1.0 când obiectele au fost întotdeauna scalate/rotate din centru. Deoarece 1.0 originea transformării este dinamică, ceea ce permite un control mai fin la scalarea obiectelor.
Ultima pereche de proprietăți noi este „originX” și „originY”. Setate în mod corespunzător la „stânga” și „sus” în mod implicit, acestea permit modificarea originii transformării obiectului în mod programatic. Când trageți colțurile obiectului, aceste proprietăți sunt cele care se schimbă dinamic sub capotă.
Deci, când le-am schimba manual? De exemplu, atunci când lucrați cu obiecte text. Când modificați textul în mod dinamic și dimensiunile casetei de text cresc, „originX” și „originY” dictează unde crește caseta. Deci, dacă trebuie să centrați obiectul text, ați seta originX la "centre". Pentru a rămâne la dreapta, ai seta originX la „dreapta”. Și așa mai departe. Acest comportament seamănă cu „poziția: absolut” în CSS.
Fundal pânză și suprapunere
După cum vă amintiți din prima parte, puteți aloca o culoare pentru a umple întregul fundal al pânzei. Doar setați orice valoare de culoare obișnuită la proprietatea „backgroundColor” a pânzei.
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.backgroundColor = 'rgba(0,0,255,0.3)';
canvas.renderAll();
Puteți merge și mai departe și aloca o imagine ca fundal. Va trebui să utilizați metoda setBackgroundImage pentru asta, trecând adresa URL și o opțiune de apel invers de finalizare.
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setBackgroundImage('../assets/pug.jpg', canvas.renderAll.bind(canvas));Este important de reținut că, în timp ce proprietatea se numește `backgroundImage`, poate găzdui orice tip de obiect fabric. Puteți seta un „fabric.Rect” pentru a reprezenta o panou de desen sau puteți seta un grup de obiecte. Același lucru este valabil și pentru „overlayImage” de mai jos sau pentru „backgroundColor” care poate găzdui orice umplutură, cum ar fi degrade sau modele.
În cele din urmă, puteți seta și imaginea de suprapunere, caz în care aceasta va apărea întotdeauna deasupra oricăror obiecte redate pe pânză. Utilizați doar setOverlayImage, adresa URL de trecere și un apel invers de finalizare opțional.
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.setOverlayImage('../assets/jail_cell_bars.png', canvas.renderAll.bind(canvas));
