feat: ✨ 添加 fabric 文档

docs/.vitepress/config.ts

@@ -234,6 +234,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         collapsed: false,
         items: [
           { text: '如何调试 Fabric.js', link: 'Fabric.js/如何调试Fabric' },
+          { text: '基本概念', link: 'Fabric.js/基本概念' },
+          { text: '内部设计', link: 'Fabric.js/内部设计' },
+          { text: '如何实现漫游', link: 'Fabric.js/如何实现漫游' },
         ]
       },
       {

docs/guide/Fabric.js/内部设计.md

@@ -0,0 +1,34 @@
+# 内部设计
+
+## 使用场景上看
+
+从使用场景上看，Fabric.js 通过对象的形式来创建图形 （源码上也充满了面向对象设计的身影）
+
+对于使用者而言，不需要关心底层 Canvas 是如何实现的，只需要关心如何创建这些图像对象即可。
+
+## Canvas 开发原理
+
+Canvas 开发的本质其实很简单，可以想象下这种少儿画板：
+
+![初始状态图](./../../public/assets/fabric/1.png)
+
+Canvas 的绘制其实就是在不断在画布上绘制图形，然后擦出的过程。
+
+## Fabric.js 源码解析
+
+## 基本原理
+
+
+## 模块结构图
+
+
+
+
+// 这里是一张设计图
+
+
+
+
+
+## 参考
+- https://keelii.com/2021/05/09/fabricjs-internals

docs/guide/Fabric.js/基本概念.md

@@ -0,0 +1,39 @@
+---
+aside: false
+outline: false
+---
+
+# 简介
+
+Fabric.js 是一个强大而简单的 Canvas 画布库
+
+可以提供简单的 API 来创建和编辑复杂的图形
+
+# 基本使用
+
+## 创建画布
+
+
+```html
+<!-- HTML -->
+<canvas id="canvas"></canvas>
+```
+
+```js
+// JavaScript
+const canvas = new fabric.Canvas('canvas');
+```
+
+## 添加图形到画布
+
+```js
+canvas.add(new fabric.Rect({ left: 100, top: 100, fill: 'red', width: 100, height: 100 }));
+```
+
+通过案例可以感受到，如果你需要用 HTML Canvas 来绘制一些东西，并且这些东西可以响应用户的交互，比如：拖动、变形、旋转等 操作。 那用 fabric.js 是非常合适的，因为它内部不仅实现了 Canvas 对象模型，还将一些常用的交互操作封装好了，可以说是开箱即用。
+
+<Container url="https://enson0131.github.io/mini-fabric-whiteboard/" />
+
+<script setup>
+    import Container from './../../../src/components/container.vue'
+</script>

src/components/container.vue

@@ -34,6 +34,10 @@ defineProps({
   height: 1000px;
 }
 
+::-webkit-scrollbar {
+        display: none;
+}
+
 .sc-gtssRu {
   display: none;
 }