更新演示

dromara · Nov 20, 2023 · 0ec3a0c · 0ec3a0c
1 parent 9f94ade
commit 0ec3a0c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 ![image](/docs/example.png)
 
-![background](https://file.yft.design/api/v1/buckets/yft-design/objects/download?preview=true&prefix=YmFja2dyb3VuZC5naWY=)
+![background](/docs/background.gif)
 
 # 🚀 项目运行
 ```
@@ -15,6 +15,37 @@ npm run dev
 npm run build
 ```
 
+# 📖 项目结构
+```
+├── app                           // 静态资源
+│   ├── fabricCanvas              // FabricCanvas
+│   ├── fabricControls            // 选择器
+│   ├── fabricRuler               // 标尺
+│   ├── fabricTool                // 拖动
+│   ├── guideLines                // 辅助线
+│   ├── hoverBorders              // 预选择
+│   └── wheelScroll               // 缩放
+├── assets                        // 静态资源
+│   ├── fonts                     // 在线字体文件
+│   └── styles                    // 样式
+├── components                    // 与业务逻辑无关的通用组件
+├── configs                       // 配置文件，如：颜色，字体。
+├── hooks                         // 供多个组件（模块）使用的 hooks 方法
+├── extension                     // 自定义fabirc对象
+│   ├── controls                  // 裁剪图片controls
+│   ├── mixins                    // 裁剪图片mixins
+│   └── object                    // 自定义元素对象
+├── mocks                         // mocks 数据
+├── plugins                       // 自定义的 Vue 插件
+├── types                         // 类型定义文件
+├── store                         // Pinia store，参考：https://pinia.vuejs.org/
+├── utils                         // 通用的工具方法
+├── views                         // 业务组件目录。
+│    ├── Canvas                   // 编辑器对象
+│    └── Editor                   // 编辑器模块
+└── worker                        // web worker
+```
+
 # 📚 功能列表
 ### 基础功能
 - 历史记录（撤销、重做）

diff --git a/src/app/fabricCanvas.ts b/src/app/fabricCanvas.ts
@@ -1,14 +1,14 @@
 import { useMainStore, useTemplatesStore } from '@/store'
 import { CanvasElement } from '@/types/canvas'
-import { Canvas, Object } from 'fabric'
+import { Canvas, Object as FabricObject } from 'fabric'
 import { shallowRef } from 'vue'
 import { toRef } from './attribute/toRef'
 import { check } from '@/utils/check'
 import { nonid } from '@/utils/common'
 
 export class FabricCanvas extends Canvas {
 
-  public activeObject = shallowRef<Object>()
+  public activeObject = shallowRef<FabricObject>()
 
   constructor(el: string | HTMLCanvasElement, options?: any) {
     super(el, options)
@@ -23,11 +23,11 @@ export class FabricCanvas extends Canvas {
 
   public set _activeObject(value) {
     const mainStore = useMainStore()
-    mainStore.setCanvasObject(value as CanvasElement)
+    mainStore.setCanvasObject(value as FabricObject)
     this.activeObject.value = value
   }
 
-  override add(...objects: Object[]): number {
+  override add(...objects: FabricObject[]): number {
     return super.add(
       ...objects.map((obj) => {
         this.setDefaultAttr(obj)
@@ -36,7 +36,7 @@ export class FabricCanvas extends Canvas {
     )
   }
 
-  override insertAt(index: number, ...objects: Object[]): number {
+  override insertAt(index: number, ...objects: FabricObject[]): number {
     return super.insertAt(
       index,
       ...objects.map((obj) => {
@@ -46,7 +46,7 @@ export class FabricCanvas extends Canvas {
     )
   }
 
-  private setDefaultAttr(target: Object) {
+  private setDefaultAttr(target: FabricObject) {
     // 添加name
     if (!target.name) {
       target.set({name: target.type})

diff --git a/src/app/guideLiles.ts → src/app/guideLines.ts b/src/app/guideLiles.ts → src/app/guideLines.ts
diff --git a/src/views/Canvas/useCanvas.ts b/src/views/Canvas/useCanvas.ts
@@ -4,7 +4,7 @@ import { useFabricStore } from '@/store/modules/fabric'
 import { watch } from 'vue'
 import { useElementBounding } from '@vueuse/core'
 import { FabricTool } from '@/app/fabricTool'
-import { GuideLines } from '@/app/guideLiles'
+import { GuideLines } from '@/app/guideLines'
 import { HoverBorders } from '@/app/hoverBorders'
 import { WheelScroll } from '@/app/wheelScroll'
 import { FabricRuler } from '@/app/fabricRuler'