模板工程升级修改

client/js/vendor/gameabc.min.js

@@ -1,3 +1,44 @@
+/* ============================================================================
+ * GAMEABC_TEXT —— 文字渲染统一层（本地补丁，见 js/vendor/README-gameabc-patches.md）
+ *
+ * 取代原先写在 js/00_Surface/12_Logic.js 里对 CanvasRenderingContext2D.prototype
+ * 的猴子补丁，把「字体族 / 字重 / 测宽 / 竖直锚点」四件事收敛到引擎内一处。
+ *
+ * 1) 字体族与字重：原写法 'lighter Npx Arial'，Arial 无中文字形，中文走回退字体又被
+ *    weight=100 拉细，导致中英粗细不一；另有三处写成 'Npx bold san-serif'（拼写错误，
+ *    应为 sans-serif），实际落到默认衬线字体。统一为 500 字重 + 中文友好字体族。
+ *
+ * 2) 测宽同源：ifast_measureText 必须与实际绘制用同一 font 串，否则依赖测宽做居中 /
+ *    换行的地方会有约 3% 的横向偏差。现在两者都走 GAMEABC_TEXT.font()。
+ *
+ * 3) 竖直锚点：Canvas 的 textBaseline="top" 锚点 = 基线上移「首个可用字体的 ascent」，
+ *    但 WebKit（iOS 全部浏览器 + WKWebView）取 CoreText 原始 hhea ascent，
+ *    Blink（PC Chrome/Edge、安卓 WebView）取归一化 typo ascent —— 同字同号相差 0.125em；
+ *    iOS 上首个可用字体是 PingFang SC（ascent 1.06em）会把差距放大到 0.20em，
+ *    表现为「iOS 文字整体偏下」。alphabetic 是唯一不依赖度量解释的锚点，
+ *    因此这里改为固定用 alphabetic，由本层自算基线位置。
+ *
+ * TOP_TO_BASELINE = 0.845 是实测值：让 WebKit 的渲染结果与改造前 Blink 的外观
+ * 在 24 / 40 / 64px 三档下逐像素对齐（最大偏差 1px），即「iOS 向网页/安卓看齐」，
+ * 而不是三端一起位移。调整它会整体上下移动所有文字。
+ * ========================================================================== */
+var GAMEABC_TEXT = {
+    FAMILY: '"Microsoft YaHei", "PingFang SC", Arial, sans-serif',
+    WEIGHT: '500',
+    TOP_TO_BASELINE: 0.845,
+    font: function(size) {
+        return this.WEIGHT + ' ' + size + 'px ' + this.FAMILY;
+    },
+    /* 绘制前调用：设好字体并把锚点固定为 alphabetic */
+    prepare: function(ctx, size) {
+        ctx.font = this.font(size);
+        ctx.textBaseline = 'alphabetic';
+    },
+    /* 把原先「以文字块顶部为锚点的 y」换算成 alphabetic 基线的 y */
+    baseline: function(y, size) {
+        return y + this.TOP_TO_BASELINE * size;
+    }
+};
 var gameabc_senderror = 0;
 var gameabc = function() {
     function s(SIt2, L$qig3, Qf4) {
@@ -455,7 +496,7 @@ function dfwtime200() {
         return 0;
     }
     ;var dc = ifast_getdc();
-    dc.font = 'lighter ' + obj.h + 'px Arial';
+    dc.font = GAMEABC_TEXT.font(obj.h);
     if (!caption) {
         caption = obj.caption;
     }
@@ -2120,10 +2161,9 @@ function GameObjectManager() {
             var yyyy;
             var uu = gameabc_face.loglist.length - 1;
             for (yyyy = uu; yyyy >= 0; yyyy--) {
-                this.backBufferContext2D.textBaseline = "top";
+                GAMEABC_TEXT.prepare(this.backBufferContext2D, 32);
                 this.backBufferContext2D.fillStyle = "red";
-                this.backBufferContext2D.font = 32 + 'px' + ' bold san-serif';
-                this.backBufferContext2D.fillText(gameabc_face.loglist[yyyy], 10, 80 + (uu - yyyy) * 32);
+                this.backBufferContext2D.fillText(gameabc_face.loglist[yyyy], 10, GAMEABC_TEXT.baseline(80 + (uu - yyyy) * 32, 32));
             }
             ;
         }
@@ -2135,7 +2175,10 @@ function GameObjectManager() {
         }
         ;if (gameabc_face.obj.caption != "") {
             this.backBufferContext2D.fillStyle = "white";
-            this.backBufferContext2D.font = parseInt(24 * this.backBuffer.width / 480) + "px" + ' bold san-serif';
+            /* 这一处原本就没有设过 textBaseline，实际用的是默认 alphabetic；
+               这里显式写死以免依赖上一次绘制在 context 上的残留状态，y 保持不变。 */
+            this.backBufferContext2D.font = GAMEABC_TEXT.font(parseInt(24 * this.backBuffer.width / 480));
+            this.backBufferContext2D.textBaseline = 'alphabetic';
             this.backBufferContext2D.fillText(gameabc_face.obj.caption, parseInt(this.backBuffer.width / 2) - 50, parseInt(this.backBuffer.height / 2) + 100);
         }
         ;if (gameabc_face.checkmustdraw() == 0) {
@@ -2641,17 +2684,16 @@ function ifast_float(f, r) {
     ;
 }
 ;function ifast_mydrawtext(spid, recid, sp_x, sp_y, sp_w, sp_h) {
-    gameabc_face.dc.textBaseline = "top";
+    GAMEABC_TEXT.prepare(gameabc_face.dc, sp_h);
     gameabc_face.dc.fillStyle = gameabc_GameTxt.GameTxtList[recid].Color;
-    gameabc_face.dc.font = sp_h + 'px' + ' bold san-serif';
     var caption = gameabc_GameTxt.GameTxtList[recid].Text;
     if (spid <= 0) {
-        gameabc_face.dc.fillText(caption, sp_x, sp_y, sp_w);
+        gameabc_face.dc.fillText(caption, sp_x, GAMEABC_TEXT.baseline(sp_y, sp_h), sp_w);
         return;
     }
     ;var obj = ifast_getobj(spid);
     if (typeof (obj) == "object") {
-        gameabc_face.dc.fillText(caption, obj.x + sp_x, obj.y + sp_y, sp_w);
+        gameabc_face.dc.fillText(caption, obj.x + sp_x, GAMEABC_TEXT.baseline(obj.y + sp_y, sp_h), sp_w);
     }
     ;
 }
@@ -5290,9 +5332,8 @@ function gameabc_imgtxt() {
         }
         ;gameabc_save(this, context);
         gameabc_charge(this, context);
-        context.textBaseline = "top";
+        GAMEABC_TEXT.prepare(context, this.h);
         context.fillStyle = gameabc_GameTxt.GameTxtList[this.frame].Color;
-        context.font = 'lighter ' + this.h + 'px Arial';
         this.caption = gameabc_GameTxt.GameTxtList[this.frame].Text;
         if (this.uidata.GameTxtStyle == 0) {
             gameabc_drawtext = this.caption;
@@ -5300,18 +5341,17 @@ function gameabc_imgtxt() {
             gameabc_drawtext = gameabc_password.substring(0, this.caption.length + 1);
         }
         ;if (this.w > 0) {
-            context.fillText(gameabc_drawtext, this.x - xScroll, this.y - yScroll, this.w);
+            context.fillText(gameabc_drawtext, this.x - xScroll, GAMEABC_TEXT.baseline(this.y - yScroll, this.h), this.w);
         } else {
-            context.fillText(gameabc_drawtext, this.x - xScroll, this.y - yScroll);
+            context.fillText(gameabc_drawtext, this.x - xScroll, GAMEABC_TEXT.baseline(this.y - yScroll, this.h));
         }
         ;gameabc_restore(this, context);
     }
 }
 ;gameabc_imgtxt.prototype = new VisualGameObject;
 function draw2(obj, context, ctx) {
-    context.textBaseline = "top";
     var h = obj.h * iui.ratio;
-    context.font = 'lighter ' + h + 'px Arial';
+    GAMEABC_TEXT.prepare(context, h);
     var w = context.measureText(obj.caption).width;
     context.clearRect(0, 0, w, h);
     if (obj.uidata.BackColorA != 0) {
@@ -5319,7 +5359,7 @@ function draw2(obj, context, ctx) {
         context.fillRect(0, 0, w, h);
     }
     ;context.fillStyle = obj.uidata.FontColor;
-    context.fillText(obj.caption, 0, 0);
+    context.fillText(obj.caption, 0, GAMEABC_TEXT.baseline(0, h));
     ctx.drawImage(iui.test, 0, 0, w, h, obj.x, obj.y, w / iui.ratio, obj.h);
 }
 ;function gameabc_txt() {
@@ -5340,13 +5380,12 @@ function draw2(obj, context, ctx) {
         if (this.uidata.GameTxtStyle > 0) {
             return;
         }
-        ;context.textBaseline = "top";
+        ;GAMEABC_TEXT.prepare(context, this.h);
         if (this.uidata.BackColorA != 0) {
             context.fillStyle = this.uidata.BackColor;
             context.fillRect(this.x, this.y, this.w, this.h);
         }
         ;context.fillStyle = this.uidata.FontColor;
-        context.font = 'lighter ' + this.h + 'px Arial';
         if (this.caption.indexOf("\n") > 0) {
             var strs = new Array();
             strs = this.caption.split("\n");
@@ -5355,11 +5394,11 @@ function draw2(obj, context, ctx) {
                 context.fillRect(this.x, this.y, this.w, this.h * strs.length);
             }
             ;for (var i = 0; i < strs.length; i++) {
-                context.fillText(strs[i], this.x - xScroll, this.y - yScroll + this.h * i);
+                context.fillText(strs[i], this.x - xScroll, GAMEABC_TEXT.baseline(this.y - yScroll + this.h * i, this.h));
             }
             ;return;
         }
-        ;context.fillText(this.caption, this.x - xScroll, this.y - yScroll);
+        ;context.fillText(this.caption, this.x - xScroll, GAMEABC_TEXT.baseline(this.y - yScroll, this.h));
     }
 }
 ;gameabc_txt.prototype = new VisualGameObject;