theme: smartblue
本文简介
带尬猴，我是德育处主任
虽然 Fabric.js 提供的基础功能已经很丰富了，但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能，能够创建更加精美和实用的图形应用程序，提高用户体验和用户满意度。
尽管 Fabric.js 的文档很一般，但 demo 还挺丰富。本文讲解 Fabric.js 官网收录的 Custom controls, render and actions 。
自定义控件
先看看官方例子
这个例子创建了2个自定义控件，一个是复制，一个是删除。
官方代码我会放到文末，接下来我们试着创建一个“自定义删除控件”。
初始化画布和页面元素
按照 Custom controls, render and actions 的样式创建一个矩形。
```html
```
使用上面的代码就可以在画布中创建一个矩形。如果你对这些代码还不太熟悉的话，推荐阅读一下 《Fabric.js 中文入门教程》
创建删除按钮
创建自定义控件通常有一下2步操作：
- 创建控件
- 添加功能事件
Fabric.js 提供了 fabric.Control() 方法创建自定义控件。该方法可以定义控件的基础属性和事件绑定，基础属性包括控件位置、鼠标经过时的样式等。常用的事件有鼠标按下(mouseDownHandler)、鼠标抬起(mouseUpHandler)、鼠标拖拽(actionHandler)等。
```js // 省略前面的代码……
// 删除元素的方法 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 的代码。
我把代码复制到这里，有兴趣的可以看看~
```html
```