fix(POSTV1-TEMPLATE-LAYOUT-19): 修正文字模板对齐枚举

apps/web/src/editor-stage.tsx

@@ -16,6 +16,7 @@ import {
   type TextTemplateNinePatch,
   type TextTemplateParticleLayer,
   type TextTemplateTextLayer,
+  type TextVerticalAlign,
 } from "./text-assets.js";
 import { COLOR_CARD_HALF_SIZES, drawColorCard } from "./palette-provider.js";
 
@@ -201,6 +202,36 @@ function drawTemplateParticles(
   context.restore();
 }
 
+interface TextTemplateBoxLayoutInput {
+  align: "center" | "left" | "right";
+  anchorX: number;
+  anchorY: number;
+  boxHeight: number;
+  boxWidth: number;
+  fontSize: number;
+  lineCount: number;
+  lineHeight: number;
+  verticalAlign: TextVerticalAlign;
+}
+
+export function textTemplateBoxLayout(input: TextTemplateBoxLayoutInput) {
+  const boxLeft = -input.anchorX * input.boxWidth;
+  const boxTop = -input.anchorY * input.boxHeight;
+  const lineAdvance = input.fontSize * input.lineHeight;
+  const blockHeight = input.fontSize + Math.max(0, input.lineCount - 1) * lineAdvance;
+  const x = input.align === "left" ? boxLeft
+    : input.align === "right" ? boxLeft + input.boxWidth
+      : boxLeft + input.boxWidth / 2;
+  const firstY = input.verticalAlign === "top" ? boxTop + input.fontSize / 2
+    : input.verticalAlign === "bottom" ? boxTop + input.boxHeight - blockHeight + input.fontSize / 2
+      : boxTop + (input.boxHeight - blockHeight) / 2 + input.fontSize / 2;
+  return { blockHeight, firstY, lineAdvance, x };
+}
+
+export function boundedTextTemplateWidth(measuredWidth: number, boxWidth: number) {
+  return Math.max(1, Math.min(measuredWidth, boxWidth));
+}
+
 function drawTemplateTextLayer(
   context: CanvasRenderingContext2D,
   element: CanvasState["elements"][number],
@@ -212,7 +243,7 @@ function drawTemplateTextLayer(
   const fontSize = editable ? element.font_size ?? layer.fontSize : layer.fontSize;
   const lineHeight = editable ? styleValue(element, "line_height", layer.lineHeight) : layer.lineHeight;
   const letterSpacing = editable ? styleValue(element, "letter_spacing", layer.letterSpacing) : layer.letterSpacing;
-  const align = (editable ? styleValue(element, "text_align", layer.align) : layer.align) as CanvasTextAlign;
+  const align = (editable ? styleValue(element, "text_align", layer.align) : layer.align) as TextTemplateTextLayer["align"];
   const lines = (editable ? element.content ?? layer.text : layer.text).split("\n");
   context.save();
   context.globalAlpha *= layer.alpha;
@@ -224,13 +255,24 @@ function drawTemplateTextLayer(
   context.textAlign = align;
   context.textBaseline = "middle";
   const widths = lines.map((line) => context.measureText(line).width + Math.max(0, Array.from(line).length - 1) * letterSpacing);
-  const textWidth = Math.max(1, ...widths);
+  const textWidth = boundedTextTemplateWidth(Math.max(1, ...widths), layer.width);
-  const textHeight = Math.max(fontSize * lineHeight, lines.length * fontSize * lineHeight);
+  const layout = textTemplateBoxLayout({
+    align,
+    anchorX: layer.anchorX,
+    anchorY: layer.anchorY,
+    boxHeight: layer.height,
+    boxWidth: layer.width,
+    fontSize,
+    lineCount: lines.length,
+    lineHeight,
+    verticalAlign: layer.verticalAlign,
+  });
   if (editable && styleValue(element, "background_enabled", false)) {
     const alpha = context.globalAlpha;
     context.globalAlpha = alpha * styleValue(element, "background_opacity", 1);
     context.fillStyle = styleValue(element, "background_color", "#FFE62C");
-    context.fillRect(-textWidth / 2 - 16, -textHeight / 2 - 16, textWidth + 32, textHeight + 32);
+    const backgroundLeft = align === "left" ? layout.x : align === "right" ? layout.x - textWidth : layout.x - textWidth / 2;
+    context.fillRect(backgroundLeft - 16, layout.firstY - fontSize / 2 - 16, textWidth + 32, layout.blockHeight + 32);
     context.globalAlpha = alpha;
   }
   context.shadowColor = layer.shadowColor;
@@ -243,17 +285,12 @@ function drawTemplateTextLayer(
     : editable ? styleValue(element, "fill_color", layer.fillColor) : layer.fillColor;
   context.strokeStyle = editable ? styleValue(element, "stroke_color", layer.strokeColor) : layer.strokeColor;
   context.lineWidth = editable ? styleValue(element, "stroke_width", layer.strokeWidth) : layer.strokeWidth;
-  const centerY = (0.5 - layer.anchorY) * textHeight;
-  const firstY = centerY - ((lines.length - 1) * fontSize * lineHeight) / 2;
-  const anchorX = align === "left" ? -layer.anchorX * textWidth
-    : align === "right" ? (1 - layer.anchorX) * textWidth
-      : (0.5 - layer.anchorX) * textWidth;
   lines.forEach((line, index) => {
-    const y = firstY + index * fontSize * lineHeight;
+    const y = layout.firstY + index * layout.lineAdvance;
     if ((editable ? styleValue(element, "stroke_enabled", layer.strokeWidth > 0) : layer.strokeWidth > 0) && context.lineWidth > 0) {
-      context.strokeText(line, anchorX, y);
+      context.strokeText(line, layout.x, y, layer.width);
     }
-    context.fillText(line, anchorX, y);
+    context.fillText(line, layout.x, y, layer.width);
   });
   context.restore();
 }

apps/web/src/text-assets.ts

@@ -8,6 +8,7 @@ type CanvasElement = CanvasState["elements"][number];
 
 export type TextTemplateCategory = "flower" | "simple" | "tag" | "title";
 export type TextAlign = "center" | "left" | "right";
+export type TextVerticalAlign = "bottom" | "middle" | "top";
 
 export interface TextTemplateImageLayer {
   alpha: number;
@@ -70,6 +71,7 @@ export interface TextTemplateTextLayer {
   strokeColor: string;
   strokeWidth: number;
   text: string;
+  verticalAlign: TextVerticalAlign;
   width: number;
   x: number;
   y: number;
@@ -157,7 +159,7 @@ interface RawTextLayer {
   alpha?: number; align: string; anchor_x?: number; anchor_y?: number; editable: boolean; fill_color: string; fill_pattern_asset_id?: string; font_id: string; font_size: number;
   height: number; letter_spacing: number; line_height: number; order: number; rotation: number; scale_x: number; scale_y: number;
   shadow_blur: number; shadow_color: string; shadow_offset_x: number; shadow_offset_y: number; stroke_color: string;
-  stroke_width: number; text: string; width: number; x: number; y: number;
+  stroke_width: number; text: string; vertical_align: TextVerticalAlign; width: number; x: number; y: number;
 }
 
 function renderModel(item: (typeof complexAssetCatalog.text_templates)[number]): TextTemplateRenderModel {
@@ -180,7 +182,7 @@ function renderModel(item: (typeof complexAssetCatalog.text_templates)[number]):
       scaleY: layer.scale_y, shadowBlur: layer.shadow_blur, shadowColor: layer.shadow_color,
       shadowOffsetX: layer.shadow_offset_x, shadowOffsetY: layer.shadow_offset_y,
       strokeColor: layer.stroke_color, strokeWidth: layer.stroke_width, text: layer.text,
-      width: layer.width, x: layer.x, y: layer.y,
+      verticalAlign: layer.vertical_align, width: layer.width, x: layer.x, y: layer.y,
       };
     }),
   };

scripts/lib/text-template-assets.mjs

@@ -495,7 +495,7 @@ function prefabLayers(prefab, input) {
       const shadow = style.shadowInfos?.find((item) => Number(item?.offset?.x ?? 0) !== 0 || Number(item?.offset?.y ?? 0) !== 0);
       const fontUuid = textMesh.m_font?.uuid?.uuid;
       layers.push({
-        align: Number(style.alignment ?? 0) === 2 ? "right" : Number(style.alignment ?? 0) === 1 ? "left" : "center",
+        align: Number(style.alignment ?? 0) === 2 ? "right" : Number(style.alignment ?? 0) === 1 ? "center" : "left",
         ...(transform.alpha === 1 ? {} : { alpha: transform.alpha }),
         ...(transform.anchorX === 0.5 ? {} : { anchor_x: transform.anchorX }),
         ...(transform.anchorY === 0.5 ? {} : { anchor_y: 1 - transform.anchorY }),
@@ -518,6 +518,9 @@ function prefabLayers(prefab, input) {
         stroke_width: Math.max(0, Number(outline?.outlineSize ?? 0)),
         text: String(textMesh.m_text ?? ""),
         type: "text",
+        vertical_align: Number(style.vAlignment ?? 1) === 0 ? "top"
+          : Number(style.vAlignment ?? 1) === 2 ? "bottom"
+            : "middle",
         width: Math.max(1, Number(object.m_contentSize?.width ?? 1) * Math.abs(scaleX)),
         x: transform.x,
         y: -transform.y,
@@ -685,6 +688,7 @@ function normalizeModel(layers, defaultValue, fontResources) {
     layer.height = Number((layer.height * normalization).toFixed(3));
     if (layer.type === "text") {
       layer.font_size = Number((layer.font_size * normalization).toFixed(3));
+      layer.letter_spacing = Number((layer.letter_spacing * normalization).toFixed(3));
       layer.stroke_width = Number((layer.stroke_width * normalization).toFixed(3));
       layer.shadow_blur = Number((layer.shadow_blur * normalization).toFixed(3));
       layer.shadow_offset_x = Number((layer.shadow_offset_x * normalization).toFixed(3));
@@ -762,6 +766,7 @@ export function compileTextTemplateAssets({ templateDirectory, templateId }) {
     stroke_width: 0,
     text: value,
     type: "text",
+    vertical_align: "middle",
     width: Math.max(96, Array.from(value).length * 52),
     x: 0,
     y: 0,

tests/unit/postv1-all-assets.test.ts

@@ -5,7 +5,7 @@ import { P0A_DYNAMIC_STICKERS } from "../../apps/web/src/dynamic-provider.js";
 import { DYNAMIC_RENDER_MODELS } from "../../apps/web/src/dynamic-render-models.js";
 import { P0A_COLOR_CARDS } from "../../apps/web/src/palette-provider.js";
 import { P0A_FONT_OPTIONS, P0A_TEXT_TEMPLATES } from "../../apps/web/src/text-assets.js";
-import { ninePatchSlices } from "../../apps/web/src/editor-stage.js";
+import { boundedTextTemplateWidth, ninePatchSlices, textTemplateBoxLayout } from "../../apps/web/src/editor-stage.js";
 import {
   P0A_COLOR_CARD_IDS,
   P0A_DYNAMIC_STICKER_IDS,
@@ -96,15 +96,51 @@ describe("POSTV1-ASSET-ALL-16 complete asset catalog", () => {
     ]));
     expect(byId.get("H079")!.render_model.text_layers.slice(0, 3).every((layer) => Math.abs(layer.rotation + 10) < 0.001)).toBe(true);
     expect(byId.get("H005")!.render_model.text_layers[1]).toMatchObject({ anchor_y: 0 });
+    expect(byId.get("H005")!.render_model.text_layers[0]).toMatchObject({ vertical_align: "middle" });
+    expect(byId.get("H005")!.render_model.text_layers[1]).toMatchObject({ vertical_align: "top" });
+    expect(byId.get("H004")!.render_model.text_layers[0]).toMatchObject({ align: "center" });
+
+    const heading016Text = byId.get("H016")!.render_model.text_layers;
+    expect(heading016Text).toHaveLength(3);
+    expect(heading016Text.every((layer) => layer.vertical_align === "bottom")).toBe(true);
 
     const heading041 = byId.get("H041")!;
     const heading041Text = heading041.render_model.text_layers[0]!;
     const heading041Underline = heading041.render_model.image_layers.find((layer) => layer.asset_id === "TEXT-IMAGE-H041-004")!;
     expect(heading041Text.stroke_width).toBe(0);
+    expect(heading041Text.letter_spacing).toBeCloseTo(2.714, 3);
     expect(heading041Underline.y).toBeGreaterThan(heading041Text.y);
     expect(byId.get("FLOWER024")!.render_model.image_layers[0]).toMatchObject({ alpha: 0.4000000059604645 });
   });
 
+  it("positions template text inside the captured fixed box instead of its measured glyph width", () => {
+    const shortText = textTemplateBoxLayout({
+      align: "center", anchorX: 0, anchorY: 1, boxHeight: 70, boxWidth: 517,
+      fontSize: 70, lineCount: 1, lineHeight: 1, verticalAlign: "bottom",
+    });
+    const longText = textTemplateBoxLayout({
+      align: "center", anchorX: 0, anchorY: 1, boxHeight: 70, boxWidth: 517,
+      fontSize: 70, lineCount: 1, lineHeight: 1, verticalAlign: "bottom",
+    });
+
+    expect(shortText.x).toBe(258.5);
+    expect(longText.x).toBe(shortText.x);
+    expect(shortText.firstY).toBe(-35);
+    expect(boundedTextTemplateWidth(640, 180)).toBe(180);
+    expect(boundedTextTemplateWidth(120, 180)).toBe(120);
+  });
+
+  it("honors source top, middle, and bottom vertical alignment inside fixed text boxes", () => {
+    const layout = (verticalAlign: "top" | "middle" | "bottom") => textTemplateBoxLayout({
+      align: "left", anchorX: 0, anchorY: 0, boxHeight: 120, boxWidth: 200,
+      fontSize: 40, lineCount: 1, lineHeight: 1, verticalAlign,
+    });
+
+    expect(layout("top").firstY).toBe(20);
+    expect(layout("middle").firstY).toBe(60);
+    expect(layout("bottom").firstY).toBe(100);
+  });
+
   it("preserves nine-patch edges while stretching only the decoration center", () => {
     const slices = ninePatchSlices(231, 63, {
       bottom: 16, left: 53, right: 25, sourceHeight: 63, sourceWidth: 159, top: 12,