feat: pixi architecture overview

dribble-njr · Jul 29, 2024 · d5b0b8c · d5b0b8c
1 parent 728fca2
commit d5b0b8c
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/docs/.vuepress/sidebar/frontend.ts b/docs/.vuepress/sidebar/frontend.ts
@@ -131,7 +131,7 @@ export default [
         collapsible: true,
         prefix: 'pixi/',
         icon: 'pixi',
-        children: ['01-quick-start']
+        children: ['01-quick-start', '02-architecture-overview']
       }
     ]
   },
@@ -146,13 +146,7 @@ export default [
         collapsible: true,
         icon: 'basic',
         prefix: 'basic/',
-        children: [
-          '001-modularization',
-          '002-package-manager',
-          '003-tool',
-          '004-project-standards',
-          '005-yeoman'
-        ]
+        children: ['001-modularization', '002-package-manager', '003-tool', '004-project-standards', '005-yeoman']
       },
       {
         text: '打包工具',
@@ -198,11 +192,7 @@ export default [
         collapsible: true,
         icon: '7',
         prefix: 'ssr/',
-        children: [
-          '005-qwik',
-          '006-react-server-component',
-          '007-hydration-is-pure-overhead'
-        ]
+        children: ['005-qwik', '006-react-server-component', '007-hydration-is-pure-overhead']
       }
     ]
   },

diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
@@ -28,7 +28,7 @@ export default hopeTheme(
       end: ['Language', 'Repo', 'Outlook', 'Search']
     },
 
-    iconAssets: '//at.alicdn.com/t/c/font_3926422_csw73zyf1fk.css',
+    iconAssets: '//at.alicdn.com/t/c/font_3926422_hxdmx74z6lw.css',
     iconPrefix: 'iconfont icon-',
 
     repo: 'https://github.com/dribble-njr/blog',

diff --git a/docs/frontend/framework/pixi/02-architecture-overview.md b/docs/frontend/framework/pixi/02-architecture-overview.md
@@ -0,0 +1,21 @@
+---
+title: 架构概述
+date: 2024-07-29
+icon: architecture
+category:
+  - Pixi
+tag:
+  - basic-knowledge
+---
+
+[PixiJS](https://github.com/pixijs/pixijs) 源代码中主要模块的关系如下：
+
+| 模块          | 说明                                                           |
+| ------------- | -------------------------------------------------------------- |
+| Renderer      | 渲染器，PixiJS 系统核心，用于显示场景树，并将其绘制到屏幕上。  |
+| Container     | 容器，主要场景对象，用于创建场景树，如精灵、图形和文本。       |
+| Assets        | 为异步加载资源提供工具。                                       |
+| Ticker        | 基于时钟的周期性回调。游戏更新逻辑将通常在每帧的响应中运行。   |
+| Application   | 一个简单的帮助对象，包装了一个加载器，一个时钟和一个渲染器。   |
+| Events        | PixiJS 支持基于指针的交互，使对象可以被点击，触发悬停事件等。  |
+| Accessibility | 通过我们的显示系统我们拥有了一个丰富的键盘和屏幕阅读器的工具。 |