From dd84aa127069205a66fc27667bf9da414173594f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A7=A6=E5=B0=91=E5=8D=AB?= <nihaojob@163.com>
Date: Wed, 21 Feb 2024 12:55:57 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=95=99=E7=A8=8B=E8=B5=84=E6=BA=90):=20?=
 =?UTF-8?q?=E6=96=87=E5=AD=97=E4=B8=8E=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vitepress/config.mts |  8 ++++++++
 learning/article.md   | 45 ++++++++++++++++++++++++++++++++++++++++++
 learning/demo.md      | 46 +++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 99 insertions(+)
 create mode 100644 learning/article.md
 create mode 100644 learning/demo.md

diff --git a/.vitepress/config.mts b/.vitepress/config.mts
index eb4bd83..53b70e5 100644
--- a/.vitepress/config.mts
+++ b/.vitepress/config.mts
@@ -75,6 +75,14 @@ export default defineConfig({
         items: [
           { text: '简介', link: '/pro/index' },
         ]
+      },
+      {
+        text: '🎁 fabric.js教程资源',
+        collapsed: false,
+        items: [
+          { text: '入门文章', link: '/learning/article' },
+          { text: '在线示例', link: '/learning/demo' },
+        ]
       }
     ],
     editLink: {
diff --git a/learning/article.md b/learning/article.md
new file mode 100644
index 0000000..3cc8204
--- /dev/null
+++ b/learning/article.md
@@ -0,0 +1,45 @@
+<!--
+ * @Author: 秦少卫
+ * @Date: 2024-02-21 10:42:51
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-02-21 12:55:35
+ * @Description: file content
+-->
+<!--
+ * @Author: 秦少卫
+ * @Date: 2023-12-25 22:39:37
+ * @LastEditors: 秦少卫
+ * @LastEditTime: 2024-02-06 14:45:03
+ * @Description: file content
+-->
+
+# 入门文章
+
+### 官网
+- [官网文章8篇](http://fabricjs.com/articles/)
+
+
+### 作者
+- [使用fabric.js 快速开发一个图片编辑器](https://juejin.cn/post/7155040639497797645)
+- [fabric.js开发图片编辑器的细节实现](https://juejin.cn/post/7199849226745430076)
+- [fabric.js开发图片编辑器可以实现哪些功能？多图](https://juejin.cn/post/7222141882515128375)
+- [我的开源项目与开源经历分享](https://juejin.cn/post/7224765991896121401)
+- [Canvas库 fabric.js可以实现哪些功能？ 动图介绍](https://juejin.cn/post/7336743827827015731)
+
+### 掘金
+- [每一个用到canvas的小伙伴都应该了解的fabric.js](https://juejin.cn/post/6993801903121367048)
+- [Canvas实用库Fabric.js使用手册](https://juejin.cn/post/6844903764910931976)
+- [使用Fabric.js玩转canvas](https://juejin.cn/post/6844903773945462792)
+- [使用fabric.js简简单单实现一个画板](https://juejin.cn/post/6979135887485435918)
+- [使用fabric从零开始打造互动白板（一）](https://juejin.cn/post/7221348552513077305)
+- [没有轮子就自己造一个，用 fabric 写一个标尺](https://juejin.cn/post/7274887814579388416)
+- [psd文件转fabric.js画布模板json的实现原理](https://juejin.cn/post/7304991873416740900)
+
+### 尤水就下
+- [源码实现专栏](https://juejin.cn/column/7065163742828298276)
+- [手写fabric.js视频教程](https://space.bilibili.com/478241186/channel/collectiondetail?sid=484629)
+
+### 德育处主任
+- [Fabric.js 从入门到________](https://juejin.cn/post/7026941253845516324)
+- [掘金主页](https://juejin.cn/user/2673620576140030/posts)
+- [中文教程](https://k21vin.gitee.io/fabric-js-doc/)
diff --git a/learning/demo.md b/learning/demo.md
new file mode 100644
index 0000000..be9d569
--- /dev/null
+++ b/learning/demo.md
@@ -0,0 +1,46 @@
+
+# 在线示例
+
+### fabric.js事件demo
+<iframe src="https://code.juejin.cn/pen/7337891170330902566" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### fabric.js文字属性修改
+<iframe src="https://code.juejin.cn/pen/7337894618715848731" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### fabric.js箭头绘制
+<iframe src="https://code.juejin.cn/pen/7337896302078296091" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### 缩略图
+<iframe src="https://code.juejin.cn/pen/7337896705910095872" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### 网格吸附
+<iframe src="https://code.juejin.cn/pen/7337898949971279922" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### 环形文字
+<iframe src="https://code.juejin.cn/pen/7337900744736407562" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+
+### 汽车模型展示
+<iframe src="https://code.juejin.cn/pen/7337877762679504936" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+
+### 图片区域缩放
+<iframe src="https://code.juejin.cn/pen/7337882595402711067" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### 路径编辑
+<iframe src="https://code.juejin.cn/pen/7337882682053328946" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### 元素拖拽连线
+<iframe src="https://code.juejin.cn/pen/7337887726295613477" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+
+### 矩形数据标注
+<iframe src="https://code.juejin.cn/pen/7337893311347097609" width="100%" height="450" border="0" style="border: none;"></iframe>
+
+### GSAP animation 动画
+<iframe src="https://code.juejin.cn/pen/7337906796184469542" width="100%" height="450" border="0" style="border: none;"></iframe>
+<!-- ### 未整理 -->
+<!-- https://codepen.io/HanksOAO/pen/NWoMYZj
+https://codepen.io/wipeautcrafter/details/rNrjoNE
+https://codepen.io/wipeautcrafter/pen/VwdvVBz
+https://codepen.io/jcar-the-builder/pen/YzgeVNX -->
\ No newline at end of file