fabricjs
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Lints and fixes files
npm run lint
API
Attributes
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
widths | 画板宽度 | Number | dom 的大小或者自动适配为全屏 |
height | 画板高度 | Number | dom 的大小或者自动适配为全屏 |
dom | canvas 元素选择器 | String | 自动生成 canvas |
font-family | 画板支持的字体 | Array | ['Arial', 'Helvetica', '宋体', '黑体', '微软雅黑', '楷体', '仿宋', 'Verdana', 'Times New Roman', 'Roboto', 'Open Sans', 'Lato', 'Bellefair', 'Fresca', 'Raleway'] |
before-save | 保存之前钩子函数,返回 false 则终止保存 | Funciton | () => true |
on-save | 保存回调函数 | Funciton | - |
json | 初始化渲染数据(从保存回调中获取) | String|Object | - |
data | 初始化加载元素数据(目前只支持 type 为image OR i-text ;_remove 属性为该元素不允许被删除) |
Array|Object | - |
default-options | 每个元素默认配置 | Object | {cornerSize: 20} AllOptions |
type-options | 不同类型的元素默认配置 | Object | AllOptions |
slot 插槽
-
setting
点击元素展开的设置弹窗扩展插槽,入参:
hasText
:是否为文本组件;hasRadius
:是否含有圆角属性;selection
:当前选择组件。 -
tools
顶部工具栏扩展插槽,入参:
selection
:当前选择组件。
方法
- loadJSON - 加载JSON数据
- loadData - 加载DATA数据
- upperLayer - 当前组件上移
- lowerLayer - 当前组件下移
- setActiveStyle - 设置当前组件样式
- setActiveProp - 设置当前组件属性
- loadImg - 加载图片
- addImg - 添加图片
- addText - 添加文本
- removeActive - 删除当前组件
- setBackgroundImage - 设置背景图片
- save - 保存
Example