fabricjs Tutoriel
Démarrer avec fabricjs
Recherche…
Remarques
fabric.js est une bibliothèque JavaScript puissante et assez simple pour le canevas HTML5. Il fournit une plateforme interactive pour travailler avec la toile HTML5. En utilisant un tissu, vous pouvez créer des objets / formes sur la toile, des formes géométriques simples aux formes complexes. Vous pouvez même travailler avec des images en utilisant fabric.js. fabric.js supporte également les animations. Il fournit des commandes pour travailler avec des images telles que les faire glisser, en les faisant tourner. Il permet de regrouper des formes / objets pouvant être manipulés ensemble. il prend en charge des événements non seulement limités à l'élément canvas mais également à des objets. Il fournit même une fonctionnalité permettant de sérialiser le canevas en SVG ou JSON et de le réutiliser en cas de besoin. Il prend même en charge l'exécution de fabric sous Node.js, avec l'aide des bibliothèques jsdom et node-canvas.
Installation ou configuration
Fabric.js est comme toute autre bibliothèque JS spécifique à canvas. Facile à installer et à démarrer Tout ce que vous avez à faire est de télécharger le fichier fabric.js d' HERE et de l'inclure dans votre projet, comme n'importe quelle autre bibliothèque JS, par exemple comme vous le faites pour jQuery. Ensuite, créez le fichier html supposez index.html comme:
<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'attribut src du script fait référence à un fichier fabric.js conservé dans le même dossier, que vous pouvez conserver dans un autre dossier et donner un chemin relatif. Et vous êtes prêt à partir. Pour plus d'informations sur la visite de tissus Offcial Page . Voici une démo très basique
Bonjour le monde
<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'exemple crée un texte 'Hello world From Fabric JS' utilisant fabricjs. Démo