更新标尺单位换算

dromara · Dec 5, 2023 · b99d657 · b99d657
1 parent 54c81f9
commit b99d657
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 # yft-design
-一幅图设计，使用 Vue3 + TypeScript + Fabric.js + Element-Plus，支持 文字、图片、形状、线条、二维码 、条形码几种最常用的元素类型，每一种元素都拥有高度可编辑能力，缩略图显示，模板，支持导出json，svg, image文件。  
+基于fabric.js的图片设计，使用 Vue3 + TypeScript + Fabric.js + Element-Plus，支持 文字、图片、形状、线条、二维码 、条形码几种最常用的元素类型，每一种元素都拥有高度可编辑能力，缩略图显示，模板，支持导出json，svg, image文件。  
 <b>快速体验：[https://yft.design](https://yft.design)</b>  
 <b>体验Demo：[https://dromara.org/yft-design](https://dromara.org/yft-design)</b>
 

diff --git a/public/lib/color/shading.json → public/resource/color/shading.json b/public/lib/color/shading.json → public/resource/color/shading.json
diff --git a/src/api/color/index.ts b/src/api/color/index.ts
@@ -2,7 +2,7 @@ import request from '@/utils/request';
 import { AxiosPromise } from 'axios';
 export function getColorShading(): any {
   return request({
-    url: 'lib/color/shading.json',
+    url: 'resource/color/shading.json',
     method: 'get',
   });
 }
diff --git a/src/app/fabricRuler.ts b/src/app/fabricRuler.ts
@@ -3,10 +3,12 @@ import { Keybinding } from './keybinding'
 import { Disposable } from '@/utils/lifecycle'
 import { computed, watchEffect } from 'vue'
 // import { useThemes } from '@/hooks/useThemes'
+import { DesignUnitMode } from '@/configs/background'
 import { PiBy180 } from '@/utils/common'
 import { TAxis, Canvas } from 'fabric'
 import { useMainStore } from '@/store'
 import { storeToRefs } from 'pinia'
+import { px2mm } from '@/utils/image'
 
 type Rect = { left: number; top: number; width: number; height: number }
 
@@ -51,6 +53,11 @@ export interface RulerOptions {
    * 高亮颜色
    */
   highlightColor?: string
+  /**
+   * 高亮颜色
+   */
+  unitName: string
+
 }
 
 export type HighlightRect = {skip?: TAxis} & Rect
@@ -83,32 +90,36 @@ export class FabricRuler extends Disposable {
 
     // const { isDark } = useThemes()
     const isDark = false
-    const { rulerShow } = storeToRefs(useMainStore())
-    // watchEffect(() => {
-
-    this.options = {
-      ...this.options,
-      ...(isDark 
-        ? {
-            backgroundColor: '#242424',
-            borderColor: '#555',
-            highlightColor: '#165dff3b',
-            textColor: '#ddd',
-          }
-        : {
-            backgroundColor: '#fff',
-            borderColor: '#ccc',
-            highlightColor: '#165dff3b',
-            textColor: '#444',
-          }),
-    }
-    //   this.enabled = rulerShow.value
-    //   this.render({ ctx: this.canvas.contextContainer })
-    // })
-    computed(() => {
+
+    const { rulerShow, unitMode } = storeToRefs(useMainStore())
+    watchEffect(() => {
+      const unitName = DesignUnitMode.filter(ele => ele.id === unitMode.value)[0].name
+      this.options = {
+        ...this.options,
+        ...(isDark 
+          ? {
+              backgroundColor: '#242424',
+              borderColor: '#555',
+              highlightColor: '#165dff3b',
+              textColor: '#ddd',
+              unitName: unitName,
+            }
+          : {
+              backgroundColor: '#fff',
+              borderColor: '#ccc',
+              highlightColor: '#165dff3b',
+              textColor: '#444',
+              unitName: unitName,
+            }),
+      }
       this.enabled = rulerShow.value
       this.render({ ctx: this.canvas.contextContainer })
     })
+    // computed(() => {
+    //   this.enabled = rulerShow.value
+    //   this.options.unit = unitName
+    //   this.render({ ctx: this.canvas.contextContainer })
+    // })
 
     this.canvasEvents = {
       'after:render': this.render.bind(this),
@@ -177,7 +188,7 @@ export class FabricRuler extends Disposable {
     })
 
     this.darwText(ctx, {
-      text: 'px',
+      text: this.options.unitName,
       left: ruleSize / 2,
       top: ruleSize / 2,
       align: 'center',
@@ -254,8 +265,10 @@ export class FabricRuler extends Disposable {
     // 标尺文字显示
     for (let pos = 0; pos + startOffset <= unitLength; pos += gap) {
       const position = (startOffset + pos) * zoom
-      const textValue = (startValue + pos).toString()
-
+      let textValue = (startValue + pos).toString()
+      if (this.options.unitName === 'mm') {
+        textValue = px2mm(startValue + pos).toFixed(0)
+      }
       const [left, top, angle] = isHorizontal ? [position + 6, padding, 0] : [padding, position - 6, -90]
 
       this.darwText(ctx, {

diff --git a/src/app/guideLines.ts b/src/app/guideLines.ts
@@ -2,7 +2,6 @@
 import { StaticCanvas, Canvas, ActiveSelection, Object as FabricObject, Group, Point, util } from 'fabric'
 import { Disposable } from '@/utils/lifecycle'
 import { check } from '@/utils/check'
-import { CanvasElement } from '@/types/canvas'
 
 type VerticalLineCoords = {
   x: number

diff --git a/src/store/modules/main.ts b/src/store/modules/main.ts
@@ -57,7 +57,7 @@ export const useMainStore = defineStore('main', {
     activeElementIdList: [], // 被选中的元素ID集合，包含 handleElementId
     handleElementId: '', // 正在操作的元素ID
     sizeMode: 0,  // 模板样式
-    unitMode: 0,
+    unitMode: 0,  // 单位
     gridColorSelf: [[]], // 自定义颜色
     databaseId, // 标识当前应用的indexedDB数据库ID
     selectedTemplatesIndex: [],