基于canvas画布的实用类Fabric.js的使用Part.1

说明

演示Demo：

http://k21vin.gitee.io/front-end-data-visualization/#/fabric/fabric-basic/fabric-stated

Demo源码：

https://gitee.com/k21vin/front-end-data-visualization

本文章所有的gif图片由于录屏软件问题，上面的鼠标位置都是错位显示的！！

一、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、初始化画布

<template>
  <canvas id="canvas"></canvas>
</template>
 
<script>
export default {
  data() {
    return {
      canvas: null, // 画布对象
    }
  },
  mounted() {
    this.canvas = new fabric.Canvas('canvas', {
      width: 300,
      height: 200
    })
  }
}
</script>

三、方法

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)          // 移动到指定层

八、复制和粘贴

1、复制

handleCopy() {
  if (!canvas.getActiveObject()) {
    this.$message.warning('请先选择元素')
    return
  }
  this.canvas.getActiveObject().clone(cloned => {
    this.cloneObjects = cloned
  })
}

2、粘贴

handlePaste() {
  if (!this.cloneObjects) {
    return this.$message.warning('还没复制过任何内容')
  }
  this.cloneObjects.clone(cloned => {
    this.canvas.discardActiveObject() // 取消选择
    // 设置新内容的坐标位置
    cloned.set({
      left: cloned.left + 10,
      top: cloned.top + 10,
      evented: true
    })
    if (cloned.type === 'activeSelection') { // 如果复制的是多个对象，则需要遍历克隆对象
      cloned.canvas = this.canvas;
      cloned.forEachObject(obj => {
        this.canvas.add(obj)
      })
      cloned.setCoords()
    } else {
      this.canvas.add(cloned)
    }
    this.cloneObjects.top += 10
    this.cloneObjects.left += 10
    this.canvas.setActiveObject(cloned)
    this.canvas.requestRenderAll()
  })
}

原文链接：https://blog.csdn.net/qq_40007317/article/details/128869467

目录

说明