Fabric.js画布设置
2018-11-27 19:36:11
3804 次阅读
0 个评论
我们必须透过 new fabric.Canvas 来抓取 <canvas> 标签,并且管理所有 Fabricjs 相关的物件,我们必须提供 canvas 这个元件的 id 值来取得 fabric.Canvas 的实例。
物件管理
有了 fabric.Canvas 实例之后,我们就可以将我们所建立的物件利用 add() 方法加入 canvas 中,利用 item() 或 getObjects() 方法取的画布中的物件,最后利用 remove() 方法将物件从 canvas 中移除。
请看以下范例
画布设置
这个 fabric.Canvas 的实例当然没有那麼简单,他能让我们提供一些设定值,来设置一些如 画布大小、背景色 backgroundColor、背景图片 backgroundImage、覆盖图片 overlayImage...,以及一些物件在 canvas 中被选取的样式和数标滑过的样式...等等一大堆的设定值,这边就只举几个常用的来记录。
一些常用的设定
当然少不了灵活的动态修改
背景图
这边特别把背景图拿出来纪录,因為呢如果我们直接透过
开启 console 会出现下面错误

这边建议改使用 setBackgroundImage(url, callback)
后面的 callback 為图片载入 (onload) 后执行
或是直接建立一个 fabric 的 Image 实例,来当背景图。
用这种方式能够更灵活的设置位置以及大小。
StaticCanvas & Canvas
Fabricjs 很贴心的提供了一种是静态不需操控的类别 StaticCanvas。
另一种是一般的 Canvas 类别。
两者最大的差异就是:
StaticCanvas 主要就是拿来做静态显示 (不须被使用者操控)
Canvas 新增出来的物件都能被使用者自由的操控
StaticCanvas 绘图效能更好
Canvas 互动性较佳
以下是两种 Canvas new 的方式
const staticCanvas = new fabric.StaticCanvas('static')
const dynamicCanvas = new fabric.Canvas('dynamic')