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对象模型。

下一篇《Fabric.js进阶—事件驱动》

上一篇《基于Nodejs+Canvas+WebSocket实现视频流直播H5应用》

快速跳转 心头好文 - libraries - 《Fabric.js入门—面向对象》

发布日期 2019-1-17 10:52:29 周四

版权声明 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证