fabricjs Handledning
Komma igång med fabricjs
Sök…
Anmärkningar
fabric.js är ett kraftfullt och ganska enkelt javascript-bibliotek för HTML5-duk. Det ger en interaktiv plattform för att arbeta med HTML5-duken. Med hjälp av tyg kan du skapa objekt / former på duk från enkla geometriska former till komplexa former. Du kan till och med arbeta med bilder med fabric.js. fabric.js stöder också animationer. Det ger kontroller för att arbeta med bilder som att dra dem, skala dem och rotera dem. Det tillåter gruppering av former / objekt som kan manipuleras tillsammans. det stöder händelser som inte bara begränsas till dukelementet utan också med objekt. Det ger till och med funktionalitet för att serialisera duken till SVG eller JSON och återanvända den vid behov. Det stöder till och med körtyg under Node.js, med hjälp av jsdom- och nod-canvas-bibliotek.
Installation eller installation
Fabric.js är precis som alla andra JS-bibliotek precis specifika för duk. Lätt att installera och komma igång. Allt du behöver göra är att ladda ner fabric.js från HÄR och inkludera det i ditt projekt precis som alla andra JS-bibliotek, till exempel hur du gör det för jQuery. Skapa sedan html-filen antar index.html som:
<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>
src-attributet i skriptet avser en fil fabric.js som finns i samma mapp. Du kan behålla den i någon annan mapp och ge en relativ sökväg. Och du är bra att gå. För mer om Fabric besök Offcial Page . Här är en mycket grundläggande demonstration
Hej världen
<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)
Exemplet skapar en text 'Hello world From Fabric JS' hjälp av fabricjs. demo