介绍
我接触 Excalidraw 现已很长时间，它是一款十分好用的开源画图运用（库），然后个人想在今年涉足一下前端画图领域的技能，所以对它的技能完结进行了一些研讨。
Excalidraw 大约从 2020 年年初开端以开源的进行建造，阅历两年多的迭代现在它的代码现已相对杂乱了，而我当下最关注的部分其实是在怎么从 0-1 完结一个画图运用，比方用到什么技能绘图、根底版本应该哪些功用、完结这些功用的技能思路是什么等等这些，所以我花了一部分时间在 Excalidraw 开端的代码结构上，下面就谈谈我对 Excalidraw 和 画图技能的一些认识。
我的思路是先分析一款画图运用（库）应该关注的根底技能，然后在这个根底上介绍 Excalidraw 是怎么完结的。
画图根底技能
一、用什么技能完结图形元素制作？
前端里边用来完结元素制作的技能：canvas 或 svg，咱们应当都不陌生，从我粗浅的了解来看它俩的区别不大，便是 API 不同，无非便是 canvas 是一套独立的脱离 DOM 的绘图 API，而 svg 仍是咱们常规意义上的 DOM，所以 svg 和一般的前端开发更近一些，能够用一套思想去处理 svg 的交互逻辑。
二、怎么完结交互制作？
交互制作主要指用户经过鼠标拖动、键盘等完结创立或许修正元素的行为，比方：拖动创立一个矩形、拖动调整元素大小等，考虑的是这一部分的交互技能应当怎么完结。
三、怎么完结元素选择（点选/框选）
这个很好了解，比方点选，咱们经过眼睛和大脑能够很容易的判断用户是否点击了某一个图形元素，可是技能上可能要杂乱一些，尤其是触及椭圆、贝塞尔曲线、箭头号元素时。
四、怎么完结吊销/重做
吊销重做是一个图形编辑器必不可少的功用，它不杂乱，可是完结起来却有很多种方法。
五、文本的考虑
绘图东西中一个必不可少的元素便是文本元素，能够只支撑纯文本，有时候也需求支撑富文本，比方：文字加粗、文字大小、列表支撑等，关于文本的支撑必定程度上影响最根底的绘图技能选型。
六、数据结构规划
这部分大约便是图形元素的数据模型规划，包括哪些字段能够完美承载所有图形元素的表示，元素的方位、大小信息、色彩、背景色等等。
Excalidraw 根底完结
一、用什么技能完结图形元素制作
Excalidraw 底层运用 canvas 完结元素的制作，它选择了一个根底库 roughjs 来完结 canvas 的制作，避免直接运用 canvas 不流畅的 api。
二、怎么完结交互制作
这个说起来也没什么神秘的，Excalidraw 便是凭借浏览器根底鼠标事情：mousedown、mousemove、mouseup 来匹配用户的交互目的，比方用户选择开端画一个矩形：在画布内榜首次 mousedown 事情代表制作开端（标记起始点），后面的 mousemove 事情改动矩形宽高（当前点位与起始点差值），mouseup 事情代表制作完结。其它的图形制作与此类似。
三、怎么完结元素选择（点选/框选）
Excalidraw 最根底的版本现已支撑了点选和框选，效果就很好。这儿简略介绍一下它的技能完结思路，我可能也讲不太好，因为它杂乱并且会用到一些数学知识。
一个简略的比方：便是矩形元素点选（只要点击矩形元素边线周围才管用，需求设定一个缓冲值），excalidraw 包括一个根底的函数 点与线段的间隔 ，到矩形元素便是核算点击的方位与矩形元素四条边的间隔，如果有间隔小于设定的缓冲值则被认定该矩形元素被选择，这个不杂乱。
点与线段的间隔：
这个数学上应当是最小间隔，stackoverflow 上有关于这块的算法介绍，图形解释
（stackoverflow 参考）
稍微杂乱一些的比方椭圆，它就用到了更杂乱一些的数据公式，大约便是核算目标点与椭圆横截面的最短间隔，具体的核算函数介绍 Excalidraw 也出了出处：
( stackoverflow 上的链接 )
还有一些别的，比方贝塞尔曲线怎么核算这些，能够了解为虽然有一些理论门槛，可是咱们都能够找到运用的解决方案，大约难度便是这样吧。
四、怎么完结吊销/重做
吊销重做 Excalidraw 完结的更简略，便是用一个数据组栈保存用户每一次修正数据时的一个临时状况，然后按 Ctrl + Z 时出栈最近的状况，用数据状况恢复界面状况，这应当是最简略的完结方法了。
五、文本的考虑
Excalidraw 只支撑纯文本，支撑经过 canvas 制作文本。在 Excalidraw 的开端阶段文本仅仅简略的支撑，仍是经过 alert 弹框的方法支撑输入的。
六、数据结构规划
能够一起看下 Excalidraw 开端的数据模型界说：ExcalidrawElement
除此之外还有一个文本的元素模型 ExcalidrawTextElement
ExcalidrawTextElement 承继自根底类型，额外包括文本内容、字体等字段
Excalidraw 技能架构
Excalidraw 最开端的代码基本上无架构形式，这儿为了总结下大约梳理下它用的技能及完结思路，Excalidraw 运用 TypeScript 言语结合 React 结构编写，比较重要的一个依靠便是一个手绘风格的绘图库 Roughjs，内部也是采用数据驱动的方法来完结，经过更新数据取驱动绘图更新，一个比较不错的一个规划点便是它的数据分为：完结后数据 + 进行中数据，进行中数据便是正在画的数据，这样一来这两方面数据的制作就能够用统一的 API 去完结更新。
结束
这是介绍 Excalidraw 的第二篇文章，原本想和榜首篇相同录一个短视频的，可是觉得技能性较强的内容仍是文章更好一些，就没有录，榜首篇文章传送门：
5 分钟了解 Excalidraw
Excalidraw – 开源画图东西_哔哩哔哩_bilibili
