使用path替代text渲染

Author: flycran

src/gensvg.ts

@@ -1,6 +1,6 @@
 import { startSimulation } from './server/physics'
 import type { ContributionJson, SimulationResult } from './utils'
-import { FONT_SIZE, HEIGHT, SCALE, SIZE, TEXT, TEXT_TOP, WIDTH } from './utils'
+import { HEIGHT, SCALE, SIZE, WIDTH } from './utils'
 
 export interface GensvgOptions {
   username: string
@@ -54,34 +54,25 @@ export async function gensvg({
     })
     .join('\n')
 
-  const textSvg = `
-    <text
-      x="${(WIDTH / 2) * SCALE}"
-      y="${TEXT_TOP * SCALE}"
-      font-size="${FONT_SIZE}"
-      font-family="ArialCustom, sans-serif"
-      text-anchor="middle"
-      dominant-baseline="hanging"
-      fill="black"
-    >
-      ${TEXT}
-    </text>`
+  // 用 path 渲染文字路径，与物理碰撞体坐标对齐
+  // opentype 坐标 → SVG 坐标: svgX = (opentypeX + offsetX) * SCALE, svgY = (HEIGHT - centerY + opentypeY) * SCALE
+  const textPathsSvg = result.textPaths
+    .map(({ pathData }) => `    <path d="${pathData}" fill="black" />`)
+    .join('\n')
+
+  const textGroupSvg = `
+  <g transform="translate(${result.offsetX * SCALE}, ${(HEIGHT - result.centerY) * SCALE}) scale(${SCALE})">
+${textPathsSvg}
+  </g>`
 
   const svg = `<svg
   xmlns="http://www.w3.org/2000/svg"
   width="${svgWidth}"
   height="${svgHeight}"
   viewBox="0 0 ${svgWidth} ${svgHeight}"
 >
-  <style>
-    @font-face {
-      font-family: "ArialCustom";
-      src: url("/assets/ARIAL.ttf") format("truetype");
-    }
-    </style>
 ${contributionsSvg}
-${textSvg}
+${textGroupSvg}
 </svg>`
-
   return svg
 }

src/server/physics.ts

@@ -239,6 +239,8 @@ export async function startSimulation(
       pathData: pathData,
       rect: rect
     })),
-    textTriangles
+    textTriangles,
+    offsetX,
+    centerY
   }
 }

src/utils/index.ts

@@ -38,4 +38,8 @@ export interface SimulationResult {
   contributions: ContributionJson[]
   /** 用户名文字碰撞体的三角网格（世界坐标），用于 web 端渲染 */
   textTriangles: number[][]
+  /** 文字在物理世界中的 X 偏移量 */
+  offsetX: number
+  /** 文字在物理世界中的 Y 偏移量 */
+  centerY: number
 }

src/web/index.ts

@@ -63,21 +63,16 @@ trajectoryRes.contributions.forEach(createContribution)
 //   svg.appendChild(poly)
 // }
 
-// 参考文字：用 SVG <text> 居中渲染，方便对比碰撞体轮廓是否对齐
-const textEl = document.createElementNS('http://www.w3.org/2000/svg', 'text')
-textEl.textContent = TEXT
-textEl.setAttribute('x', `${(WIDTH / 2) * SCALE}`)
-textEl.setAttribute('y', `${TEXT_TOP * SCALE}`)
-textEl.setAttribute('font-size', `${FONT_SIZE}`)
-textEl.setAttribute('font-family', 'ArialCustom, sans-serif')
-textEl.setAttribute('text-anchor', 'middle')
-textEl.setAttribute('dominant-baseline', 'hanging')
-textEl.setAttribute('fill', 'black')
-svg.appendChild(textEl)
-
 const g = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+// 将 opentype 坐标（Y 轴向上）变换到 SVG 坐标（Y 轴向下），与物理体世界坐标对齐
+// 物理世界: worldX = opentypeX + offsetX, worldY = -opentypeY + centerY
+// SVG: svgX = worldX * SCALE, svgY = (HEIGHT - worldY) * SCALE
+// 合并: svgX = (opentypeX + offsetX) * SCALE, svgY = (HEIGHT - centerY + opentypeY) * SCALE
+g.setAttribute(
+  'transform',
+  `translate(${trajectoryRes.offsetX * SCALE}, ${(HEIGHT - trajectoryRes.centerY) * SCALE}) scale(${SCALE})`
+)
 svg.appendChild(g)
-g.style.transform = `scale(${SCALE}) translate(0, ${TEXT_TOP}px)`
 
 trajectoryRes.textPaths.forEach(({ pathData, rect }) => {
   const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')