fabricjsAan de slag met fabricjs


Opmerkingen

fabric.js is een krachtige en vrij eenvoudige javascript-bibliotheek voor HTML5 canvas. Het biedt een interactief platform om te werken met het HTML5-canvas. Met behulp van stof kunt u objecten / vormen op canvas maken van eenvoudige geometrische vormen tot complexe vormen. U kunt zelfs met afbeeldingen werken met fabric.js. fabric.js ondersteunt ook animaties. Het biedt bedieningselementen om met afbeeldingen te werken, zoals slepen, schalen en roteren. Hiermee kunt u vormen / objecten groeperen die samen kunnen worden gemanipuleerd. het ondersteunt evenementen niet alleen beperkt tot het canvas-element maar ook met objecten. Het biedt zelfs functionaliteit om het canvas te serialiseren naar SVG of JSON en het wanneer nodig opnieuw te gebruiken. Het ondersteunt zelfs het uitvoeren van fabric onder Node.js, met behulp van jsdom en node-canvas bibliotheken.

Hallo Wereld

<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)
 

In het voorbeeld wordt de tekst 'Hello world From Fabric JS' met behulp van fabricjs. demonstratie

Installatie of instellingen

Fabric.js is net als elke andere JS-bibliotheek alleen specifiek voor canvas. Eenvoudig in te stellen en aan de slag te gaan. Het enige dat u hoeft te doen is de fabric.js van HIER te downloaden en op te nemen in uw project, net als elke andere JS-bibliotheek, bijvoorbeeld de manier waarop u het voor jQuery doet. Maak vervolgens het html-bestand veronderstel index.html zoals:

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

het src-kenmerk in het script verwijst naar een bestand fabric.js die in dezelfde map wordt bewaard, u kunt het in een andere map bewaren en een relatief pad opgeven. En je bent goed om te gaan. Ga voor meer informatie over Fabric naar Offcial Page . Hier is een heel eenvoudige demo