前言

由于需要实现一个前端的画布编辑器，因此找到了一个老牌的前端开源画布框架——fabricjs，他的维护者们目前仍在高速迭代着，大约每个月会有一个Release。我在撰写这篇博文时，它的最新Release版本是4.6.0

安装与引入

安装

npm install fabric

引入到项目中

import {fabric} from "fabric"

初始化
初始化时需要我们先创建一个HTML5的canvas标签，它需要几个必要的属性：

id：用于通过唯一标识和定位该canvas标签
width：不同于style中的width，用于表示画布的宽度
height：不同于style中的height，用于表示画布的高度

整体上如：

<canvas id="canvas" width="200px" height="200px"/>

实例化fabric的canvas对象

// 传入的"canvas"即上文中的标签id
// 这个canvas对象就是本文的主角，通过它对画布进行各种操作
let canvas = new fabric.Canvas("canvas");

它能做什么？

fabricjs是一个前端画布框架，我们通过它可以在画布上新建圆、三角、矩形、线条等常规图形，还有文本框、图片等。我们还可以将画布的数据序列化为JSON字符串，并在需要的时候将其反序列化并渲染出来…

绘制基础图形

为了举例，我们绘制一个矩形在画布上

let properties = {
	    left: 20,  // 左上角顶点横坐标20px
	    top: 20,  // 左上角顶点纵坐标20px
	    fill: '#AFE164',  // 填充颜色为#AFE164
	    width: 160,  // 宽度为160px
	    height: 160,  // 高度为160px
	    objectCaching: false,  // 对象缓存设为false
	    stroke: 'transparent',  //边框线颜色为透明
	    strokeWidth: 1  //边框线宽度设为1px 
};
let rect = new fabric.Rect(properties);

// 将矩形添加到画布上
canvas.add(rect);

于是我们在画布上得到了：
在这里插入图片描述
其他基础图形对应的fabric类分别是：

圆形：fabric.Circle
三角形：fabric.Triangle
线条：fabric.Line

文本框

文本框有三种：基础静态文本框Text，可交互的单行文本框IText和可交互的多行文本框Textbox。关系上，IText继承了Text，Textbox又继承了IText。

  fabric.Text = fabric.util.createClass(fabric.Object, {...});
  fabric.IText = fabric.util.createClass(fabric.Text, fabric.Observable, {...});
  fabric.Textbox = fabric.util.createClass(fabric.IText, fabric.Observable, {...});

Text

Text是静态的文本框，仅显示设定的文本，类似于一个Label，不可交互。
构造方法接受两个参数text和options

    initialize: function(text, options) {...}

text：要显示的文本内容
option：初始的一些属性，如top、left、stroke等

定义示例

let object = new fabric.Text("hello world", {});

IText

IText是可交互的单行文本框，顾名思义，其有两个特点：

可交互，用户可通过双击使其变为编辑态，并可修改其中的文本内容，失去焦点时即退出编辑态。
单行，当其中的文本内容越来越多时，其宽度width会变得越来越大以适应不断增多的文字，不会换行，因此当文字过多时他会超出画布，超出话不得部分无法显示出来。

定义示例

let object = new fabric.IText("hello world", {});

Textbox

Textbox与IText的区别是，前者可以固定宽度值width，当其中的文本内容越来越多时，其高度height会按需膨胀，即将超过宽度的文字自动流入下一行。

定义示例

// 给定一个宽度值
let width = 120;
let object = new fabric.Textbox("hello world", {width: width});

图片

图片使用fabric.Image类来定义，构造器：

    /**
     * Constructor
     * Image can be initialized with any canvas drawable or a string.
     * The string should be a url and will be loaded as an image.
     * @param {HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String} element Image element
     * @param {Object} [options] Options object
     */
    initialize: function(element, options) {...}

需要传入两个参数：

element：可传入的类型是HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String，传入String时，其必须是图片的URL。
option：初始的一些属性，如top、left、stroke等

异步加载图片
一般情况下，我们的图片资源都需要先异步从其他URL加载，加载完成后再渲染出来，直接使用构造器会同步阻塞，直到图片加载完成。因此，我们需要使用异步方法：

  /**
   * Creates an instance of fabric.Image from an URL string
   * @static
   * @param {String} url URL to create an image from
   * @param {Function} [callback] Callback to invoke when image is created (newly created image is passed as a first argument). Second argument is a boolean indicating if an error occurred or not.
   * @param {Object} [imgOptions] Options object
   */
  fabric.Image.fromURL = function(url, callback, imgOptions) {
    fabric.util.loadImage(url, function(img, isError) {
      callback && callback(new fabric.Image(img, imgOptions), isError);
    }, null, imgOptions && imgOptions.crossOrigin);
  };

需要传入三个参数：

url：图片资源的URL。
callback：异步方法的回调方法，当加载图片资源完成时会调用该方法。从源码第二行中可以看到，我们的callback方法需要接受两个参数：
a. 一个创建好的fabric.Image对象
b. isError：加载图片过程中是否发生了错误。
imgOptions：同前文中的option类似。

定义示例

let url = "http://......";
let callback = (fabricImage, isError) => {
	if (!isError) {
		canvas.add(fabricImage);
	}
};
fabric.Image.fromURL(url, callback, {...});