Fabric.js est une bibliothèque qui simplifie l'écriture de programmes Canvas. Fabric.js fournit à Canvas le modèle objet manquant, l'analyseur svg, l'interactivité et toute une série d'autres outils indispensables. Étant donné que Fabric.js est un framework étranger, l'API officielle est compliquée et nombreuse, et la plupart des documents pertinents sont en anglais, et le nombre est petit. Par conséquent, cet article vise à aider les novices à démarrer rapidement avec Fabric.js dans le monde. projetez et profitez du processus de dessin de Canvas.
Pourquoi utiliser Fabric.js ?Canvas offre une bonne capacité de canevas, mais l'API n'est pas assez conviviale. Dessiner des graphiques simples est en fait acceptable, mais il n'est pas si pratique de dessiner des graphiques complexes et d'écrire des effets complexes. Fabric.js a été développé à cet effet. Il utilise principalement des objets pour écrire du code.
Ce que Fabric.js peut faire
Présentation de Fabric.js dans le projet Vue
En supposant que vous utilisez ES6 et Webpack dans votre projet, vous pouvez commencer à utiliser Fabric.js comme suit :
1. Dans la ligne de commande :
npm install fabric (ou fil ajouter du tissu)
2. Introduisez-le dans le fichier .vue
importer { tissu } depuis 'tissu' 3. Commencez votre parcours Fabric.js dans mounted: d'un seul fichier dans .vue
Remarque : Le module Fabric npm par défaut produit des packages assez volumineux dans Fabric.js dont vous n'avez peut-être pas besoin, auquel cas vous pouvez créer votre propre version ici ou sur la ligne de commande.
Dessiner des graphiques Dessinez des graphiques réguliers1. Déclarer la toile
var toile =nouveau tissu.Canvas('main');2. Dessinez des graphiques
var rect = new fabric.Rect({ left:100,//Distance depuis le côté gauche de la toile, en pixels top:100,//Distance depuis le haut de la toile fill:'red',//Largeur de couleur de remplissage :30 ,//La largeur du carré hauteur:30//La hauteur du carré});3. Ajoutez des graphiques au canevas
toile.add(rect);
Autres graphiques de règles :
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleUtiliser le dessin de chemin : dessinez en utilisant le mouvement des points et des lignes. Dessinez des formes très complexes en appliquant des lignes, des courbes et des arcs.
Dans la méthode fabric.Path(), M représente la commande de mouvement, et ce M 00 représente le déplacement du pinceau vers les coordonnées du point (0,0).
L représente la ligne, L 200 100 signifie utiliser un stylo pour tracer une ligne des coordonnées (0,0) aux coordonnées (200 100). z signifie fermer le chemin de la forme.
Après avoir dessiné le triangle, nous pouvons utiliser la méthode set() pour définir la position, la couleur, l'angle, la transparence et d'autres attributs du triangle.
Le code spécifique est le suivant :
var path = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ left: 120, top: 120,fill:'red' });canvas.add(path); Opérations sur les imagesHTML insérer une image
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//Déclarer le canevas var imgElement = document.getElementById('img');//Déclarer notre image var imgInstance = new fabric.Image(imgElement,{ //Définissez la position et l'apparence de l'image à gauche : 100, haut : 100, largeur : 200, hauteur : 100, angle : 30//Définissez l'angle de rotation dans le sens des aiguilles d'une montre du graphique}); (imgInstance) ;//Ajouter au canevasJavaScript insérer une image
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//L'image est réduite de 10 fois le canevas. ajouter(oImg ); interaction Interaction avec la toile canvas.add(imgInstance);//Ajouter au canevas var canvas = new fabric.Canvas('canvas'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX , options.e.clientY) })Remarque : Les événements de surveillance couramment utilisés sont les suivants :
mouse:down : lorsque la souris est enfoncéemouse:move : quand la souris bougemouse:up : Lorsque la souris est levéeOpérations sur les objets sur le canevas
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ largeur : 100, hauteur : 50, remplissage : 'vert' }); //Sélectionnez l'événement d'écoute console.log('selected a rectangle'); }); var circle = new fabric.Circle({ radius: 75, fill: 'blue' }); circle.on('selected', function() { console.log('selected a circle'); });Remarque : Les événements de surveillance couramment utilisés sont les suivants :
after:render : après que le canevas soit redessinéobject:selected : L'objet est sélectionnéobject:moving : objet en mouvementobject:rotating : L'objet est pivotéobject:added : L'objet est ajoutéobject:removed : L'objet est suppriménew fabric.Group() : accepte deux paramètres : un tableau composé des noms des objets à combiner, et les attributs communs des objets combinés.
var canvas = new fabric.Canvas('canvas'); var circle = new fabric.Circle({//Dessinez un rayon de cercle : 100, remplissage : '#f00', scaleY : 0,5, originX : 'center',// Ajustez la coordonnée de l'axe X du point central originY : 'center'//Ajustez la coordonnée de l'axe Y du point central}); var text = new fabric.Text('Hello World', {//Draw text fontSize : 30, originX : 'center', originY : 'center' }) //Combiner var group = new fabric.Group([circle, text], { left : 150, top : 100, angle : 10 }) canvas.add ( groupe); Sérialisation et désérialisationsérialisation
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ largeur : 100, hauteur : 100, remplissage : 'rouge' }); .stringify(canvas.toJSON()));Désérialisation
var canvas = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objects:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var canvas = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ largeur : 100, hauteur : 100, remplissage : 'rouge' }); ;Documentation de référence : http://fabricjs.com/articles/
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.