Fabric.js入门—面向对象

Fabric.js 一款基于面向对象思维的功能强大的HTML5 Canvas JS库 。

Fabric入门部分包括：

• 画布创建
• 基础组件增 · 删 · 改 · 查
• 从svg创建复杂路径

创建画布与组件

创建一张画布：

let canvas = new fabric.Canvas('c')

传入canvas元素的id，返回 fabric.Canvas 类的实例。

如果想要在实例化一个画布的同时配置与画布相关的参数：

let canvas = new fabric.Canvas('c', {
  backgroundColor: 'rgb(100, 100, 200)',
  selectionColor: 'blue',
  selectionLineWidth: 2
  // ...
})

如果想要在实例化画布后再设置与画布相关的属性：

canvas.setBackgrountImage('http://...')
canvas.onFpsUpdate = function(){ /* ... */}

使用 fabric.Canvas 类创建的实例默认支持交互，fabric库可以运行在Nodejs环境中，显然Nodejs不需要界面交互：

let staticCanvas = new fabric.StaticCanvas('c')

去掉界面上事件处理的逻辑，创建更轻量的画布实例，但依然支持基于对象模型的状态操作。

Fabric提供多种基础形状组件：

• fabric.Circle
• fabric.Ellipse
• fabric.Line
• fabric.Polygon
• fabric.Polyline
• fabric.Rect
• fabric.Triangle

使用 fabric.Rect 类创建矩形组件：

let rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
})

使用 fabric.Triangle 类创建三角形组件：

let triangle = new fabric.Triangle({
  width: 20,
  height: 30,
  fill: 'blue',
  left: 50,
  top: 50
})

fabric支持创建未初始化属性的组件：

let rect = new fabric.Rect()

fabric会使用默认属性帮我们初始化组件。

将矩形组件添加并渲染至canvas画布：

canvas.add(rect)

更新状态

Fabric中每一个组件都继承自 fabric.Object。

更新已有元素的属性使用 .set() 方法，该方法就存在于 fabric.Object 的原型对象中，因此所有继承自该对象的组件都可使用该方法更新自身属性。

两种更新组件属性的传参方式：

• 接收包含要修改的属性的对象：

  rect.set({ left: 20, top: 50 })
  

• 接收要修改的属性和属性值两个参数：

  rect.set('fill', 'red')
  

每次执行 set 方法后，返回组件自身，因此fabric支持链式调用组件方法：

rect.set('angle', 15).set('flipY', true)

每次对画布上的组件做更新操作之后，需手动重新渲染画布。

canvas.renderAll()

在fabric中，用户可以通过手指或鼠标与画布中的元素发生交互，例如选择、拖拽、缩放、旋转，且这是默认行为，开发者可以禁止交互：

canvas.selection = false
rect.set('selectable', false)

查找组件

fabric帮助开发者管理添加到canvas中的组件，我们使用 canvas.item()获取某一个已加入canvas中的组件：

canvas.item(0)

上方代码获取第一个加入 canvas 的组件。

获取全部已加入canvas的组件：

canvas.getObjects()

移除组件

移除canvas中的某个组件：

canvas.remove(rect)

加载图像

fabric可以像操作基础组件那样操作图像：

<canvas id='c'></canvas>
<img src='my_image.png' id='my-image'/>

let canvas = new fabric.Canvas('c')
let imgElement = document.getElementById('my-image')
let imgInstance = new fabric.Image(imgElement, {
  let: 100,
  top: 100,
  angle: 30,
  opacity: 0.85
})
canvas.add(imgInstance)

类方法 fabric.Image.fromURL 亦可通过接收图像地址和回调函数，帮我们获取并创建图像组件：

fabric.Image.fromURL('my_image.png', function(oImg) {
  oImg.scale(0.5).set('flipX', true)
  canvas.add(oImg)
})

复杂图形

fabric对自定义路径的支持极大的拓宽了组件的形式，开发者可以创建各式各样的组件：

let canvas = new fabric.Canvas('c')
let path = new fabric.Path('M 0 0 L 200 100 L 170 200 z')
path.set({ left: 120, top: 120 })
canvas.add(path)

路径亦可修改自身属性：

path.reset({ fill: 'red', stroke: 'green', opacity: 0.5 })

对于极复杂的路径绘制命令，fabric提供对svg的支持：

• fabric.loadSVGFromString()
• fabric.loadSVGFromURL()

fabric会解析svg中的元素并转换为fabric对象模型。