从今年开始写写博客~~

1、安装fabric的TS声明库：npm i --save-dev @types/fabric2、重启编辑器。3、点赞收藏来一波

简单介绍橡皮擦功能思路，代码demo自己看看就好了，一点都不复杂：确认橡皮擦大小，可动态设置；鼠标按下记录点击的坐标，然后根据设置的橡皮擦大小画一个圆，最后清除该圆形区域坐标范围的颜色信息；然后创建鼠标移动事件；按下后鼠标移动过程中对移动的轨迹坐标进行清除颜色信息。移动过程中，为了解决鼠标移动事件响应是有时间间隔的，导致正常情况下鼠标快速移动时出现橡皮擦擦除颜色不连贯的问题，为此需要每次擦除需记录上个坐标点，然后对当前坐标点连起来，连起来的范围就是要擦除的坐标范围；鼠标松开销毁移动事件；

例子就用vue项目组件里的代码，fabric的使用跟vue、react、angular之类的框架都没任何关系！代码中监听事件回调函数里的第一个参数，根据事件的不同，有目标图形信息、坐标信息等，自己一看就看得懂了，不讲解；在fabric使用过程中，如果想要玩各种花样，那么fabric的事件监听是一定、必须、肯定要掌握！并且本demo只对功能进行讲述，实际项目使用肯定要进行封装，别直接就照抄导致写的丑！代码只简单介绍一些常用的目标监听事件，更全面的、更多花样的玩法自行查阅官网即可~~

核心API为getImageData，传入4个参数，前2个为点击坐标xy，后2个都传1；表示以当前点击位置为起点，取宽为1、高为1的像素范围信息；在项目当中，要实现某业务需求例如PS魔棒功能时，则需要获取点击坐标的颜色信息。功能不复杂，代码也很少，一看便知~~

方法1：先选中已存在画布内多个图形，然后拿到ActiveSelection数据，随后调用 `toGroup()` 即可将选中的图形创建为组对象；方法2：new fabric.Group() 获取group实例，通过new的时候传入图形参数[o1,o2...]，然后将group实例add到画布上；方法3：在方法2的基础上，group实例也可通过addWithUpdate将图形添加进组里。上述3种方法使用时对应多种不同的场景，根据当前需求进行选择其中一个方式即可；

toDataURL 性能问题、优化；吐槽：当时解决大量图形的性能瓶颈，解决完虚拟化列表后，自测时还是发现某些情况下（某些素材）加载时、操作时有性能问题，当时找了半天最后才发现是 toDataURL 导致的性能问题；情景：在做某些功能的时候涉及到图形的预览，预览的时候是导出为40*40 像素的图片，当碰到某些图形非常小的时候，例如该图形是0.01宽/0.01高，那么如果想要得到该图形40*40大小的图片则需要放大非常大的倍数 multiplier，从而导致 toDataURL 一个函数就需要执行1秒(根据放大

方案1：创建 style 标签，写入@font-face{font-family: 'xxx';src: url('xxx')} 等相关字体样式；将style标签添加到body里；方案2：通过 new FontFace() 进行字体加载，然后通过相关API进行检测加载情况；方案1的适用场景：适合一次性加载所需字体；自己对应功能读取字体结构信息不依赖浏览器的真实加载情况；对加载字体的延迟情况无要求；方案2的适用场景：适合完全加载好字体再执行某功能，避免字体还原显示异常（例如我项目所用的fabric库

在图形编辑器类型的项目当中，通过键盘触发想要绘制的图形类型，然后通过鼠标在fabric画布上自由绘制你想需要的内容。从画基本的矩形、圆形、直线、文本、三角形、折线等功能中，可以扩展出“钢笔path贝塞尔路径”、“多图形组合”、图形合并、图形拆分、解析svg文件(符合要求的文件皆可)进行导入等较为复杂的功能等。功能对应的全局键盘快捷键、监听画布事件（鼠标按下、鼠标移动、鼠标松开）、初始化图形相关数据并添加进画布、更新画布、计算并更新图形坐标、画布框选功能启用/关闭；

fabric 作为一个canvas库，提供了非常高效、直观的API操作，使我们对涉及canvas相关的功能开发效率大幅提升~~~~如：撤销、重做，clipper图形剪辑，拆分图形，对齐图形，任意形式的批量创建，PS钢笔绘制，图片截取，复制粘贴，导入导出数据等；1.简单来讲fabric使我们在平面上绘制图形(直线、圆、折线、路径、文本等)、加载图片、svg等都更加简单、直观；4.可方便的获取、设置任何图形的各个信息，如点坐标、矩阵变化数据、图形类型、颜色、角度、宽高、中心点(包括其他点位)等；

作为自己项目的基础功能之一，自然是需要第一个回顾记录的了！1.拖动画布2.缩放画布3.监听窗口大小变化，从而初始化画布位置、大小涉及相关API：键盘快捷键功能、滚轮功能、监听窗口变化、fabric.js相关事件及API；

javascript 的 hotkeys-js 库，在npm上可搜索查找，作为自己项目里用来监听键盘快捷键，之前由领导负责的该功能模块，现闲来无事，看了下该库的文档，从头到尾跟着把所有API都测了一遍。