使用path代替text渲染

Author: flycran

src/app.ts

@@ -1,9 +1,9 @@
 import { gensvg } from './gensvg'
 import { startSimulation } from './server/physics'
-import { TEXT } from './utils'
+import { GITHUB_ID, TEXT } from './utils'
 import pageApp from './web/index.html'
 
-const res = await startSimulation('yyx990803')
+const res = await startSimulation(GITHUB_ID, TEXT)
 
 Bun.serve({
   port: 3000,
@@ -17,7 +17,7 @@ Bun.serve({
       return Response.json(res)
     },
     '/svg': async () => {
-      const svg = await gensvg({ name: 'Platane' })
+      const svg = await gensvg({ username: GITHUB_ID, text: TEXT })
       return new Response(svg, {
         headers: { 'Content-Type': 'image/svg+xml' }
       })

src/gensvg.ts

@@ -1,9 +1,10 @@
 import { startSimulation } from './server/physics'
 import type { ContributionJson, SimulationResult } from './utils'
-import { HEIGHT, SCALE, SIZE, WIDTH } from './utils'
+import { FONT_SIZE, HEIGHT, SCALE, SIZE, TEXT, TEXT_TOP, WIDTH } from './utils'
 
 export interface GensvgOptions {
-  name: string
+  username: string
+  text: string
 }
 
 /**
@@ -13,9 +14,11 @@ export interface GensvgOptions {
  * @param options - 包含 GitHub 用户名
  * @returns 完整的 SVG 字符串
  */
-export async function gensvg(options: GensvgOptions): Promise<string> {
-  const { name } = options
-  const result: SimulationResult = await startSimulation(name)
+export async function gensvg({
+  username,
+  text
+}: GensvgOptions): Promise<string> {
+  const result: SimulationResult = await startSimulation(username, text)
 
   const svgWidth = WIDTH * SCALE
   const svgHeight = HEIGHT * SCALE
@@ -44,20 +47,40 @@ export async function gensvg(options: GensvgOptions): Promise<string> {
       attributeType="XML"
       type="translate"
       values="${values}"
-      dur="${result.stepCount * 16}ms"
+      dur="${result.stepCount * 8}ms"
       fill="freeze"
     />
   </g>`
     })
     .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>`
+
   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}
 </svg>`
 
   return svg

src/server/parseTextPath.ts

@@ -1,7 +1,7 @@
 import earcut from 'earcut'
 import opentype from 'opentype.js'
 import { pointsOnPath } from 'points-on-path'
-import { FONT_SIZE, SCALE } from '../utils'
+import { FONT_SIZE, SCALE, TextPathResult } from '../utils'
 
 function svgPathToRapierTrimesh(path: string, scale = 1, tolerance = 1) {
   // pointsOnPath returns Point[][] — one array per sub-path, flatten them
@@ -27,26 +27,15 @@ const font = opentype.parse(
   await Bun.file('src/assets/ARIAL.ttf').arrayBuffer()
 )
 
-export interface TextPathResult {
-  paths: {
-    vertices: Float32Array
-    indices: Uint32Array
-  }
-  rect: {
-    x: number
-    y: number
-    width: number
-    height: number
-  }
-}
-
 export function getTextPaths(text: string): TextPathResult[] {
   const paths = font.getPaths(text, 0, 0, FONT_SIZE / SCALE)
 
   return paths.map((path) => {
     const bbox = path.getBoundingBox()
+    const pathData = path.toPathData(2)
     return {
-      paths: svgPathToRapierTrimesh(path.toPathData(2)),
+      paths: svgPathToRapierTrimesh(pathData),
+      pathData: pathData,
       rect: {
         x: bbox.x1,
         y: bbox.y1,

src/server/physics.ts

@@ -11,6 +11,7 @@ import {
   INTERVAL,
   SIZE,
   SimulationResult,
+  TEXT_TOP,
   WIDTH
 } from '../utils'
 import {
@@ -66,15 +67,13 @@ export class Contribution implements ContributionJson {
 async function createWord() {
   await init()
   // 重力
-  const world = new World({ x: 0.0, y: -16 })
-  world.lengthUnit = 10
+  const world = new World({ x: 0.0, y: -30 })
+  world.lengthUnit = 16
 
   // 地面
   world.createCollider(
     ColliderDesc.cuboid(WIDTH, 1),
-    world.createRigidBody(
-      RigidBodyDesc.fixed().setCcdEnabled(true).setTranslation(0, -1)
-    )
+    world.createRigidBody(RigidBodyDesc.fixed().setTranslation(0, -1))
   )
   // 墙壁
   world.createCollider(
@@ -93,36 +92,61 @@ async function createWord() {
 const VELOCITY_THRESHOLD = 1e-3
 
 export async function startSimulation(
-  username: string
+  username: string,
+  text: string = username
 ): Promise<SimulationResult> {
   const world = await createWord()
   const contributionsSet = new Set<Contribution>()
 
   // 创建用户名文字静止刚体（居中对齐），同时收集三角网格数据
-  const textPaths = getTextPaths(username)
-  const totalWidth = textPaths.reduce((sum, { rect }) => sum + rect.width, 0)
-  const offsetX = (WIDTH - totalWidth) / 2
-  const centerY = HEIGHT / 2
+  const textPaths = getTextPaths(text)
+
+  // 计算所有字形的整体包围盒（翻转 Y 轴后）
+  let minX = Infinity,
+    maxX = -Infinity,
+    minY = Infinity,
+    maxY = -Infinity
+  for (const { rect } of textPaths) {
+    if (rect.x < minX) minX = rect.x
+    if (rect.x + rect.width > maxX) maxX = rect.x + rect.width
+    // 翻转 Y：opentype 字形在基线下方（y 为负），碰撞体需要正向
+    const top = -rect.y
+    const bottom = -(rect.y + rect.height)
+    if (bottom < minY) minY = bottom
+    if (top > maxY) maxY = top
+  }
+  const bboxCenterX = (minX + maxX) / 2
+  const offsetX = WIDTH / 2 - bboxCenterX
+  // 文字顶部距离世界顶部的距离
+  const centerY = HEIGHT - TEXT_TOP - maxY
   const textTriangles: number[][] = []
 
   for (const { paths } of textPaths) {
     const { vertices, indices } = paths
-    const cx = offsetX
+    if (!vertices.length && !indices.length) continue
+    // 翻转 Y 轴：opentype 字形在基线下方（y 为负），物理世界需要正向
+    const flippedVertices = new Float32Array(vertices.length)
+    for (let i = 0; i < vertices.length; i += 2) {
+      flippedVertices[i] = vertices[i]
+      flippedVertices[i + 1] = -vertices[i + 1]
+    }
     world.createCollider(
-      ColliderDesc.trimesh(vertices, indices),
-      world.createRigidBody(RigidBodyDesc.fixed().setTranslation(cx, centerY))
+      ColliderDesc.trimesh(flippedVertices, indices),
+      world.createRigidBody(
+        RigidBodyDesc.fixed().setTranslation(offsetX, centerY)
+      )
     )
     for (let i = 0; i < indices.length; i += 3) {
       const i0 = indices[i] * 2,
         i1 = indices[i + 1] * 2,
         i2 = indices[i + 2] * 2
       textTriangles.push([
-        cx + vertices[i0],
-        centerY + vertices[i0 + 1],
-        cx + vertices[i1],
-        centerY + vertices[i1 + 1],
-        cx + vertices[i2],
-        centerY + vertices[i2 + 1]
+        offsetX + flippedVertices[i0],
+        centerY + flippedVertices[i0 + 1],
+        offsetX + flippedVertices[i1],
+        centerY + flippedVertices[i1 + 1],
+        offsetX + flippedVertices[i2],
+        centerY + flippedVertices[i2 + 1]
       ])
     }
   }
@@ -134,7 +158,7 @@ export async function startSimulation(
   ) {
     // 动态刚体
     const boxCollider = world.createCollider(
-      ColliderDesc.cuboid(SIZE / 2, SIZE / 2),
+      ColliderDesc.cuboid(SIZE / 2, SIZE / 2).setFriction(0.2),
       world.createRigidBody(
         RigidBodyDesc.dynamic().setCcdEnabled(true).setTranslation(x, y)
       )
@@ -148,7 +172,7 @@ export async function startSimulation(
   const rowLen = githubContributions.contributions.length
   const rowWidth = SIZE * rowLen + INTERVAL * (rowLen - 1)
   const left = (WIDTH - rowWidth) / 2
-  const top = HEIGHT * 0.9
+  const top = HEIGHT * 1
 
   for (let rowIndex = 0; rowIndex < rowLen; rowIndex++) {
     const col = githubContributions.contributions[rowIndex]
@@ -211,6 +235,10 @@ export async function startSimulation(
     contributions: Array.from(contributionsSet).map((contribution) =>
       contribution.toJSON()
     ),
+    textPaths: textPaths.map(({ pathData, rect }) => ({
+      pathData: pathData,
+      rect: rect
+    })),
     textTriangles
   }
 }

src/utils/index.ts

@@ -1,10 +1,26 @@
-export const WIDTH = 200
-export const HEIGHT = 100
-export const SIZE = 2
-export const SCALE = 6
-export const INTERVAL = SIZE / 2
-export const FONT_SIZE = 120
-export const TEXT = 'Flycran'
+export const WIDTH = 300
+export const HEIGHT = 150
+export const SCALE = 3
+export const SIZE = 4
+export const INTERVAL = 1.5
+export const FONT_SIZE = 80
+export const TEXT_TOP = 50
+export const GITHUB_ID = 'Orta'
+export const TEXT = 'Orta Therox'
+
+export interface TextPathResult {
+  paths: {
+    vertices: Float32Array
+    indices: Uint32Array
+  }
+  pathData: string
+  rect: {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
+}
 
 export interface ContributionJson {
   date: string
@@ -18,6 +34,7 @@ export interface ContributionJson {
 export interface SimulationResult {
   stepCount: number
   time: number
+  textPaths: Pick<TextPathResult, 'rect' | 'pathData'>[]
   contributions: ContributionJson[]
   /** 用户名文字碰撞体的三角网格（世界坐标），用于 web 端渲染 */
   textTriangles: number[][]