|
本文简介
带尬猴,我是德育处主任
虽然 Fabric.js 提供的基础功能已经很丰富了,但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能,能够创建更加精美和实用的图形应用程序,提高用户体验和用户满意度。
尽管 Fabric.js 的文档很一般,但 demo 还挺丰富。本文讲解 Fabric.js 官网收录的 Custom controls, render and actions 。
自定义控件
先看看官方例子
这个例子创建了2个自定义控件,一个是复制,一个是删除。
官方代码我会放到文末,接下来我们试着创建一个“自定义删除控件”。
初始化画布和页面元素
按照 Custom controls, render and actions 的样式创建一个矩形。
- [/code]使用上面的代码就可以在画布中创建一个矩形。如果你对这些代码还不太熟悉的话,[b]推荐阅读一下 [url=https://juejin.cn/post/7026941253845516324]《Fabric.js 中文入门教程》[/url][/b]
- [size=5]创建删除按钮[/size]
- 创建自定义控件通常有一下2步操作:
- [list=1]
- [*]创建控件
- [*]添加功能事件
- [/list]
- Fabric.js 提供了 fabric.Control() 方法创建自定义控件。该方法可以定义控件的基础属性和事件绑定,基础属性包括控件位置、鼠标经过时的样式等。常用的事件有鼠标按下(mouseDownHandler)、鼠标抬起(mouseUpHandler)、鼠标拖拽(actionHandler)等。
- [align=center][/align]
- [code]// 省略前面的代码……
- // 删除元素的方法
- 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】 我们会及时删除侵权内容,谢谢合作! |
本帖子中包含更多资源
您需要 登录 才可以下载或查看,没有账号?立即注册
x
|