Fabric.js é uma biblioteca que simplifica a escrita de programas Canvas. Fabric.js fornece ao Canvas o modelo de objeto ausente, analisador SVG, interatividade e uma série de outras ferramentas indispensáveis. Como o Fabric.js é uma estrutura estrangeira, a API oficial é confusa e numerosa, e a maioria dos documentos relevantes está em inglês, e o número é pequeno. Portanto, este artigo tem como objetivo ajudar os novatos a começar rapidamente com o Fabric.js no. projete e aproveite o processo de desenho do Canvas.
Por que usar Fabric.js?O Canvas oferece um bom recurso de canvas, mas a API não é amigável o suficiente. Na verdade, desenhar gráficos simples é bom, mas não é tão conveniente desenhar alguns gráficos complexos e escrever alguns efeitos complexos. Fabric.js foi desenvolvido para esta finalidade. Ele usa principalmente objetos para escrever código.
O que Fabric.js pode fazer
Apresentando Fabric.js no projeto Vue
Supondo que você esteja usando ES6 e Webpack em seu projeto, você pode começar a usar Fabric.js da seguinte maneira:
1. Na linha de comando:
npm instala tecido (ou fio adiciona tecido)
2. Insira-o no arquivo .vue
importar {tecido} de 'tecido' 3. Comece sua jornada Fabric.js mounted: ciclo de vida de um único arquivo em .vue
Nota: O módulo fabric npm padrão produz pacotes bastante grandes. Se você tiver muitos pacotes em Fabric.js que talvez não precise, nesse caso você pode construir sua própria versão aqui ou na linha de comando.
Desenhar gráficos Desenhe gráficos regulares1. Declarar tela
var canvas = novo tecido.Canvas('main');2. Desenhe gráficos
var rect = new fabric.Rect({ left:100,//Distância do lado esquerdo da tela, em pixels top:100,//Distância do topo da tela fill:'red',//Largura da cor de preenchimento :30 ,//A largura do quadrado height:30//A altura do quadrado});3. Adicione gráficos à tela
tela.add (ret);
Outros gráficos de regras:
var rect = new fabric.Rectvar circle = new fabric.Circlevar triangle = new fabric.TriangleUse desenho de caminho: desenhe usando o movimento de pontos e linhas. Desenhe formas muito complexas através da aplicação de linhas, curvas e arcos.
No método fabric.Path(), M representa o comando de movimento, e este M 00 representa mover o pincel para as coordenadas do ponto (0,0).
L representa uma linha, L 200 100 significa usar uma caneta para desenhar uma linha das coordenadas (0,0) às coordenadas (200,100). z significa fechar o caminho da forma.
Depois de desenhar o triângulo, podemos usar o método set() para definir a posição, cor, ângulo, transparência e outros atributos do triângulo.
O código específico é o seguinte:
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); Operações em fotosHTML inserir imagem
<body> <canvas id=canvas width='800' height='800'></canvas> <img src=./2.png id=img> </body> ---------- ----------- var canvas = new fabric.Canvas('canvas');//Declara a tela var imgElement = document.getElementById('img'); //Declara nossa imagem var imgInstance = new fabric.Image(imgElement,{ //Definir a posição e aparência da imagem left:100, top:100, width:200, height:100, angle:30//Definir o ângulo de rotação no sentido horário do gráfico}); (imgInstance) ;//Adiciona à telaImagem de inserção de JavaScript
var canvas = new fabric.Canvas('canvas'); fabric.Image.fromURL('./2.png', function(oImg) { oImg.scale(0.1);//A imagem é reduzida em 10 vezes canvas. add(oImg }); interação Interação com a tela canvas.add(imgInstance);//Adicionar à tela var canvas = new fabric.Canvas('canvas'); canvas.on('mouse:down', function(options) { console.log(options.e.clientX , opções.e.clientY) })Nota: Os eventos de monitoramento comumente usados são os seguintes:
mouse:down : quando o mouse é pressionadomouse:move : quando o mouse se movemouse:up : Quando o mouse é levantadoOperações em objetos na tela
var canvas = new fabric.Canvas('canvas'); //Selecione o evento de escuta console.log('selecionou um retângulo' }); }); circle.on('selecionado', function() { console.log('selecionado um círculo'); }); canvas.add(rect);Nota: Os eventos de monitoramento comumente usados são os seguintes:
after:render : depois que a tela for redesenhadaobject:selected : O objeto está selecionadoobject:moving : objeto em movimentoobject:rotating : O objeto é giradoobject:added : O objeto é adicionadoobject:removed : O objeto é removidonew fabric.Group(): aceita dois parâmetros: um array composto pelos nomes dos objetos a serem combinados e os atributos comuns dos objetos combinados.
var canvas = new fabric.Canvas('canvas'); Ajuste a coordenada do eixo X do ponto central originY: 'center' //Ajuste a coordenada do eixo Y do ponto central}); var text = new fabric.Text('Hello World', {//Draw text fontSize: 30, originX: 'center', originY: 'center' }) //Combina var group = new fabric.Group([círculo, texto], { esquerda: 150, topo: 100, ângulo: 10 }) canvas.add ( grupo); Serialização e desserializaçãoserialização
var canvas = new fabric.Canvas('canvas'); .stringify(canvas.toJSON()));Desserialização
var canvas = new fabric.Canvas('canvas'); canvas.loadFromJSON('{objetos:[{type:rect,left:50,top:50,width:20,height:20,fill:green,overlayFill:null }')SVG
var canvas = new fabric.Canvas('canvas'); ;Documentação de referência: http://fabricjs.com/articles/
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.