整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，我是前端西瓜哥。这次简单看看 SVGEdit 的架构。
SVGEdit 的版本为 7.2.0。
SVGEdit 一款非常老牌的 SVG 图形编辑器，用于编辑处理 SVG，star 数目前是 5.8k。
它的优点在于经过多年的开发，完成度高，较为成熟，功能相当丰富。
缺点是几乎不维护了，提交很少，大概一个月一提交，最新版 7.2.0 也是 22 年 8 月的时候了。
UI 比较简陋，很简单就能看到一些 UI bug。
如果要找一个 UI 好看的，可以看看开源项目 ：Method-Draw，这个 UI 好看很多。它 fork 了 SVG-Edit 并做了一些改造。
Method-Draw 标榜简单易用，所以有意去掉了 SVGEdit 的一些高级功能，比如图层。
Web Component + SVG + Rollup + i18next
UI 使用了 Web Component，浏览器原生支持的组件方案。
作为一款 SVG 编辑器，选择 SVG 没有毛病，这样渲染效果就完全交给浏览器，不需要根据标准去实现渲染效果，自己专心写编辑器的业务逻辑即可。
没有用 TypeScript，因为是很老的项目，当时 TypeScript 尚未大行其道。如果要做新项目，建议还是上 TypeScript，大型复杂软件还是很需要类型系统的。
打包用了 Rollup。国际化用了 i18next。
UI 层对应 Editor 类，该类继承了 EditorStartup 类，后者做一些初始化操作。
编辑器内核对应 SvgCanvas 类。
SvgCanvas 感觉太多读写属性的方法（getXx 和 setXx）了，学 Java 学的。可以抽几个小类把耦合性强的方法封装起来。
有插件机制，插件对象通过 addExtension 方法注入到 SvgCanvas.extensions 对象。
可以看到注册了 grid（网格）、markers（标尺）之类的插件。
关于 UI 层和内核层的通信，UI 层改数据，会直接改内核层，然后再改 UI 层。
这里的 zoom 有两个数据源，可能会出现改了一个忘记改另一个的情况。建议只使用一个内核层数据源，改这个数据源后通过事件通知 UI 层或其他层做数据同步。多数据源是坏文明。
渲染方案是 SVG。
SVG 编辑器用 SVG，相当合理。
对于图形树的实现、图形拾取（点选）、图形渲染，SVGEdit 都交给浏览器都去实现。
SVG 对一般前端开发是非常好上手的，不需要太多图形知识，本质就是一个有层级的 DOM 元素树，前端同学再熟悉不过了，只是元素专门用来描述图形。
但因为远离底层，不方便做一些渲染优化和缓存，图形多的时候很卡，不适合做高性能图形编辑器。
灵活性也较差，比如一个 0.5 线宽的直线还把画布缩小了，根本就点不中好不好，希望点击区域可以外扩一些，或想点中一个设置为不可见的图形点击区域。这个做不了。
当然一个可以考虑的方案是 SVG 只是单纯做渲染，图形拾取自己实现。
但 SVG 有一个强大的优点：方便做功能扩展，进行二次开发。
比如你要在图形编辑器里加一个新的模块，比如倒计时、一个表单组件，网上找到轮子集成进去会很方便。因为 SVG 里面可以嵌入 DOM 元素，DOM 元素里也可以嵌入 SVG。
UI 层原本是基于 jQuery UI 的，但后面丢弃 jQuery 改用 Web Component 进行了重构。
顺带一提，有个叫做 jPicker 的基于 jQuery 的拾色器插件，也做了魔改，去掉对 jQuery 的依赖。
它没有用 React、Vue 这些 UI 框架，而是选择 Web Component，我认为这是一个糟糕的决策。
Web Component 虽然被 浏览器原生支持，但并不是主流，生态一般，轮子不如 React 和 Vue 丰富。
我们继续看代码。
以左侧栏 LeftPanel 为例，HTML 为：
这里的 se-button 就是一个 Web Component 组件，里面有局部样式和交互逻辑，类似 React 和 Vue。
全局样式文件是 svgedit.css。
LeftPanel 类初始化后会调用 init 方法。
该方法会：
$id 这些是工具类方法。
下面代码的作用是，给选择工具按钮绑定方法，该方法更改编辑器的模式为选择模式。
LeftPanel 的 init 方法是在 EditorStartUp 类（这个是 Editor 的父类）的 init 方法中被调用的。
点选 图形的图形拾取是交给浏览器，监听鼠标按下事件的方式，读取 mouseEvent.target。
因为可能有组的存在，所以会不断地读 parentNode 找最顶层的 group 元素，直到当前 group 结束。
框选 会在点中空白区域出现，并将当前模式（currentMode）临时切换为 multiselect。
期间产生的选区矩形元素保存在 svgCanvas.rubberBox 属性中。
拖拽修改选区矩形宽高时，会递归 SVG 树，计算它们的 bbox，判断是否和选区矩形相交。将相交的图形放到 selectedElements 属性中。
切换工具使用 SvgCanvas.setMode('line') 的方式。
不同工具都有各自实现的事件响应函数，当用户进行鼠标操作时，会执行 mouseDownEvent、mouseMoveEvent、mouseUpEvent，会根据 mode 执行不同的工具的方法。
钢笔工具对应 svgCanvas.pathActions 属性，对应 pathActionsMethod 方法，没有用类，而是用了闭包的方式进行逻辑封装。
图形工具的逻辑倒没有抽一个对象出来，直接写在 ouseDownEvent、mouseMoveEvent、mouseUpEvent 里。
我以前的文章说过，历史记录需要维护一个撤销栈和一个重做栈。
两个栈等价于一个数组或双向链表中，加上一个指针，该指针指向多个命令中的当前命令。
撤销就是把指向往左移动，重做往右移，新操作则把指针后面的命令丢掉，然后把这个新的操作加到数组中，并将指针后移。
SVGEdit 的历史命令都保存在 UndoManager 类的 undoStack 数组中，并用 undoStackPointer 指针指向最新命令的位置。
SVGEdit 使用了 patch（打补丁）的方式记录历史操作，没有使用图形树快照的方式。
下面是移动一个矩形产生的操作命令，它记录了修改图形属性的命令，该命令保存了一个元素修改前后的属性。
这里有个特殊的 BatchCommand 批量命令对象，它的 stack 数组记录了一次操作要执行的多个子命令。
其实就是 宏命令。宏命令的作用是将多个命令组合在一起批量执行。
各种命令类保存在 svgCanvas.history 中。
UI 框架应该选择 React 或 Vue。
这样项目才会有更多人使用，作为一款比较古早的编辑器才可能焕发第二春。
最好是 Vue3，国内很多中小厂在用，那里的程序员不喜欢造轮子，这样他们就会用你这个编辑器，然后社区繁荣，赢。当然最好 React 和 Vue 都做。
SVGEdit 丢掉 jQuery 用 Web Component，我不是很理解，外国比较流行这个？这样就不好集成进公司的项目中，不利于项目的持续发展。
不要使用单例。
我看不少地方用了单例，单例模式有个问题，如果页面需要同时有多个编辑器实例，比如做两张图纸对比功能。
那它们就会因为单例的对象共享导致冲突，比如改了编辑器 A 的设置属性会同时改了编辑器 B 的，这不是我们想要的。
类的面向对象风格是比较好的解法，每个对象都要创建一个新的实例，就不会冲突了。
较多的 UI bug。
选中一个元素就能复现，此外 UI 也不好看。
监听鼠标事件应该放到 document 下。
放到 SVG 的容器或 SVG 上其实并不是很好的做法，当光标移到这些元素外时，监听就消失了，绑定到 doucment 下即使光标移动到浏览器外都能监听。
SVGEdit 支持的功能很多，但 UI 比较复古，小 bug 有点多的样子。
但如果你要做 SVG 编辑器，与其从零开始，不如基于 SVGEdit 做去二次开发。
我是前端西瓜哥，关注我，学习更多图形编辑器知识。
家好，我是 Echa。
今天来分享 50 个超实用的 Chrome 浏览器扩展！
JSON Viewer Pro 用于可视化JSON文件。其核心功能包括：
输入界面如下：
格式化之后：
JSONVue 是一个JSON数据查看器，主要用来格式化JSON数据：
Library Sniffer 是一款给开发者使用的工具，能够探测当前网页所使用的类库、框架和服务器环境，为开发者提供了方便。
Wappalyzer 扩展可以用来识别网站背后的底层技术。通过此扩展，可以了解特定应用程序是否是用 React、Vue、Angular、PHP等编写的。还可以访问有关 Web 服务器、编程语言、框架、内容管理系统、分析的信息工具、数据库等。
WhatRuns 扩展程序只需单击一下即可找到任何网站上使用的技术。
使用PerfectPixel插件可以将设计图加载至网页中，与已成型的网页进行重叠对比，以帮助开发和设计人员规范网页像素精度。这是一款可以优化前端页面显示的Chrome插件。
可以使用此扩展程序快速清除缓存，无需任何确认对话框、弹出窗口等。可以在选项页面上自定义要清除的数据和数量，包括：应用程序缓存、缓存、Cookie、下载、文件系统、表单数据、历史记录、索引数据库、本地存储、插件数据、密码和 WebSQL。
VisBug 是一个使用 JavaScript 构建的开源网页设计调试工具，它可以让用户使用点击式和拖放式界面来查看网站的元素。
Debug CSS 是一个帮助调试CSS的插件。他可以显示出页面元素的轮播，按住Ctrl，并将鼠标悬浮在元素上，即可查看其信息：
CSS Viewer 是一款适用于 Web 开发人员的高效 Chrome 扩展。顾名思义，CSS 查看器可以显示将鼠标悬停在任何网页上的元素的 CSS 属性。
EditThisCookie 是一个 cookie 管理器。可以添加，删除，编辑，搜索，锁定和屏蔽cookies。
React Developer Tools 是开源 JavaScript 库 React 的 Chrome DevTools 扩展。它允许我们在 Chrome 开发者工具中检查 React 组件层次结构。安装此插件之后，将在 Chrome DevTools 中获得两个新选项卡："⚛️ Components" 和 "⚛️ Profiler"：
Vue.js devtools 是一款基于chrome浏览器的用于调试Vue.js应用程序的插件，可以使得开发人员大大提高调试效率。支持用户对DOM结构数据结构进行解析和调试功能。
Augury 可以帮助开发人员在 Google Chrome 浏览器中调试和分析 Angular 应用程序。
Firebug Lite是火狐浏览器中著名的开发者工具firebug插件移植到Chrome中的插件，在Chrome中安装了Firebug Lite插件以后，开发人员可以像在火狐浏览器中使用firebug一样熟悉的方式来调试网页内容，其包含了基本的HTML、CSS以及Javascript的调试功能，用于帮助网页前端开发工程师快速地调试网页，以便及时地找到网页中的BUG并及时修复。
HTML Validator 在 Chrome 的开发者工具中添加了 HTML Validator。HTML 页面的错误数通过浏览器状态栏中的图标显示，详细信息可以在浏览器的开发者工具中查看。
Web Developer 扩展为带有各种 Web 开发工具的浏览器添加了一个工具栏按钮。该扩展适用于 Chrome 和 Firefox，并且可以在这些浏览器支持的任何平台上运行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox浏览器插件，提供URL转发、修改HTTP请求和结果、插入脚本等功能。
Window Resizer 主要用来调整浏览器窗口的大小以模拟各种屏幕分辨率。
Responsive Viewer 是在一个视图中显示多个屏幕的 Chrome 扩展程序。该扩展将帮助前端开发人员在开发响应式网站/应用程序时测试多个屏幕。
此插件允许直接从浏览器发送跨域请求，而不会收到跨域错误。可以使用此插件覆盖 Request Origin 标头，并将 Access-Control-Allow-Origin 设置为 *.
ColorPick Eyedropper 是一个放大的吸管和颜色选择器工具，可让从网页等中选择颜色值。
CSS Peeper 用于检查和复制元素样式的优秀工具，使用 CSSPeeper 可以将鼠标悬停在网页中的任何元素上，然后单击鼠标即可复制元素的样式。
24. Dimensions
Dimensions是一款能帮助使用者对网页上各种元素属性之间的距离进行测量的Chrome页面元素测量插件，该插件在点击启动插件图标后，可以对页面中图像、输入字段、按钮以及视频等页面元素之间上下左右的方位尺寸进行测量，同时还可以通过使用快捷键来快速启用或关闭该插件的功能，简单实用。
Site Palette 用于生成调色板。设计师和前端开发人员必备的工具。可以通过这款插件轻松获取网站的配色方案。
ColorZilla 是一款功能强大地提取网页色彩的工具；也是个快速的对颜色进行调节的Chrome插件，许多的用户将这款软件称呼为颜色吸取插件，它提取的颜色是非常的多样化，还可生产css颜色的代码等。
当我们想查看网页中文字的字体时，最常用的方法就是在控制台查看文字的字体样式。那还有没有更简单的方法呢？WhatFont 就是一个查看网页字体的Chrome扩展。只需要的点击扩展图标，再点需要查看为文字即可：
Fonts Ninja 可以从任何网站识别字体、添加书签、试用并购买它们。
使用 BrowserStack 快速启动扩展在任何浏览器中启动一个新的测试会话。最多可设置 12 个浏览器以实现快速访问并最大限度地减少切换浏览器所花费的时间。
Toby 是一款 Chrome 新标签页工具，能够将未读的标签页分组显示在新标签页中，这样就能把所有未看完的标签页都关闭了。分组相当于多个 Chrome 窗口，将你的标签页都拖进 Toby 中，就不需要实时开着占地方了。
该扩展提供了每日热门开发者新闻，不需要再浪费时间搜索高质量的文章了。
Momentum 拥有漂亮的新标签页面，每日更新精彩背景壁纸图片，可设置每日新鲜事焦点以及跟踪待办事项，无广告，无弹窗。
The Great Suspender 是一个轻量级的扩展用来减少 Chrome 的内存占用。如果同时打开许多选项卡，在可配置的时间之后未查看的选项卡将在后台自动挂起，从而释放该选项卡消耗的内存和 CPU。
Session Buddy是一个可以帮助用户查看、新增、编辑当前网站Session状态的Chrome插件。用户可以利用该插件保存网站当前的状态以便在关闭Chrome或关闭计算机后恢复，从而达到节省内存的作用。
Octotree 旨在让 GitHub 体验更好。通常，为了检查 Github 中的子文件夹，需要手动单击文件夹并导航。Octotree 扩展解决了这个问题。此扩展在项目的左侧显示存储库的目录结构，这有助于更好地理解文件夹结构。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以将 GitHub 和 GitLab 上的原始文件图标替换为特定文件类型的图标。
ax DevTools 是一个快速、轻量级但功能强大的测试工具，由 Deque 开发的世界上最值得信赖的可访问性测试引擎 axe-core 驱动。使用 ax DevTools 在网站开发过程中查找并修复更多可访问性问题。
OctoLinker 可以将特定语言的语句（如 include、require 或 import）转换为链接。当打开一个包含多个导入语句的文件并且想要快速打开它时，只需将鼠标悬停在链接的文件上并单击即可打开。
此扩展可帮助 Web 开发人员分析网页是否违反最佳实践。
Check My Links 是一个链接检查器，它可以抓取网页并查找损坏的链接。
Checkbot 是用于验证一组HTML页面上的链接的工具。Checkbot可以检查一个或多个服务器上的单个文档或一组文档。它会创建一个报告，该报告汇总了引起某种警告或错误的所有链接。
Google Page Speed Insighs 是一款旨在优化所有设备上的网页、提高网页加载速度的工具。
META SEO inspector是一款可以帮助用户分析网页的meta信息并得到SEO评估的谷歌浏览器插件。
Ghostery 是强大的隐私保护扩展程序。其主要有以下功能：
AdBlock 用来在YouTube、Facebook、Twitch和其他你喜爱的网站上拦截广告和弹窗。
番茄工作法（Pomodoro®）时间管理助理。• 长短两种休息时间 • 带有倒计时显示的工具栏图标 • 追踪Pomodoro历史和统计讯息 • 可配置的长休间隔 • 可配置的定时器时长 • 桌面与新标签页通知 • 超过20种音效可选的声音通知 • 计时器秒针走动音效
Loom 可以用来快速录制视频，并且能够将录制的视频上传到指定的网页中，Loom还支持在用户点击启动插件时，立即捕捉屏幕图像，同时开始视频录制操作，还可以将录制好的视频复制到粘贴板中存储。
GoFullPage 是一款全屏截图插件（整个网页截图），完整捕获您当前页面的屏幕，进行滚动截图，而无需任何额外的权限。单击扩展程序图标，然后将其传输到屏幕快照的新标签页中，可以在其中将其下载为图像或PDF，甚至只需拖动即可，保存到桌面。
BetterViewer 可以提供更好的图像查看体验，旨在替代基于 Chrome 浏览器中内置的图像查看模式。使用时，只需在页面右键点击图片，选择“在新标签页中打开图片”即可。
svg-grabber 是一个快速预览并从网站获取所有 svg 的工具。可以用来预览、下载和复制网站中所有 SVG 图标和插图的代码。
anvas技术的诞生可谓是让绘图技术如虎添翼，本文将推荐一系列Canvas图形绘制、流程图、组织图、甘特图、全景图、3D库、VR/AR、图像编辑等方面的库，希望助你在Canvas绘图时寻得一把趁手的利器。
同时，愣锤将Canvas的相关资源进行的收录整理分类，更多的资源请关注Github项目地址awesome-canvas。目前该库持续维护中，已收录大约200+的Canvas库，以及资源网址、插件、书籍、博客等资源。
图形处理库
图形绘制是Canvas中最基本的内容，但是Canvas本身提供的api比较基础，开发起来低效。而且也缺少完整的事件系统、区域监测、缓存等等。下面让我们来看几款高效的图形处理库吧。
简介：Konva是一个 HTML5 Canvas JavaScript 框架, 通过扩展 Canvas 的 2D Context 让桌面端和移动端Canvas支持交互性，使其支持高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等。Konva官方地址（https://konvajs.org/docs/sandbox/index.html）
除上述之外，文档相对友好，但也仅仅是相对于同类库的文档友好那么一滴滴，社区有维护一个中文文档。
简介： Fabric.js是一个可以轻松处理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式对象模型，同时也是一个SVG-to-Canvas和Canvas-to-SVG的解析器， fabric.js官方地址（http://fabricjs.com/demos/）
fabricjs是和konva同类型但是比konva更老牌的一个的Canvas库，目前github上Star数2万+
更多示例如下图所示：
图像编辑
市面上图像编辑的软件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我们想开发类似的软件，有没有可以使用的库或者参考的开源软件呢？
简介：miniPaint [官方网站在线演示]（https://viliusle.github.io/miniPaint/） - 在线版的PS。PS这款软件大家都不陌生，web版本的如何呢？请看下图：
简介：DarkroomJS [官方网站在线演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基于Fabricjs的浏览器端可扩展的图像编辑工具
简介：fabric-brush [官方网站在线演示] （https://tennisonchan.github.io/fabric-brush/）- 基于Fabric.js的Canvas笔刷工具
简介：fabricjs-image-editor-origin [官方网站在线演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs图像编辑器
简介：react-sketch [官方网站在线演示] （http://tbolis.github.io/showcase/react-sketch/）- 基于React、Fabricjs的素描应用
简介：glitch-canvas [官方网站在线演示]（https://snorpey.github.io/jpg-glitch/） - 给画布元素添加故障效果
简介：animockup [官方网站在线演示] （https://animockup.com/）- 在浏览器中创建动画模型，并导出为视频或动画GIF
物理引擎
物理引擎使用质量、速度、摩擦力和空气阻力等变量，模拟了一个近似真实的物理系统，为刚性物体赋予真实的物理效果，比如重力、旋转和碰撞等效果，让物体的行为表现的更加趋向真实。例如，守望先锋的英雄在跳起时，系统所设置的重力参数就决定了他能跳多高，下落时的速度有多快，子弹的飞行轨迹等等。
简介： matter.js是一个用于 Web 的 JavaScript 2D 物理引擎库 matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）
matter.js相较于老牌的 Box2D 引擎库更为轻量级（压缩版仅有 87 KB），并且在性能和功能方面也不逊色。
流程图/组织图/图编辑等
工业软件开发，一直是软件领域复杂而又重要的一环。其对技术人的要求要是更高的，下面看看有哪些可以辅助我们快速开发的库或者参考的场景吧。
简介： gojs是一款可以非常方便的开发交互式流程图、组织结构图、设计工具、规划工具、可视化语言的JavaScript图表库。 gojs.js官方地址（https://gojs.net/latest/）
文档中提供了大量的demo可供参考，基本对于常见的图编辑程序做到了全覆盖。
简介：butterfly [官方网站在线演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一个基于JS的数据驱动的节点式编排组件库，同时适用于React/Vue2组件。
简介：wireflow [官方在线演示]（https://app.wireflow.co/） 用户流程图实时协作工具。
简介：Flowy [官方在线演示]（https://alyssax.com/x/flowy） - 用于创建流程图的最小javascript库。使创建具有流程图功能的 WebApp 成为一项非常简单的任务。通可以在几分钟内构建自动化软件、思维导图工具或简单的编程平台。
简介：Workflow Designer [官方在线示例] （https://guozhaolong.github.io/wfd/）- 基于G6和React的可视化流程编辑器。
简介：web-pdm [在线示例]（https://erd.zyking.xyz/demo） - 用G6做的ER图工具，最终目标是想做成在线版的powerdesigner.
简介：X-Flowchart-Vue [官方在线演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基于G6和Vue的可视化图形编辑器。
简介：OrgChart [官方在线演示] （https://dabeng.github.io/OrgChart/）- 简单直接的组织图插件
简介：welabx-g6 [官方在线示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基于G6和Vue的流程图编辑器。
全景图/AR/VR
5g的普及、虚拟现实/增强现实落地、元宇宙的火热......似乎让Canvas再度推上了技术的顶峰。下面让我来看看开发这些场景常见的Canvas库吧。
简介：Pannellum [官方在线演示] （https://pannellum.org/）- 轻量、免费、开源的web全景查看器。
简介：Panolens.js [官方在线演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，主要研究领域是全景、虚拟现实和潜在的增强现实。
简介：JS-Cloudimage-360-View [官方在线演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一个简单的、交互式的资源，可以用来提供您的产品的虚拟游览。
简介：A-Frame [官方在线演示]（https://aframe.io/） A-Frame 除了帮助您构建 360 度媒体播放器外，它还提供了许多附加功能。其他功能可帮助您增强网站的虚拟现实体验。
3D库
简介：three.js [官方在线演示]（https://threejs.org/examples/） - 创建易于使用、轻量级、跨浏览器的通用3d js库。three.js就不多介绍了，大家想必都很熟悉。
简介：zdog [官方在线演示]（https://zzz.dog/） - 基于canvas和SVG设计师友好的伪3D引擎
简介：seen [官方在线演示] （http://seenjs.io/）- 使用SVG或Canvas渲染3D场景。
简介：Oimo.js [官方在线演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 轻量级的JS 3D物理引擎。
简介：phoria.js [官方在线演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用于在 HTML5 画布 2D 渲染器上进行简单 3D 图形和可视化的 JavaScript 库。它不使用 WebGL。适用于所有 HTML5 浏览器，包括桌面、iOS 和 Android。
原文来自：https://juejin.cn/post/7038267477121302542
*请认真填写需求信息，我们会在24小时内与您取得联系。
