Fabric.js 自定义控件
本文简介带尬猴，我是德育处主任
虽然 Fabric.js 提供的基础功能已经很丰富了，但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能，能够创建更加精美和实用的图形应用程序，提高用户体验和用户满意度。
尽管 Fabric.js 的文档很一般，但 demo 还挺丰富。本文讲解 Fabric.js 官网收录的 Custom controls, render and actions 。
自定义控件
先看看官方例子
这个例子创建了2个自定义控件，一个是复制，一个是删除。
官方代码我会放到文末，接下来我们试着创建一个“自定义删除控件”。
初始化画布和页面元素
按照 Custom controls, render and actions 的样式创建一个矩形。
使用上面的代码就可以在画布中创建一个矩形。如果你对这些代码还不太熟悉的话，推荐阅读一下 《Fabric.js 中文入门教程》
创建删除按钮
创建自定义控件通常有一下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 的代码。
我把代码复制到这里，有兴趣的可以看看~
<p>
<button id="add" onclick="Add()">Add a rectangle</button>
</p>
<canvas id="c" width="500" height="400" ></canvas>
代码仓库
⭐ 基础自定义控件用法
推荐阅读
来源:https://www.cnblogs.com/k21vin/p/17791973.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]