Fabric.js 自定义控件

本文简介

带尬猴，我是德育处主任

虽然 Fabric.js 提供的基础功能已经很丰富了，但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能，能够创建更加精美和实用的图形应用程序，提高用户体验和用户满意度。

尽管 Fabric.js 的文档很一般，但 demo 还挺丰富。本文讲解 Fabric.js 官网收录的 Custom controls, render and actions 。

自定义控件

先看看官方例子

这个例子创建了2个自定义控件，一个是复制，一个是删除。

官方代码我会放到文末，接下来我们试着创建一个“自定义删除控件”。

初始化画布和页面元素

按照 Custom controls, render and actions 的样式创建一个矩形。

使用上面的代码就可以在画布中创建一个矩形。如果你对这些代码还不太熟悉的话，推荐阅读一下 《Fabric.js 中文入门教程》

创建删除按钮

创建自定义控件通常有一下2步操作：

1. 创建控件
2. 添加功能事件

Fabric.js 提供了 fabric.Control() 方法创建自定义控件。该方法可以定义控件的基础属性和事件绑定，基础属性包括控件位置、鼠标经过时的样式等。常用的事件有鼠标按下（mouseDownHandler）、鼠标抬起（mouseUpHandler）、鼠标拖拽（actionHandler）等。

// 省略前面的代码……

// 删除元素的方法
function deleteObject(eventData, transform) {
  let target = transform.target
  let canvas = target.canvas
  canvas.remove(target) // 删除元素
  canvas.requestRenderAll() // 刷新画布
}

// 创建自定义控件并添加到矩形里
rect.controls.deleteControl = new fabric.Control({
  x: 0.5,
  y: -0.5,
  offsetY: -16,
  offsetX: 16,
  cursorStyle: 'pointer', // 鼠标移到控件时的指针样式
  mouseUpHandler: deleteObject, // 鼠标抬起时触发的事件
  render: function(ctx, left, top, styleOverride, fabricObject) { // 渲染一个粉红色的正方形
    ctx.save()
    let size = this.cornerSize
    ctx.fillStyle = 'pink'
    ctx.translate(left, top)
    ctx.fillRect(-size / 2, -size / 2, size, size)
    ctx.restore()
  },
  cornerSize: 24
})

fabric.Control() 方法接收一个对象参数，该对象有一个 render 属性用来渲染自定义控件。这里面涉及到部分原生 canvas 的基础知识，比如 ctx.save() 和 ctx.restore() ，这部分内容给我在 《canvas 状态管理》 里提到过，有兴趣的工友可以去看看。

Custom controls, render and actions 的代码

前面讲到的就是创建自定义控件的基本方法， Fabric.js 官网收录的 Custom controls, render and actions 例子中使用了 base64 格式的图片作为自定义控件的展示元素，而且还加多了一个复制元素的控件。经过前面的例子，相信你已经能看得懂 Custom controls, render and actions 的代码。

我把代码复制到这里，有兴趣的可以看看~

  

    Add a rectangle
  

代码仓库

⭐ 基础自定义控件用法

推荐阅读

《Fabric.js 从入门到膨胀》

《Fabric.js 动态设置字号大小》

《Fabric.js 监听元素相交(重叠)》

《Fabric.js 拖放元素进画布》

《Fabric.js 保存自定义属性》

《Fabric.js 样式不更新怎么办？》 代码仓库