全国服务热线:4008-888-888

技术知识

详解Canvas好用库Fabric.js应用手册

简介甚么是Fabric.js?

Fabric.js是1个能够简化Canvas程序流程撰写的库。 Fabric.js为Canvas出示所缺乏的目标实体模型, svg parser, 互动和1整套别的不能或缺的专用工具。因为Fabric.js为海外架构,官方API杂乱无章多种多样,有关文本文档大多数为英小蜜档,并且数量很少,因此本文旨在协助初学者在新项目中迅速上手Fabric.js,享有绘图Canvas的全过程。

为何要应用Fabric.js?

Canvas出示1个好的画布工作能力, 可是Api不足友善。绘图简易图型实际上还能够, 但是做1些繁杂的图型绘图, 撰写1些繁杂的实际效果,就并不是那末便捷了。Fabric.js便是为此而开发设计,它关键便是用目标的方法去撰写编码。

Fabric.js能做的事儿

  • 在Canvas上建立、填充图型(包含照片、文本、标准图型和繁杂相对路径构成图型)。
  • 给图型填充渐变色色调。
  • 组成图型(包含组成图型、图型文本、照片等)。
  • 设定图型动漫集客户互动。
  • 转化成JSON, SVG数据信息等。
  • 转化成Canvas目标自带拖拖拉拉拽作用。

起步

Vue新项目中引进Fabric.js

假定您的新项目中正在应用ES6和Webpack,您能够刚开始应用Fabric.js,以下所示:

1、在指令行中:

npm install fabric(或yarn add fabric)

2、将其引进 .vue 文档中

import { fabric } from 'fabric'

3、在 .vue 的单文档中的 mounted: 性命周期里刚开始你的Fabric.js之旅啦

注:默认设置的fabric npm控制模块造成了非常大的包,假如Fabric.js中您有许多将会不必须的包,在这类状况下,能够在 在此处 或在指令行中搭建你自身的版本号。

绘图图型

绘图标准图型

1、申明画布

var canvas =new fabric.Canvas('main');

2、绘图图型

    var rect = new fabric.Rect({

           left:100,//间距画布左边的间距,企业是像素

           top:100,//间距画布上边的间距

           fill:'red',//填充的色调

           width:30,//方形的宽度

          height:30//方形的高宽比

       });

3、加上图型至画布

canvas.add(rect);

别的标准图型:

  • 绘图方形 var rect = new fabric.Rect
  • 绘图圆形 var circle = new fabric.Circle
  • 绘图3角形 var triangle = new fabric.Triangle

绘图不规律图型

应用相对路径制图:用点和线的挪动的方法开展制图。根据对 线、曲线图、弧的运用绘图十分繁杂的图型。

在fabric.Path( )方式中,“M”意味着“挪动”指令,这个“M 00” 意味着把画笔挪动到(0,0)点座标。

“L”意味着“线”,“L 200 100 ”的意思是应用钢笔划1条线,从(0,0)座标画到(200,100)座标。 “z” 意味着让图型闭合相对路径。

画好3角形后,大家能够用set( )方式对3角形的部位、色调、角度、全透明度等特性开展设定。

实际编码以下:

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

对照片的实际操作

HTML插进照片

     <body>
           <canvas id="canvas" width='800' height='800'></canvas>
           <img src="./2.png" id="img">
       </body>
       ---------------------
       var canvas = new fabric.Canvas('canvas');//申明画布
       var imgElement = document.getElementById('img');//申明大家的照片     
       var imgInstance = new fabric.Image(imgElement,{  //设定照片部位和模样
            left:100,
            top:100,
            width:200,
            height:100,
            angle:30//设定图型顺时针转动角度
       });
      
       canvas.add(imgInstance);//添加到canvas中

JavaScript插进照片

     var canvas = new fabric.Canvas('canvas');
           fabric.Image.fromURL('./2.png', function(oImg) {
           oImg.scale(0.1);//照片变小10倍
           canvas.add(oImg);
       }); 

互动

对画布的互动

    canvas.add(imgInstance);//添加到canvas中
       var canvas = new fabric.Canvas('canvas');
       canvas.on('mouse:down', function(options) {
           console.log(options.e.clientX, options.e.clientY)
       })

注:常见监视恶性事件以下:

  • mouse:down:电脑鼠标按下时
  • mouse:move:电脑鼠标挪动时
  • mouse:up:电脑鼠标抬起时

对画布上目标的实际操作

     var canvas = new fabric.Canvas('canvas');

       var rect = new fabric.Rect({ width: 100, height: 50, fill: 'green' });

       rect.on('selected', function() {//选定监视恶性事件

           console.log('selected a rectangle');

       });

 

       var circle = new fabric.Circle({ radius: 75, fill: 'blue' });

       circle.on('selected', function() {

           console.log('selected a circle');

       });

       canvas.add(rect);

       canvas.add(circle);

注:常见监视恶性事件以下:

  • after:render:画布重绘后
  • object:selected:目标被选定
  • object:moving:目标挪动
  • object:rotating:目标被转动
  • object:added:目标被添加
  • object:removed:目标被移除

组成

new fabric.Group():接纳两个主要参数:要组成目标名字构成的数字能量数组、组成到1起的目标的相互特性。

 var canvas = new fabric.Canvas('canvas');

        var circle = new fabric.Circle({//绘图圆形

        radius: 100,

        fill: '#f00',

        scaleY: 0.5,

        originX: 'center',//调剂管理中心点的X轴座标

        originY: 'center'//调剂管理中心点的Y轴座标

      });

     var text = new fabric.Text('Hello World', {//绘图文字

       fontSize: 30,

       originX: 'center',

       originY: 'center'

    })

    //开展组成

    var group = new fabric.Group([circle, text], {

      left: 150,

      top: 100,

      angle: 10

    })

    canvas.add(group);

编码序列化与反编码序列化

编码序列化

  var canvas = new fabric.Canvas('canvas');

    var rect = new fabric.Rect({

        width: 100,

        height: 100,

        fill: 'red'

    });

    canvas.add(rect);
    
    console.log(JSON.stringify(canvas.toJSON()));

反编码序列化

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({
        width: 100,
        height: 100,
        fill: 'red'
    });

    canvas.add(rect);

    canvas.toSVG();

参照文本文档:http://fabricjs.com/articles/

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服