共计 1709 个字符，预计需要花费 5 分钟才能阅读完成。
最近应用 fabric.js 开发了一个图形编辑器并开源了，已收到 900+star，很多开发者征询 fabric.js 能实现哪些性能，明天就用文字加动图的模式直观的分享进去，帮忙大家做参考。
fabric.js 提供弱小的底层能力，可实现 自定义模板、素材、字体，图片滤镜、辅助线、组合、裁剪等性能，也提供了自定义元素等高级的用法。
我的项目：https://github.com/nihaojob/vue-fabric-editor
预览：https://nihaojob.github.io/vue-fabric-editor/#/
画布性能
画布属性：尺寸、预设大小、背景色。
反对批改画布尺寸，也有预罕用预设的画布尺寸，能够便捷设置，有背景色批改属性，同时提供罕用色彩的快捷批改。
画布缩放：放大、放大、主动适应、鼠标滚轮缩放。
反对画布放大放大操作，可依照 1:1 尺寸展现或自适应展现，页面窗口扭转时会依据窗口大小自适应展现；滑动鼠标滚轮时可快捷缩放画布。
其余细节：拖拽画布、画布区域外显示管制条。
画布反对拖拽操作，按住 alt 快捷键，能够拖动画布；当元素拖拽到画布外区域时，依然展现管制条，但元素并不会被展现进去，所见即所得。
辅助性能
管制条： 在满足元素缩放、旋转的根底上尽量让其简洁，提供了 2 种款式。
标尺： 标尺与辅助线能够满足咱们更高要求的设计场景。
快捷调整： 图层治理、右键菜单、快捷键。
图层能够直观的定位元素的层级程序，右键菜单提供了罕用的快捷性能，还反对复制、删除等快捷键操作，进步操作效率。
根底元素
字体元素： 字体元素有一般字体、框字体，框字体可调整外边框，主动换行。
根底形态： 有矩形、圆形、三角形、多边形，可间接点击或拖拽增加到画布。
线条元素： 反对箭头、线条元素绘制。
插入元素： 反对插入多种图片类型，图片图片、SVG 元素、SVG 字符串。
自定义素材： 素材在左侧分类展现，可定义图片素材、字体款式素材。
文件性能
数据保留： 反对导出 / 导出 JSON 文件不便存储数据，可自定义设计模板。
图片保留： 可清空画布、预览图片、保留图片文件。
属性设置
根底操作： 所有元素都能够在属性面板调整透明度、坐标、旋转角度。
锁定与组合： 锁定元素后元素将不会收到其余操作影响；可将多个元素组合为一个组元素，也能够将组元素拆分为多个元素。
元素对齐： 单个元素反对绝对于画布的程度、垂直、程度垂直居中，多个元素反对上、下、左、右对齐，程度居中、垂直居中、垂直均匀散布、程度均匀散布性能。
自定义字体：可自定义字体、对齐形式、行高、背景色、下划线、删除线等信息。
突变配置： 突变是设计的重要模式之一，反对为元素、字体设置突变色彩。
边框设置： 反对为元素减少边框款式。
图片操作： 快捷替换、简略滤镜、简单滤镜。
总结
fabric.js 的底层能力十分弱小，这依赖于灵便的底层接口，然而太过灵便也有一个弊病，那就是咱们必须把握更多的细节能力用起来得心应手，这对于开发者来说并不会太轻松。
vue-fabric-editor 我的项目致力于打造一个开箱即用的 web 图片编辑器利用，同时 积淀一个介于 web 图片编辑器利用与 fabric.js 之间的封装层 ，冀望封装层面向开发者设计， 提供更简略的接口，让开发者能够轻松的实现图片利用开发。
邀请
通过技术社区和开源的形式和大家相识是一种很微妙的体验，大部分都是在应用 fabric.js 做我的项目的开发者，咱们组建了 fabric.js 开发者交换群，一起抱团取暖相互支招，一边吐槽文档，一起实现性能，欢送你的退出交换群。
咱们离指标还有很长的间隔，如果你对这件事件感兴趣，真挚的邀请你退出，咱们一起积淀 fabric.js 的最佳实际，你会失去包含不限于以下列表的播种，你只有会简略的 Git 和 Javascript 语法就能够。
- 相熟开源合作形式，成为我的项目贡献者。
- Vue3 + TS 实际，边学边开发。
- fabric.js 开发，边学边开发。
- 入门单元测试，边学边开发。
- 泛滥的 fabric.js 开发者交换。
我本人是第一次搞开源我的项目，感激我的项目的贡献者的帮忙和社区的推动，这是一个很新的我的项目和社区，期待你的退出，心愿咱们一起边走边学，在将来一起成为出名开源我的项目的开发者。
