Fabricjs一个简单强大的Canvas绘图库快速入门

冷不防 2023-10-01 17:47 29阅读 0赞

## 场景 ##

### Fabric官网 ###

[Fabric.js Javascript Canvas Library][]

![205b8dfcc33f41cfb45020c5af43693d.gif][]

Fabric.js 是一个可以简化 Canvas 程序编写的库。

Fabric.js 为 Canvas 提供所缺少的对象模型，svg parser，交互和一整套其他不可或缺的工具。

Canvas 提供一个好的画布能力，但是 Api 不够友好。绘制简单图形其实还可以，

不过做一些复杂的图形绘制，编写一些复杂的效果，就不是那么方便了。

Fabric.js 就是为此而开发，它主要就是用对象的方式去编写代码。

### Fabric.js能做的事情 ###

在Canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。

给图形填充渐变颜色。

组合图形（包括组合图形、图形文字、图片等）。

设置图形动画集用户交互。

生成JSON, SVG数据等。

生成Canvas对象自带拖拉拽功能。

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi ][https_blog.csdn.net_badao_liumang_qizhi]  
关注公众号  
霸道的程序猿  
获取编程相关电子书、教程推送与免费下载。

## 实现 ##

1、搭建Vue项目

若依前后端分离版本地搭建开发环境并运行项目的教程：

[若依前后端分离版手把手教你本地搭建环境并运行项目\_BADAO\_LIUMANG\_QIZHI的博客-CSDN博客\_若依前后端分离文档][BADAO_LIUMANG_QIZHI_-CSDN]

2、项目中引入fabric依赖

npm install fabric --save

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16][]

3、新建Vue页面，参考官网入门教程

[Tutorial — Fabric.js Javascript Canvas Library][Tutorial _ Fabric.js Javascript Canvas Library]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

4、页面上添加一个canvas并设置其id为c

5、页面中引入fabric

import { fabric } from 'fabric'

6、页面初始化之后在mounted方法中调用自定义方法init

mounted(){
        this.init();
      },

7、在Init方法中

声明画布，绘制图形，添加图形至画布

init(){
          // create a wrapper around native canvas element (with id="c")
          // 声明画布
          var canvas = new fabric.Canvas('c');
    
          // create a rectangle object
          // 绘制图形
          var rect = new fabric.Rect({
            left: 100, //距离画布左侧的距离，单位是像素
            top: 100, //距离画布上边的距离
            fill: 'red', //填充的颜色
            width: 20, //方形的宽度
            height: 20 //方形的高度
          });
    
          // "add" rectangle onto canvas
          //添加图形至画布
          canvas.add(rect);
        },

8、效果

![be0ebabca3e241fab9ea085e29c7a89e.gif][]

9、完整代码

<template>
      <canvas id="c" width="800" height="800"></canvas>
    </template>
    
    <script>
    
    import { fabric } from 'fabric'
    export default {
      name: "HelloFabric",
      data() {
        return {
    
        };
      },
      mounted(){
        this.init();
      },
      methods: {
        init(){
          // create a wrapper around native canvas element (with id="c")
          // 声明画布
          var canvas = new fabric.Canvas('c');
    
          // create a rectangle object
          // 绘制图形
          var rect = new fabric.Rect({
            left: 100, //距离画布左侧的距离，单位是像素
            top: 100, //距离画布上边的距离
            fill: 'red', //填充的颜色
            width: 20, //方形的宽度
            height: 20 //方形的高度
          });
    
          // "add" rectangle onto canvas
          //添加图形至画布
          canvas.add(rect);
        },
      },
    };
    </script>

[Fabric.js Javascript Canvas Library]: http://fabricjs.com/
[205b8dfcc33f41cfb45020c5af43693d.gif]: https://img-blog.csdnimg.cn/205b8dfcc33f41cfb45020c5af43693d.gif
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi
[BADAO_LIUMANG_QIZHI_-CSDN]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/555e12bf77ed4d5da55751286196b203.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[Tutorial _ Fabric.js Javascript Canvas Library]: http://fabricjs.com/articles/
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://img-blog.csdnimg.cn/41c2fd58056749909c6ee09b354069a5.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA6Zy46YGT5rWB5rCT5rCU6LSo,size_20,color_FFFFFF,t_70,g_se,x_16
[be0ebabca3e241fab9ea085e29c7a89e.gif]: https://img-blog.csdnimg.cn/be0ebabca3e241fab9ea085e29c7a89e.gif