fabricjs Tutorial
Iniziare con fabricjs
Ricerca…
Osservazioni
fabric.js è una libreria javascript potente e abbastanza semplice per canvas HTML5. Fornisce una piattaforma interattiva per lavorare con la tela HTML5. Usando il tessuto puoi creare oggetti / forme su tela da semplici forme geometriche a forme complesse. Puoi persino lavorare con le immagini usando fabric.js. fabric.js supporta anche le animazioni. Fornisce controlli per lavorare con immagini come trascinarle, ridimensionandole ruotandole. Permette il raggruppamento di forme / oggetti che possono essere manipolati insieme. supporta eventi non solo limitati all'elemento canvas ma anche a oggetti. Fornisce persino functionlaity per serializzare la tela su SVG o JSON e riutilizzarla come e quando necessario. Supporta anche l'esecuzione di fabric in Node.js, con l'aiuto delle librerie jsdom e node-canvas.
Installazione o configurazione
Fabric.js è proprio come qualsiasi altra libreria JS specifica per il canvas. Facile da configurare e iniziare. Tutto quello che devi fare è scaricare fabric.js da QUI e includerlo nel tuo progetto come qualsiasi altra libreria JS, ad esempio il modo in cui lo fai per jQuery. Quindi creare il file html supponiamo index.html come:
<head>
<script src="fabric.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400" style="border:2px solid #000000</canvas>
<script>
var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
</script>
</body>
l'attributo src nello script fa riferimento a un file fabric.js conservato nella stessa cartella, puoi conservarlo in un'altra cartella e dare un percorso relativo. E tu sei bello andare. Per maggiori informazioni su Fabric visita la pagina ufficiale . Ecco una demo molto semplice
Ciao mondo
<canvas id="c" width="400" height="400"></canvas>
var canvas = new fabric.Canvas("c");
var text = new fabric.Textbox('Hello world From Fabric JS', {
width:250,
cursorColor :"blue",
top:10,
left:10
});
canvas.add(text)
L'esempio crea un testo 'Hello world From Fabric JS' usando fabricjs. dimostrazione