Fabric.js 自定义控件

胡图

本文简介

带尬猴，我是德育处主任

虽然 Fabric.js 提供的基础功能已经很丰富了，但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能，能够创建更加精美和实用的图形应用程序，提高用户体验和用户满意度。
尽管 Fabric.js 的文档很一般，但 demo 还挺丰富。本文讲解 Fabric.js 官网收录的 Custom controls, render and actions 。


自定义控件

先看看官方例子

这个例子创建了2个自定义控件，一个是复制，一个是删除。
官方代码我会放到文末，接下来我们试着创建一个“自定义删除控件”。

初始化画布和页面元素

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

1. [/code]使用上面的代码就可以在画布中创建一个矩形。如果你对这些代码还不太熟悉的话，[b]推荐阅读一下 [url=https://juejin.cn/post/7026941253845516324]《Fabric.js 中文入门教程》[/url][/b]
3. [size=5]创建删除按钮[/size]
5. 创建自定义控件通常有一下2步操作：
6. [list=1]
7. [*]创建控件
8. [*]添加功能事件
9. [/list]
10. Fabric.js 提供了 fabric.Control() 方法创建自定义控件。该方法可以定义控件的基础属性和事件绑定，基础属性包括控件位置、鼠标经过时的样式等。常用的事件有鼠标按下（mouseDownHandler）、鼠标抬起（mouseUpHandler）、鼠标拖拽（actionHandler）等。
11. [align=center][/align]
12. [code]// 省略前面的代码……
14. // 删除元素的方法
15. function deleteObject(eventData, transform) {
16.   let target = transform.target
17.   let canvas = target.canvas
18.   canvas.remove(target) // 删除元素
19.   canvas.requestRenderAll() // 刷新画布
20. }
22. // 创建自定义控件并添加到矩形里
23. rect.controls.deleteControl = new fabric.Control({
24.   x: 0.5,
25.   y: -0.5,
26.   offsetY: -16,
27.   offsetX: 16,
28.   cursorStyle: 'pointer', // 鼠标移到控件时的指针样式
29.   mouseUpHandler: deleteObject, // 鼠标抬起时触发的事件
30.   render: function(ctx, left, top, styleOverride, fabricObject) { // 渲染一个粉红色的正方形
31.     ctx.save()
32.     let size = this.cornerSize
33.     ctx.fillStyle = 'pink'
34.     ctx.translate(left, top)
35.     ctx.fillRect(-size / 2, -size / 2, size, size)
36.     ctx.restore()
37.   },
38.   cornerSize: 24
39. })

复制代码

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 的代码。
我把代码复制到这里，有兴趣的可以看看~

1.   <p>
2.     <button id="add" onclick="Add()">Add a rectangle</button>
3.   </p>
5. <canvas id="c" width="500" height="400" ></canvas>

复制代码

代码仓库

⭐ 基础自定义控件用法


推荐阅读



来源:https://www.cnblogs.com/k21vin/p/17791973.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！