Fabric.js使用说明Part 1

目录

一、Fabric.js使用说明Part 1

• Fabric.js简介

• 开始

• 方法

• 事件

• canvas常用属性

• 对象属性

• 图层层级操作

二、Fabric.js使用说明Part 2

• 分组（Groups）

• 动画（Animation）

• 图像滤镜（Image filters）

• 渐变（Gradients）

• 锁定

• 拖拽和缩放画布

三、Fabric.js使用说明Part 3

• 绘制背景图片

• 绘制文本

• 绘制线和路径

一、Fabric.js简介

Fabric.js是一个对canvas进行封装的Javascript库，在原生canvas之上提供了交互式对象模型，通过简洁的api就可以在画布上进行丰富的操作。

它主要的功能包括在canvas上创建和填充图形，比如矩形、圆形、多边形；生成的图像自带缩放、旋转、拖拽等功能；还可以给图形填充渐变颜色；各个图形可以相互组合等等。

二、开始

1、引入Fabric.js

npm i fabric --save

2、在main.js中使用

// main.js
import fabric from "fabric"
Vue.use(fabric)

3、初始化画布

三、方法

canvas.add(object)                   // 添加对象
canvas.remove(object)                // 删除对象
canvas.setWidth(width)               // 设置canvas宽度
canvas.setHeight(height)             // 设置canvas高度
canvas.setDimensions({width, height})// 一键设置宽高
canvas.getObjects()                  // 获取所有对象
canvas.getActiveObject()             // 获取选中的对象
canvas.clear()                       // 清除画布中所有对象
canvas.renderAll()                   // 重绘
canvas.requestRenderAll()            // 请求重新渲染
canvas.getZoom()                     // 获取画布当前缩放值
canvas.sendToBack(object)            // 移到对象到最底层
canvas.viewportCenterObjectH(object) // 水平居中对象
canvas.viewportCenterObjectV(object) // 垂直居中对象
canvas.viewportCenterObject(object)  // 垂直水平居中对象
canvas.fxCenterObjectH(object)       // 动画水平居中对象
canvas.fxCenterObjectV(object)       // 动画垂直居中对象
canvas.fxCenterObject(object)        // 动画垂直水平居中对象

let canvasJsonData = JSON.stringify(canvas.toJSON()) // 将画布序列化成json数据
let canvasSvgData = canvas.toSVG() // 将画布序列化成svg数据
canvas.loadFromJSON(canvasJsonData)  // 反序列化Json数据

四、事件

1、常用事件

mouse:down         // 鼠标按下事件
mouse:move         // 鼠标移动事件
mouse:up           // 鼠标移动事件
mouse:over         // 鼠标移入事件
mouse:out          // 鼠标移出事件
mouse:dblclick     // 鼠标双击事件
object:added       // 对象被添加事件
object:removed     // 对象被删除事件
object:modified    // 对象被修改事件
object:rotating    // 对象被旋转事件
object:scaling     // 对象被缩放事件
object:moving      // 对象被移动事件

2、事件绑定

canvas.on('mouse:wheel', (opt) => {
  console.log(opt)
})

3、事件解绑

canvas.off('mouse:wheel')

五、canvas常用属性

canvas.selection = true                  // 画布是否可选中 默认为true、false：不可选中
canvas.selectionColor = 'transparent'    // 画布鼠标框选时的背景色
canvas.selectionBorderColor = 'transparent'// 画布鼠标框选时的边框颜色
canvas.selectionLineWidth = 6            // 画布鼠标框选时的边框厚度
canvas.selectionDashArray = [30, 4, 10] // 画布鼠标框选时边框虚线规则
canvas.selectionFullyContained = true   // 只选择完全包含在拖动选择矩形中的形状
canvas.backgroundColor = '#2E3136'      // 画布背景色
canvas.hoverCursor = 'pointer'          // 鼠标光标样式 default、pointer、move等
canvas.skipTargetFind = true            // 整个画板元素不能被选中
canvas.fireRightClick = true            // 启用右键，options.button的数字为3
canvas.stopContextMenu = true           // 禁止默认右键菜单

Fabric.js 可以通过 viewportTransform 属性配置画布的视窗属性

canvas.viewportTransform[4] = 100
canvas.viewportTransform[5] = 100

viewportTransform 是一个数组，里面有6个元素，默认值是 [1, 0, 0, 1, 0, 0]。从下标0开始，它们分别代表：

[0]: 水平缩放（x轴方向）
[1]: 水平倾斜（x轴方向）
[2]: 垂直倾斜（y轴方向）
[3]: 垂直缩放（y轴方向）
[4]: 水平移动（x轴方向）
[5]: 垂直移动（y轴方向）

六、对象属性

1、基本属性

let circle = new fabric.Circle({
  top: 100,    // y坐标
  left: 100,    // x坐标
  fill: '#17b978', // 填充色
  radius: 50  // 半径
})

rect.top = 100                       // y坐标
rect.left = 100                      // x坐标
rect.width = 100                     // 矩形宽度
rect.height = 100                    // 矩形高度
circle.radius = 50                   // 圆半径
rect.fill = '#17b978'                // 填充色
rect.stroke = '#FE5332'              // 线条颜色
rect.strokeWidth = 10                // 线条宽度
rect.strokeMiterLimit = index        // 可以用来记录当前选中的rectList列表的索引！！！！！

2、扩展属性

circle.set({
  hasBorders: false
}

circle.selectable = false                 // 控件不能被选择，不会被操作
circle.hasControls = false                // 只能移动不能（编辑）操作
circle.hasBorders = false                 // 选中时，是否显示边，true：显示（默认）
circle.borderColor = 'red'                // 选中时，边的颜色
circle.borderScaleFactor = 5              // 选中时，边的粗细
circle.borderDashArray = [20, 5, 10, 7]  // 选中时，虚线边的规则
circle.transparentCorners = false         // 选中时，角是否是空心 true：空心  false：实心
circle.cornerColor = "#a1de93",           // 选中时，角的颜色
circle.cornerStrokeColor = 'pink'         // 选中时，角的边框的颜色
circle.cornerStyle = 'circle'             // 选中时，角的属性  rect：矩形（默认）、circle：圆形
circle.cornerSize = 20                    // 选中时，角的大小为20
circle.cornerDashArray = [10, 2, 6]       // 选中时，虚线角的规则
circle.selectionBackgroundColor = '#ffc300' // 选中时，选框的背景色
circle.padding = 20                       // 选中时，选框离图形的距离
circle.borderOpacityWhenMoving = 0.6      // 当对象活动和移动时，对象控制边界的不透明度
triangle.perPixelTargetFind = true        // 选择三角形空白位置的时候无法选中，false：可以选中（默认）

七、图层层级操作

canvas.bringToFront(rect)    // 移到顶层
canvas.sendToBack(rect)      // 移到底层
canvas.bringForward(rect)    // 上移一层
canvas.sendBackwards(rect)   // 下移一层
canvas.moveTo(0)          // 移动到指定层