图片标注编辑平台搭建系列教程(2)——fabric.js简介

文章目录

  • 综述
  • 数据管理
  • 图形渲染
  • 图形编辑
  • 事件监听
  • 预告

综述

fabric提供了二维图形编辑需要的所有基础能力,包括:数据管理、图形渲染、图形编辑和事件监听。其中,图形编辑可以通过事件监听和图形渲染来实现,所以可以弃用。数据管理方便对业务数据做定制化管理。

数据管理

fabric提供了数据管理能力,能很方便地存取图形数据。
代码如下:

var canvas = new fabric.Canvas('a');
var rect = new fabric.Rect();// 新增object
canvas.add(rect);
// 按索引取object
canvas.item(0);
// 获取指定type的object
canvas.getObjects(type);
// 移除object
canvas.remove(rect);
// 遍历对象
canvas.forEachObject(callback);

图形渲染

fabric原生支持部分图形的渲染,Rect、Circle、Triangle、Polyline、Polygon、Point、Path、Text、Object等。通过这些类,你可以很方便地构建出对应的图形。
代码如下:

var circle = new fabric.Circle({ radius: 20, fill: 'green', left: 100, top: 100 });
var triangle = new fabric.Triangle({ width: 20, height: 30, fill: 'blue', left: 50, top: 50 });canvas.add(circle, triangle);// 设置背景图
canvas.setBackgroundImage('../assets/pug.jpg');// 获取样式
circle.get('fill'); // 'green'// 单独设置样式
circle.set('fill', 'blue');
circle.set('opacity', 0.7);
circle.set('stroke', 'red');
circle.set('strokeWidth', 5);// 批量设置样式
circle.set({ fill: 'yellow', opacity: 0.5 });// 触发重新渲染
canvas.renderAll();// 渲染并初始化图形
canvas.renderAndReset();// 选中object
canvas.setActiveObject(circle);// 添加文字标注
var text = new fabric.Text('hello world', { left: 100, top: 100, fill: 'blue', fontSize: 12 });canvas.add(text);

图形编辑

fabric原生支持了图形的编辑,例如平移、旋转和缩放。不过扩展性不强,本人不喜欢使用,禁用也很简单,如下。
用法如下:

circle.set({lockMovementX: true, // 禁止横向移动lockMovementY: true, // 禁止纵向移动lockRotation: true, // 禁止旋转lockScalingX: true, // 禁止横向缩放lockScalingY: true, // 禁止纵向缩放
});

事件监听

要想编辑功能强大,事件监听必不可少。fabric提供了很底层的事件监听,写法简单,如下:

// 鼠标事件
const mouseEvents = ['mouse:down', 'mouse:move', 'mouse:up']// 渲染事件
const renderEvents = ['after:render']// 选中事件
const selectEvents = ['selection:cleared', 'selection:created', 'selection:updated']// 对象事件
const objectEvents = ['modified', 'selected', 'added', 'removed', 'moving', 'scaling', 'rotating', 'resizing']canvas.on('mouse:down', (options) => { console.log(options.e.clientX, options.e.clientY); });canvas.on('selection:created', (options) => { console.log(options.selected); });canvas.on('object:added', (options) => { console.log(options.target); })

可以监听整个画布的鼠标事件,以及一些抽象后的事件。

预告

下一章,讲讲图片标注中,画布的拖拽、缩放涉及的坐标系相关知识。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/772314.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024年NOC大赛软件创意编程(python初中组初赛)真题

题型和分值:单选题(20题,40分)、判断题(5题,10分)、多选题(5题,20分)、填空题(10题,30分) 一、单选题(每题2分,共20题,满分40分) 1、下面的程序,会无限循环下去的是( ) A&#x…

【数据结构】双向奔赴的爱恋 --- 双向链表

关注小庄 顿顿解馋๑ᵒᯅᵒ๑ 引言:上回我们讲解了单链表(单向不循环不带头链表),我们可以发现他是存在一定缺陷的,比如尾删的时候需要遍历一遍链表,这会大大降低我们的性能,再比如对于链表中的一个结点我们是无法直接…

OJ :1092 :素数表(函数专题)

题目描述 输入两个正整数m和n,输出m和n之间的所有素数。 要求程序定义一个prime()函数和一个main()函数,prime()函数判断一个整数n是否是素数,其余功能在main()函数中实现。 int prime(int n) { //判断n是否为素数, 若n为素数…

DNS协议 是什么?说说DNS 完整的查询过程?

一、是什么 DNS(Domain Names System),域名系统,是互联网一项服务,是进行域名和与之相对应的 IP 地址进行转换的服务器 简单来讲,DNS相当于一个翻译官,负责将域名翻译成ip地址 IP 地址&#…

linux - rm命令删除文件到垃圾箱

修改原来的rm指令到垃圾箱,对于误操作的删除可以直接从垃圾箱里拉回来,同时提高网络安全意识。 创建remove.sh 脚本 PARA_CNT$# TRASH_DIR"/home/pass/.trash" # 指定垃圾箱目录 for i in $*; doSTAMPdate %Y%m%d # 删除时间fileName…

js实现拖放效果

dataTransfer对象 说明:dataTransfer对象用于从被拖动元素向放置目标传递字符串数据。因为这个对象是 event 的属性,所以在拖放事件的事件处理程序外部无法访问 dataTransfer。在事件处理程序内部,可以使用这个对象的属性和方法实现拖放功能…

【鸿蒙HarmonyOS开发笔记】使用@Preview装饰器预览组件

概述 ArkTS应用/服务支持组件预览,要求compileSdkVersion为8或以上。组件预览支持实时预览,不支持动态图和动态预览。组件预览通过在组件前添加注解Preview实现,在单个源文件中,最多可以使用10个Preview装饰自定义组件。 Preview…

算法---矩阵的乘法及其运用

相信我们都做过一个题叫斐波那契数列,对于一般的题,n的取值范围通常在1000以内,但是如果你遇到的是下面这题呢? 斐波那契数列 - 洛谷 发现了吗?我的n取值范围连long long都会爆出,所以下面我们通过矩阵乘法…

张驰咨询:光伏产业新质生产力提升咨询方案

光伏产业新质生产力提升咨询方案 一、光伏行业目前发展现状及特点 1、高度竞争 2、技术驱动 3、绿色发展 二、光伏发展新质生产力面临的痛点 1、成本压缩与效率提升并存挑战 2、新技术应用与推广难度 3、国际贸易摩擦影响 4、市场需求波动大 5、政策与补贴依赖性 三、…

第2章 辐射度、光度和色度学基本理论

一、前言 辐射度学(radiology)是一门以整个电磁波段(electromagnetic band)的电磁辐射能(electromagnetic radiation energy)测量为研究对象的科学。计算机图形学中涉及的辐射度学,则集中于整个…

ARM.day8

1.自己设置温度湿度阈值,当温度过高时,打开风扇,蜂鸣器报警 2.当湿度比较高时,打开LED1灯,蜂鸣器报警 main.c #include "si7006.h" #include "CH1.h" #include "led.h" // 延时函数in…

【Redis】高频面试题

提供五种常见的数据类型:String(字符串),Hash(哈希),List(列表),Set(集合)、Zset(有序集合) 文章目录 1、为什…

融云:社交泛娱乐出海,地区和赛道如何选?

“出海是这个时代给我们的机遇。”这是当前很多互联网出海人的心声。 走过跌宕起伏的 16 年出海历程,中国出海人现在面对与此前截然不同的市场环境,很多地区蓝海不再,也有不少赛道变得拥挤。 一体两面,如今的社交泛娱乐出海也已…

【TB作品】430单片机,单片机串口多功能通信,Proteus仿真

文章目录 题目功能仿真图程序介绍代码、仿真、原理图、PCB 题目 60、单片机串口多功能通信 基本要求: 设计一串口通信程序,波特率38400,通过RS232与PC机通信。 自动循环发送数据串(设计在程序中) 接收并存储和显示该数据串 在发送端定义10个ASCII码键0-9 按键发送单字节,PC机接…

Redis的安装与启动

一、Linux环境安装&启动Redis 1. 安装步骤 第一步:在官网下载好Redis安装包,上传到Linux中并进行解压到相应(如/opt/software/)目录中;(注意:完成了第二步后,即安装了C/C语言…

「媒体宣传」财经类媒体邀约资源有哪些?-51媒体

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 财经类媒体邀约资源包括但不限于以下几类: 商业杂志和报纸:可以邀请如《财经》、《新财富》、《经济观察报》等主流商业杂志和报纸。这些媒体通常具有较强的品牌影…

54、Qt/对话框、事件机制相关学习20240325

一、完善对话框,点击登录按钮,如果账号和密码匹配,则弹出信息对话框,给出提示”登录成功“,提供一个Ok按钮,用户点击Ok后,关闭登录界面,跳转到其他界面 如果账号和密码不匹配&#…

Android 8.1 预置应用开机自启动

Android 8.1 预置应用开机自启动 近来接到项目需求,要求将预置应用设置为开机自启动,具体修改参照如下: 方法一: /packages/apps/Launcher3/src/com/android/launcher3/model/LoaderTask.java private void loadWorkspace() {i…

Machine Learning机器学习之随机森林(Random Forests)

目录 前言: 思想与原理: 随机森林分类效果与什么因素有关: 经典的随机森林算法: 一、构建经典随机森林算法 1、思路 2、步骤: 3、代码实现 二、随机森林算法应用 建模步骤 Python代码实现(完整代码&#xf…

36.网络游戏逆向分析与漏洞攻防-游戏网络通信数据解析-数据解码器的实现

免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 如果看不懂、不知道现在做的什么,那就跟着做完看效果 内容参考于:易道云信息技术研究院VIP课 上一个内容:35.登录成功数据…