Fabric.js 实现数据标注

创建基础项目

为了方便演示,我在初始化画布的时:

1.添加一个背景图,该背景图的尺寸和初始化的画布一样大。
2.默认渲染一个矩形。
3.右侧可以放大缩小画布以及删除选中矩形。
4.点击左侧可以修改标签内容。

-----------------------------------------------------------------------------------------------------------------------------------------------

相关API

1.删除元素的2种方法:

  • canvas.remove(...object)
  • new fabric.Control 绑定控制器删除

2.更新标签内容:

  • 获取选中的矩形框点击标签更新。
  • 选中标签后画布上绘制。

3.搜索框支持本地模糊匹配标签。4.isOff字段在代码中起到判断是否绘制的作用,fabric.Object.prototype.selectable = false 在绘制时关闭选中功能前提是未选中状态。封装myFabric类

/* eslint-disable import/no-extraneous-dependencies */
import { fabric } from 'fabric';

// 删除img
const deleteIcon ="data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C<img src="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E"" style="margin: auto" />
const deleteIconImg = document.createElement('img');
deleteIconImg.src = deleteIcon;

class myFabric {/** * 构造函数 * @param {object} params 构造函数参数 */constructor(params) {this.canvas = null; // 画布对象this.isOff = true; // 是否开启画画模式this.downPoint = null; // 按下鼠标时的坐标this.upPoint = null; // 松开鼠标时的坐标this.label = '';this.change = null;this.initCanvas(params);}/** * 初始化画布 * @param {object} params{ imgUrl, data } 图片路径,标注数据 */initCanvas(params) {const { imgUrl, data, change } = params;this.change = change;const img = new Image();img.src = imgUrl;img.onload = () => {
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值