Merge pull request #14 from LHRUN/feature/0.2.6

feature/0.2.6

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 0.2.6 (2023-09-29)
+
+### Fix
+
+- static file path error
+
 # 0.2.5 (2023-09-24)
 
 ### Fix

package.json

@@ -1,7 +1,7 @@
 {
   "name": "paint-board",
   "private": true,
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/components/info/index.tsx

@@ -5,6 +5,7 @@ import Mask from '@/components/mask'
 import ZhIcon from '../icons/zh'
 import EnIcon from '../icons/en'
 import { BOARD_LOCAL_KEY, storage } from '@/utils/storage'
+import { formatPublicUrl } from '@/utils/common'
 import styles from './index.module.css'
 
 /**
@@ -52,7 +53,11 @@ const Info: React.FC = () => {
             </span>
           </div>
 
-          <img className="mask" width={600} src={t('info.url') || ''} />
+          <img
+            className="mask"
+            width={600}
+            src={formatPublicUrl(t('info.url') || '')}
+          />
         </div>
       </Mask>
     </>

src/utils/common.ts

@@ -175,3 +175,15 @@ export const getRandomInt = (min: number, max: number) => {
 export const getRandomFloat = (min: number, max: number) => {
   return Math.random() * (max - min) + min
 }
+
+/**
+ * 处理public文件夹下的静态文件路径
+ * @param originUrl
+ * @returns publicDir + originUrl
+ */
+export const formatPublicUrl = (originUrl: string) => {
+  if (typeof originUrl === 'string') {
+    return new URL(originUrl, import.meta.url).href
+  }
+  return ''
+}

src/utils/paintBoard.ts

@@ -13,6 +13,7 @@ import { Layer } from './layer'
 import { Cursor, CURSOR_TYPE } from './cursor'
 import { TextElement, textRender } from './element/text'
 import { drawResizeRect, SelectElement } from './select'
+import { formatPublicUrl } from './common'
 
 type MOVE_ELE = FreeDraw | Eraser | null
 
@@ -57,7 +58,7 @@ export class PaintBoard {
   // 选择元素
   select: SelectElement
   // 版本号，主要用于兼容缓存数据
-  version = '0.2.5'
+  version = '0.2.6'
   // 画笔素材加载状态
   loadMaterialState = false
   // 画笔素材
@@ -107,7 +108,7 @@ export class PaintBoard {
       })
       this.context.fillText('loading...', loadPos.x, loadPos.y)
       const crayonImg = new Image()
-      const imgurl = new URL('/pattern/crayon.png', import.meta.url).href
+      const imgurl = formatPublicUrl('/pattern/crayon.png')
       crayonImg.src = imgurl
       crayonImg.onload = () => {
         this.loadMaterialState = true