Merge pull request #43 from ggchivalrous/feat/v1.4

fix: 修复文字不对齐问题

package.json

@@ -1,6 +1,6 @@
 {
   "name": "yiyin",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "license": "MIT",
   "type": "module",
   "main": "dist-electron/main/index.js",

web/mask/app.svelte

@@ -417,9 +417,9 @@
     }
 
     ctx.font = createTextFont(maxFontOpt);
-    ctx.textBaseline = 'middle';
+    ctx.textBaseline = 'hanging';
     const textInfo = ctx.measureText(totalText);
-    can.height = opts.height || Math.round(Math.max(textInfo.actualBoundingBoxAscent + textInfo.actualBoundingBoxDescent + 50, maxFontOpt.size));
+    can.height = opts.height || Math.ceil(Math.max(textInfo.actualBoundingBoxAscent + textInfo.actualBoundingBoxDescent + 50, maxFontOpt.size));
 
     can.width = textList.reduce((n, i, j) => {
       if (i === undefined || !i) return n;
@@ -438,10 +438,10 @@
         }
 
         ctx.font = font;
-        ctx.textBaseline = 'middle';
+        ctx.textBaseline = 'hanging';
         const info = ctx.measureText(value);
-        const h = Math.round(info.actualBoundingBoxAscent + info.actualBoundingBoxDescent);
-        const y = Math.round(h / 2 + (can.height - h) / 2);
+        const h = Math.ceil(info.actualBoundingBoxAscent + info.actualBoundingBoxDescent);
+        const y = roundDecimalPlaces((info.actualBoundingBoxAscent + (can.height - h) / 2));
         textInfoList.push({
           font,
           value,
@@ -453,10 +453,11 @@
         });
         n += info.width;
       } else {
-        const canHeight = i.param?.use ? i.param?.size || (can.height - 50) : (can.height - 50);
-        const h = Math.round(canHeight);
-        const y = Math.round((can.height - h) / 2);
-        const w = Math.round(h * (i.value.width / i.value.height));
+        const fontOpt = mergeFontOpt(opts, i.param);
+        const h = Math.ceil(fontOpt.size);
+        const y = roundDecimalPlaces((can.height - h) / 2);
+        const w = Math.ceil(h * (i.value.width / i.value.height));
+
         textInfoList.push({
           font: defFont,
           value: i.value,
@@ -475,7 +476,7 @@
       if (info.type === 'text') {
         ctx.font = info.font;
         ctx.fillStyle = opts.color || '#000';
-        ctx.textBaseline = 'middle';
+        ctx.textBaseline = 'hanging';
         ctx.fillText(info.value as string, info.x, info.y);
       } else {
         ctx.drawImage(info.value as HTMLImageElement, info.x, info.y, info.w, info.h);
@@ -506,6 +507,13 @@
 
     return cpDef;
   }
+
+  function roundDecimalPlaces(n: number, place = 2) {
+    const multiplier = 10 ** place;
+    const adjustedNumber = n * multiplier;
+    const roundedNumber = Math.round(adjustedNumber) / multiplier;
+    return roundedNumber;
+  }
 </script>
 
 <canvas bind:this={canvas} />

web/store/static.ts

@@ -14,16 +14,16 @@ staticInfo.subscribe(() => {
     genFileName('canon-w.svg'),
     genFileName('fujifilm-b.svg'),
     genFileName('fujifilm-w.svg'),
-    genFileName('hasu-b.svg'),
-    genFileName('hasu-w.svg'),
+    genFileName('hasselblad-b.svg'),
+    genFileName('hasselblad-w.svg'),
     genFileName('leica-b.svg'),
     genFileName('leica-w.svg'),
-    genFileName('lumix-b.svg'),
-    genFileName('lumix-w.svg'),
+    genFileName('panasonic-b.svg'),
+    genFileName('panasonic-w.svg'),
     genFileName('nikon-b.svg'),
     genFileName('nikon-w.svg'),
-    genFileName('olpmpus-b.svg'),
-    genFileName('olpmpus-w.svg'),
+    genFileName('olympus-b.svg'),
+    genFileName('olympus-w.svg'),
     genFileName('pentax-b.svg'),
     genFileName('pentax-w.svg'),
     genFileName('ricoh-b.svg'),
@@ -34,5 +34,7 @@ staticInfo.subscribe(() => {
     genFileName('songdian-w.svg'),
     genFileName('sony-b.svg'),
     genFileName('sony-w.svg'),
+    genFileName('dji-b.svg'),
+    genFileName('dji-w.svg'),
   ]);
 });