---

前言

本文会介绍Fabric画布的使用，以及画布的一些属性设置

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、画布基础设置

1.宽高设置

设置画布宽高有多种方法，常用的3种为：

1.1 在 元素上设置

<canvas width="400" height="400"></canvas>

1.2在创建画布 ( new fabric.Canvas ) 时设置

  this.canvas = new fabric.Canvas('c', {
    width: 100,
    height: 100
  })

1.3通过 js 动态设置
canvas.setWidth(width)：设置画布宽度
canvas.setHeight(height)：设置画布高度
canvas.setDimensions({width, height})：设置画布大小

  // 设置canvas宽度500
  function setWidth() {
    canvas.setWidth(500)
  }

  // 设置canvas高度为250
  function setHeight() {
    canvas.setHeight(250)
  }

  // 同时设置canvas的宽高
  function setDimensions() {
    canvas.setDimensions({
      width: 100,
      height: 100
    })
  }

---

2.背景色

画布设置背景色的方法有2个：

2.1 实例化 fabric 时设置背景色

  this.canvas = new fabric.Canvas('c', {
    backgroundColor: 'hot#aa96da' // 将背景色设置为亮粉色
  })

2.2 使用 setBackgroundColor 设置背景色

setBackgroundColor() 语法：

setBackgroundColor(backgroundColor, callback)

backgroundColor: 可传入字符串类型的颜色值，也可以传入一个对象。传入对象时可以设置背景图
callback: 回调函数，修改完背景色后需要在回调函数里刷新一下画布

    // 设置(修改)画布背景颜色
    this.canvas.setBackgroundColor(
      'red',
      this.canvas.renderAll.bind(canvas) // 回调函数，刷新画布。如果不写这句，背景色会修改，但不会在画布上呈现出来，需要执行下一帧刷新才会呈现。
    )

如果 setBackgroundColor() 第一个参数传入的是一个对象时，可以通过 source 属性传入一张图片做背景图。

setBackgroundColor() 第一个对象参数还可以设置如下属性：

• source: 图源
• repeat: 是否重复渲染。默认是重复渲染的。可选值有这些：‘repeat’、‘no-repeat’、‘repeat-x’、‘repeat-y’
• offsetX: x轴方向的偏移量
• offsetY: y轴方向的偏移量

    // 设置(修改)画布背景图
    canvas.setBackgroundColor(
      {
        source: '/images/bubble.jpg', // 图片路径（可以是本地图片，也可以是网图地址）
        // offsetX: 100, // x轴方向的偏移量
        // offsetY: 100, // y轴方向的偏移量
        // repeat: 'repeat' // 背景是否重复，默认: 'repeat'。可选值: 'repeat'、'no-repeat'、'repeat-x'、'repeat-y'
      },
      canvas.renderAll.bind(canvas)
    )

---

3.背景图片

画布设置背景图的方法有2个：
3.1在实例化 fabric 时通过设置 backgroundImage 属性使用背景图

  this.canvas = new fabric.Canvas('c', {
 	  backgroundImage: '/images/cookie.jpg' // 设置背景图，可以是本地图片，也可以是网络图片
  })

3.2在创建完画布后，使用 setBackgroundImage() 方法设置背景图

这个就是和2中的背景颜色的第二个方法一样，用setBackgroundColor() 这个方法，只是在图片中，还有一个针对图片的属性使用

setBackgroundImage()，该方法接受3个参数，语法如下：

canvas.setBackgroundImage(image, callback, options)

image: 图片地址
callback: 图片加载完的回调函数，通常在此刷新画布
options: 图片参数设置（非必填）

图片参数说明
——旋转背景图

  this.canvas.setBackgroundImage(
    '/images/bubble.jpg',
    this.canvas.renderAll.bind(canvas),
    {
      angle: 10 // 旋转背景图
    }
  )

同样，还可以用前面章节的 fabric.Image.fromURL()这个方法使用，可以自己去试试

4.前景色

前景色可以从视觉上覆盖画布中所有内容。即背景色是在绘制的图形的下一层级的，然后前景色是在绘制图形的上一层级的

使用 overlayColor 可以设置前景色

  this.canvas = new fabric.Canvas('c', {
    overlayColor: '#f6416c'
  })

和背景色一样，前景色也可以设置图片：

    // 设置(修改)画布前景图
    this.canvas.setOverlayColor(
      {
        source: '/images/bubble.jpg', // 图片路径（可以是本地图片，也可以是网图地址）
        // offsetX: 100, // x轴方向的偏移量
        // offsetY: 100, // y轴方向的偏移量
        // repeat: 'repeat' // 前景是否重复，默认: 'repeat'。可选值: 'repeat'、'no-repeat'、'repeat-x'、'repeat-y'
      },
      this.canvas.renderAll.bind(canvas)
    )

5.绘画模式

画布可以设置是否为绘画模式，在绘画模式中，可以随意的进行画布的绘制，像画笔一样，在非绘画模式下，无法进行绘制

  // 初始化画布
  this.canvas = new fabric.Canvas('c', {
    isDrawingMode: true  //开始绘画模式，为false时为关闭
  })

所以可以直接调用：this.canvas.isDrawingMode = false 来关闭绘画模式

6.鼠标光标修改

在进行绘制的时候，绘制不同的图形，可以修改鼠标的光标的样式，以适应不同的图形绘制

修改鼠标指针样式，可以设置 defaultCursor 属性。可配置的值和 css 的 cursor 一样

this.canvas.defaultCursor = 'wait'

7.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           // 禁止默认右键菜单

二、画布基础方法

1.添加对象

把绘制好的图形添加到画布中

this.canvas.add(object)

2.删除对象

把添加到画布中的对象删除

this.canvas.remove(object)

3.获取所有的对象

获取到绘制在画布中的对象，以数组的形式返回

this.canvas.getObjects()

4.获取选中的对象

获取到绘制在画布中的被选中的对象

this.canvas.getActiveObject()

5.清除画布中所有对象

把绘制在画布中的对象全部清除

this.canvas.clear()

6.重绘对象

修改该图形的参数之后，重新绘制这个图形

this.canvas.renderAll()

7.重新渲染

修改该图形的参数之后，重新渲染这个图形

this.canvas.requestRenderAll()

renderAll和requestRenderAll的比较

requestRenderAll() 方法是异步的，它会在下一次浏览器的重绘周期中重新渲染画布。这个方法通常用于性能优化，可以避免在短时间内重复绘制画布，从而提高应用程序的性能。

renderAll() 方法是同步的，它会立即重新渲染画布。这个方法通常用于需要立即更新画布的情况，例如在添加、删除或修改对象时。

因此，当你需要立即更新画布时，应该使用 renderAll() 方法。而当你需要在一段时间内多次更新画布时，应该使用 requestRenderAll() 方法来避免重复绘制画布，从而提高应用程序的性能。

8.获取画布当前缩放值

this.canvas.getZoom()

9.对象移到最底层

把绘制的图形移动到最底层

this.canvas.sendToBack(object)

10.对象位置设置

this.canvas.viewportCenterObjectH(object) // 水平居中对象
this.canvas.viewportCenterObjectV(object) // 垂直居中对象
this.canvas.viewportCenterObject(object)  // 垂直水平居中对象
this.canvas.fxCenterObjectH(object)       // 动画水平居中对象
this.canvas.fxCenterObjectV(object)       // 动画垂直居中对象
this.canvas.fxCenterObject(object)        // 动画垂直水平居中对象

11.序列化与反序列化

把绘制的图形移动到最底层

let canvasJsonData = JSON.stringify(canvas.toJSON()) // 将画布序列化成json数据
let canvasSvgData = canvas.toSVG() // 将画布序列化成svg数据
this.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上

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

3.事件解绑

canvas.off('mouse: wheel')

三、画布的其它操作

1.拖拽和缩放画布

拖拽画布：

 
<script>
  export default {
    data() {
      return {
        lastPosX: 0,       // 上次鼠标位置X坐标
        lastPosY: 0,       // 上次鼠标位置Y坐标
        isDragging: false, // 是否可以拖拽画布
      }
    },
    mounted() {
      ... // 初始化canvas
      this.canvas.on('mouse:down', this.onMouseDown)
      this.canvas.on('mouse:move', this.onMouseMove)
      this.canvas.on('mouse:up', this.onMouseUp)
    },
    methods: {
      // 监听鼠标按下事件
      onMouseDown(opt) {
        this.lastPosX = opt.e.clientX
        this.lastPosY = opt.e.clientY
        this.isDragging = true
      },
      // 监听鼠标移动事件
      onMouseMove(opt) {
        if (this.isDragging) {
          this.canvas.viewportTransform[4] += opt.e.clientX - this.lastPosX
          this.canvas.viewportTransform[5] += opt.e.clientY - this.lastPosY
          this.canvas.requestRenderAll()
          this.lastPosX = opt.e.clientX
          this.lastPosY = opt.e.clientY
        }
      },
      // 监听鼠标松开事件
      onMouseUp(opt) {
        if (this.isDragging) {
          this.canvas.setViewportTransform(this.canvas.viewportTransform)
          this.isDragging = false
        }
      }
    }
  }
</script>

以画布中心点为基准手动缩放：

<template>
  <el-tooltip content="放大" placement="bottom-start">
    <span class="iconfont icon-fangda" @click="onManualScale(-100)"></span>
  </el-tooltip>
 <el-tooltip content="缩小" placement="bottom-start">
    <span class="iconfont icon-suoxiao" @click="onManualScale(100)"></span>
  </el-tooltip>
</template>
<script>
export default {
  // 中心点缩放画布
  onManualScale(delta) {
    let zoom = canvas.getZoom() // 获取画布当前缩放值
    zoom *= 0.999 ** delta
    zoom = zoom > 10 ? 10 : (zoom < 0.1 ? 0.1 : zoom) // 最大放大10倍，最小缩小至10%
    canvas.zoomToPoint({ // 以画布中心点为基准缩放
      x: this.canvasBoxWidth / 2,  // canvasBoxWidth 画布宽度
      y: this.canvasBoxHeight / 2  // canvasBoxHeight 画布高度
    }, zoom)
  }
}
</script>

以鼠标指针位置为基准缩放：

 
this.canvas.on('mouse:wheel', this.onMouseWheel)
 
// 监听鼠标放大缩小事件
onMouseWheel(opt) {
  let delta = opt.e.deltaY // 滚轮，向上滚一下是 -100，向下滚一下是 100
  let zoom = this.canvas.getZoom() // 获取画布当前缩放值
  zoom *= 0.999 ** delta
  zoom = zoom > 10 ? 10 : (zoom < 0.1 ? 0.1 : zoom) // 最大放大10倍，最小缩小至10%
  this.canvas.zoomToPoint({ // 以鼠标指针位置为基准缩放
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom)
  opt.e.preventDefault()
  opt.e.stopPropagation()
}

2.事件解绑

canvas.off('mouse: wheel')

总结

本篇文章主要介绍了Fabric画布的一些操作，可以对画布设置，可以对一些操作做限制，以满足不同的场景需求，后续还会继续撰写其它的