使用fabric.js开发在线画板（一）基础介绍

Fabric.js介绍

Fabric.js是一款canvas类库，对canvas的api进行了封装，更方便我们使用。正如官网上所说的Fabric.js 是一个强大而简单的Javascript HTML5 画布库。 fabric.js官网地址

实现示例

最终要实现一个如下图的在线画板功能

image (1).png

fabric基础介绍

初始化画布

和canvas一样，我们需要初始化一个画布，之后的操作在画布上进行

  <canvas id="container" :width="1000" :height="1000"></canvas>

import Fabric from 'fabric'
this.canvas = new Fabric.Cavans('container')

在html界面需要创建一个id为container宽高为1000的canvas容器，之后fabric会根据容器id，初始化一个画布

画布上添加元素

初始化完画布，现在就需要在画布上添加元素。以矩形为例

let rect = new Fabric.rect({
  top: 0,
  left: 0,
  width: 100,
  height: 100,
  strokeWidth: 2,
  stroke: 'red'
})
this.canvas.add(rect)
this.canvas.renderAll()

上述代码是一段添加矩形框的简单代码，创建了一个在左上角的宽高分别为100的红色矩形框，之后通过已经生成的实例canvas的add方法添加到画布中。

更多图形请参考官网fabric.js官网地址

数据存储

fabric.js提供了将canvas转化成数据的api,方便我们将画板数据存储、导入

// 将画布转成json数据
this.canvas.toJSON()
// 将json数据转化成画布
this.canvas.loadFromJSON(jsonData)

有了这些api更方便我们对画板数据进行存储处理。

要实现的功能点

画布缩放、拖动
动态画圆、矩形、箭头
图片裁剪
图形缩放
撤销、恢复
可输入文字
导出canvas图片
数据存储

上述介绍了很少一部分fabric基础，接下来我们将在vue2的基础上一步步实现canvas画板