图片标注编辑平台搭建系列教程(6)——fabric渲染原理

原理

fabric的渲染步骤大致如下:

  1. 渲染前都设置背景图
  2. 然后调用ctx.save(),存储画布的绘制状态参数
  3. 然后调用每个object自身的渲染方法
  4. 最后调用ctx.restore(),恢复画布的保存状态
  5. 后处理,例如控制框的渲染等

值得注意的是,fabric渲染过程中有两次canvas变换,第一次变换是canvas的viewport整体变换(反应到标注平台就是canvas的自身的transform参数),第二次变换是每个object各自的变换,将object从画布左上角点为原点,转为以object中心点为原点。

弊端

这种方式,你会发现每一次都是所有几何全部渲染,不适合大数据量的渲染。当然,fabric也做了一些优化,比如对active的几何放在一个单独的canvas中进行编辑,不会重渲染原canvas。但是真正的编辑不太可能使用其原生的控制框进行编辑,真正的编辑更加复杂,需要对每个几何的每个坐标点(我称之为形点)进行拖拽编辑,这就需要我们设计一个草稿图(sketchLayer)的架构来对几何编辑进行扩展支持。后续文章我会探讨这个草稿图模式如何设计更加合理。

预告

下一章,我们讲讲架构,主题是ID编辑器和fabric如何构成一个完整的标注平台。

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

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

相关文章

精品丨PowerBI负载测试和容量规划

当选择Power BI作为业务报表平台时,如何判断许可证的选择是否符合业务需求,价格占了主导因素。 Power BI的定价是基于SKU和服务器内核决定的,但是很多IT的负责人都不确定自己公司业务具体需要多少。 不幸的是,Power BI的容量和预期…

54 npm run serve 和 npm run build 输出的关联和差异

前言 通常来说 我们开发的时候一般会用到的命令是 “npm run serve”, “npm run build” 前者会编译当前项目, 然后将编译之后的结果以 node 的形式启动一个服务, 暴露相关业务资源, 因此 我们可以通过 该服务访问到当前项目 后者是编译当前项目, 然后做一下最小化代码的优…

第六讲 B+树索引

1 B树大家庭 有一种称为 B 树的特定数据结构,人们还使用该术语来泛指一类平衡树数据结构: B-Tree (1971)BTree (1973)B*Tree (1977?)B link-Tree (1981)Bε-Tree (2003)Bw-Tree (2013) 2 B树 BTree 是一种自平衡【self-balance】、有序【ordered】的…

文生图大模型Stable Diffusion的前世今生!

1、引言 跨模态大模型是指能够在不同感官模态(如视觉、语言、音频等)之间进行信息转换的大规模语言模型。当前图文跨模态大模型主要有: 文生图大模型:如 Stable Diffusion系列、DALL-E系列、Imagen等 图文匹配大模型:如CLIP、Chinese CLIP、…

LeetCode Python - 84. 柱状图中最大的矩形

目录 题目描述解法方法一方法二 运行结果方法一方法二 题目描述 给定 n 个非负整数,用来表示柱状图中各个柱子的高度。每个柱子彼此相邻,且宽度为 1 。 求在该柱状图中,能够勾勒出来的矩形的最大面积。 示例 1: 输入:heights …

pytorch常用的模块函数汇总(1)

目录 torch:核心库,包含张量操作、数学函数等基本功能 torch.nn:神经网络模块,包括各种层、损失函数和优化器等 torch.optim:优化算法模块,提供了各种优化器,如随机梯度下降 (SGD)、Adam、RMS…

手机投屏到windows11电脑

1 安装无线投影组件 2 电脑端打开允许其他设备投影的开关 3 手机找到投屏选项 4 手机搜索可用设备连接即可 这里的官方文档给的不太好,给了一些让人眼花撩乱的信息,以下是经过整合的有效信息

FL Studio21.2.3中文版软件新功能介绍及下载安装步骤教程

FL Studio21.2中文版的适用人群非常广泛,主要包括以下几类: FL Studio 21 Win-安装包下载如下: https://wm.makeding.com/iclk/?zoneid55981 FL Studio 21 Mac-安装包下载如下: https://wm.makeding.com/iclk/?zoneid55982 音乐制作人&#xff1a…

开发指南020-banner

<dependency><groupId>org.qlm</groupId><artifactId>qlm-common</artifactId><version>1.0-SNAPSHOT</version> </dependency> 以上组件封装了平台的banner&#xff0c;不做任何配置的话&#xff0c;将输出平台的banner 想修…

二维码门楼牌管理应用平台建设:三维白模数据建设的意义

文章目录 前言一、三维白模数据建设的意义二、二维码门楼牌管理系统的构建三、二维码门楼牌管理系统的优势四、面临的挑战与未来展望 前言 随着城市管理的精细化和智能化需求日益增强&#xff0c;二维码门楼牌管理应用平台的建设成为推动城市管理现代化的重要手段。本文将探讨…

第几个幸运数字(蓝桥杯)

文章目录 第几个幸运数字题目描述答案&#xff1a;1905生成法C代码代码详细注释代码思路解释 第几个幸运数字 题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 到x星球旅行的游客都被发给一个整数&#xff0c;作为…

软考高级架构师:安全模型概念和例题

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

软考高级架构师:信息安全保护等级

作者&#xff1a;明明如月学长&#xff0c; CSDN 博客专家&#xff0c;大厂高级 Java 工程师&#xff0c;《性能优化方法论》作者、《解锁大厂思维&#xff1a;剖析《阿里巴巴Java开发手册》》、《再学经典&#xff1a;《Effective Java》独家解析》专栏作者。 热门文章推荐&am…

Java接口实战:模拟咖啡制作、订购与消费完整流程(day14)

定义接口&#xff1a; // 咖啡制作接口 interface CoffeeMaker { Coffee makeCoffee(String type); } // 咖啡店接口 interface CoffeeShop { void orderCoffee(String type, CoffeeConsumer consumer); } // 咖啡消费者接口 interface CoffeeConsumer { void …

文章解读与仿真程序复现思路——电网技术EI\CSCD\北大核心《考虑新能源发电商租赁共享储能的电力市场博弈分析》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

解决前后端通信跨域问题

因为浏览器具有同源策略的效应。 同源策略是一个重要的网络安全机制&#xff0c;用于Web浏览器中&#xff0c;以防止一个网页文档或脚本来自一个源&#xff08;域、协议和端口&#xff09;&#xff0c;获取另一个源的数据。同源策略的目的是保护用户的隐私和安全&#xff0c;防…

java数组与集合框架(三)--Map,Hashtable,HashMap,LinkedHashMap,TreeMap

Map集合&#xff1a; Map接口: 基于 键&#xff08;key&#xff09;/值&#xff08;value&#xff09;映射 Map接口概述 Map与Collection并列存在。用于保存具有映射关系的数据:key-value Map 中的key 和value 都可以是任何引用类型的数据Map 中的key 用Set来存放&#xff0…

stitcher类实现多图自动拼接

效果展示 第一组&#xff1a; 第二组&#xff1a; 第三组&#xff1a; 第四组&#xff1a; 运行代码 import os import sys import cv2 import numpy as npdef Stitch(imgs,savePath): stitcher cv2.Stitcher.create(cv2.Stitcher_PANORAMA)(result, pano) stitcher.st…

【每日跟读】常用英语500句(400~500)

【每日跟读】常用英语500句 Where can I buy a ticket? 在哪里能买到票&#xff1f; When is the next train? 下趟火车什么时候到&#xff1f; Thank you so much for helping me move yesterday. 非常感谢你昨天帮我搬家 I’m feeling a little under the weather toda…

Vue + .NetCore前后端分离,不一样的快速发开框架

摘要&#xff1a; 随着前端技术的快速发展&#xff0c;Vue.NetCore框架已成为前后端分离开发中的热门选择。本文将深入探讨Vue.NetCore前后端分离的快速开发框架&#xff0c;以及它如何助力开发人员提高效率、降低开发复杂度。文章将从基础功能、核心优势、适用范围、依赖环境等…