Fabric.JS http://fabricjs.com/ 一款基于面向对象思维的功能强大的 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 库可以运行在 Node.JS 环境中, 显然 Node.JS 不需要界面交互:
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 对象模型.
来源: https://juejin.im/entry/5c6bd166f265da2d8f472f05