Fabric.js es una biblioteca que simplifica la escritura de programas Canvas. Fabric.js proporciona a Canvas el modelo de objetos que falta, el analizador svg, interactividad y una gran cantidad de otras herramientas indispensables. Dado que Fabric.js es un marco extranjero, las API oficiales son confusas y numerosas, y la mayoría de los documentos relevantes están en inglés y el número es pequeño. Por lo tanto, este artículo tiene como objetivo ayudar a los principiantes a comenzar rápidamente con Fabric.js. proyecto y disfrute del proceso de dibujar Canvas.
¿Por qué utilizar Fabric.js?Canvas proporciona una buena capacidad de lienzo, pero la API no es lo suficientemente amigable. En realidad, dibujar gráficos simples está bien, pero no es tan conveniente dibujar algunos gráficos complejos y escribir algunos efectos complejos. Fabric.js fue desarrollado para este propósito. Utiliza principalmente objetos para escribir código.
Qué puede hacer Fabric.js
Introduciendo Fabric.js en el proyecto Vue
Suponiendo que está utilizando ES6 y Webpack en su proyecto, puede comenzar a usar Fabric.js de la siguiente manera:
1. En la línea de comando:
npm instala tela (o hilo agrega tela)
2. Introducirlo en el archivo .vue
importar {tela} desde 'tela' 3. Comience su recorrido por Fabric.js en mounted: de un único archivo en .vue
Nota: El módulo npm predeterminado de Fabric produce paquetes bastante grandes si tiene muchos paquetes en Fabric.js que quizás no necesite, en cuyo caso puede crear su propia versión aquí o en la línea de comando.
Dibujar gráficos Dibujar gráficos regulares1. Declarar lienzo
var lienzo =nueva tela.Canvas('principal');2. Dibujar gráficos
var rect = new fabric.Rect({ left:100,//Distancia desde el lado izquierdo del lienzo, en píxeles top:100,//Distancia desde la parte superior del lienzo fill:'red',//Ancho del color de relleno :30 ,//El ancho del cuadrado height:30//La altura del cuadrado});3. Agrega gráficos al lienzo.
lienzo.add(rect);
Otros gráficos de reglas:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleUsar dibujo de ruta: dibuja usando el movimiento de puntos y líneas. Dibuja formas muy complejas mediante la aplicación de líneas, curvas y arcos.
En el método fabric.Path(), M representa el comando de movimiento y este M 00 representa mover el pincel a las coordenadas del punto (0,0).
L representa una línea, L 200 100 significa usar un bolígrafo para dibujar una línea desde (0,0) coordenadas hasta (200,100) coordenadas. z significa cerrar el camino de la forma.
Después de dibujar el triángulo, podemos usar el método set() para establecer la posición, el color, el ángulo, la transparencia y otros atributos del triángulo.
El código específico es el siguiente:
var ruta = new fabric.Path('M 0 0 L 200 100 L 170 200 z');path.set({ izquierda: 120, arriba: 120,relleno:'rojo' });canvas.add(ruta); Operaciones sobre imágenes.Insertar imagen HTML
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//Declarar el lienzo var imgElement = document.getElementById('img');//Declarar nuestra imagen var imgInstance = new fabric.Image(imgElement,{ //Establece la posición y apariencia de la imagen left:100, top:100, width:200, height:100, angle:30//Establece el ángulo de rotación en el sentido de las agujas del reloj del gráfico}); (imgInstance);//Agregar al lienzoInsertar imagen en JavaScript
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//La imagen se reduce 10 veces el lienzo. agregar(oImg }); interacción Interacción con el lienzo. canvas.add(imgInstance);//Agregar al lienzo var canvas = new fabric.Canvas('canvas'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX, opciones.e.clienteY) })Nota: Los eventos de monitoreo más utilizados son los siguientes:
mouse:down : cuando se presiona el mousemouse:move : cuando el mouse se muevemouse:up : Cuando se levanta el mouseOperaciones sobre objetos en el lienzo.
var lienzo = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ ancho: 100, alto: 50, relleno: 'verde' }); //Selecciona el evento de escucha console.log('seleccionó un rectángulo'); var círculo = new fabric.Circle({ radio: 75, relleno: 'azul' }); círculo.on('seleccionado', función() { console.log('seleccionado un círculo'); }); lienzo.add(rect);Nota: Los eventos de monitoreo más utilizados son los siguientes:
after:render : después de volver a dibujar el lienzoobject:selected : El objeto está seleccionadoobject:moving : objeto en movimientoobject:rotating : El objeto se giraobject:added : el objeto se agregaobject:removed : El objeto se eliminanew fabric.Group(): acepta dos parámetros: una matriz compuesta por los nombres de los objetos a combinar y los atributos comunes de los objetos combinados.
var canvas = new fabric.Canvas('canvas'); var circulo = new fabric.Circle({//Dibuja un radio de círculo: 100, relleno: '#f00', escalaY: 0.5, origenX: 'centro',// Ajustar la coordenada del eje X del punto central originY: 'center'//Ajustar la coordenada del eje Y del punto central}); 30, origenX: 'centro', origenY: 'centro' }) //Combinar var grupo = nuevo fabric.Group([círculo, texto], { izquierda: 150, arriba: 100, ángulo: 10 }) lienzo.add ( grupo); Serialización y deserializaciónpublicación por entregas
var lienzo = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ ancho: 100, alto: 100, relleno: 'rojo' }); .stringify(canvas.toJSON()));Deserialización
var lienzo = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objetos:[{tipo:rect,izquierda:50,arriba:50,ancho:20,alto:20,relleno:verde,overlayFill:null }')SVG
var lienzo = new fabric.Canvas('canvas'); var rect = new fabric.Rect({ ancho: 100, alto: 100, relleno: 'rojo' }); ;Documentación de referencia: http://fabricjs.com/articles/
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.