fix: make page

pages/make/index.vue

@@ -9,14 +9,17 @@
       />
       <view class="card-overlay">
         <view class="watermark">年禧集.马年春节祝福</view>
-        <view class="title">
+        <!-- <view class="title">
           <text class="main">新春快乐</text>
           <text class="sub">2026 YEAR OF THE HORSE</text>
-        </view>
+        </view> -->
         <view
           class="bubble"
           @tap="activeTool = 'text'"
-          :style="{ marginTop: 80 + bubbleOffsetY + 'rpx' }"
+          :style="{
+            marginTop: 230 + bubbleOffsetY + 'rpx',
+            maxWidth: bubbleMaxWidth + 80 + 'rpx',
+          }"
         >
           <text
             class="bubble-text"
@@ -247,6 +250,17 @@
             activeColor="#ff3b30"
           />
         </view>
+        <view class="form-item">
+          <text class="label">祝福语宽度</text>
+          <slider
+            :value="bubbleMaxWidth"
+            min="200"
+            max="460"
+            show-value
+            @change="(e) => (bubbleMaxWidth = e.detail.value)"
+            activeColor="#ff3b30"
+          />
+        </view>
         <view class="form-item">
           <text class="label">署名位置 (左右)</text>
           <slider
@@ -407,6 +421,7 @@ const greetingLib = ref([]);
 const greetingIndex = ref(0);
 
 const bubbleOffsetY = ref(0);
+const bubbleMaxWidth = ref(400); // 默认宽度
 const userOffsetX = ref(0);
 const userOffsetY = ref(0);
 
@@ -709,23 +724,24 @@ const saveByCanvas = async (save = true) => {
           ctx.fillRect(0, 0, W, H);
 
           // 3️⃣ 标题
-          ctx.fillStyle = "#ffffff";
+          // ctx.fillStyle = "#ffffff";
-          ctx.font = "42px sans-serif"; // 默认字体
+          // ctx.font = "42px sans-serif"; // 默认字体
-          ctx.textAlign = "center";
+          // ctx.textAlign = "center";
-          ctx.textBaseline = "alphabetic"; // Canvas 2D 默认是 alphabetic
+          // ctx.textBaseline = "alphabetic"; // Canvas 2D 默认是 alphabetic
-          ctx.fillText("新春快乐", W / 2, 120);
+          // ctx.fillText("新春快乐", W / 2, 120);
 
-          ctx.font = "22px sans-serif";
+          // ctx.font = "22px sans-serif";
-          ctx.globalAlpha = 0.9;
+          // ctx.globalAlpha = 0.9;
-          ctx.fillText("2026 YEAR OF THE HORSE", W / 2, 165);
+          // ctx.fillText("2026 YEAR OF THE HORSE", W / 2, 165);
-          ctx.globalAlpha = 1;
+          // ctx.globalAlpha = 1;
 
           // 4️⃣ 祝福语气泡
           drawBubbleText(ctx, {
             text: targetName.value + "\n  " + blessingText.value.content,
             x: 70, 
             y: 260 + bubbleOffsetY.value,
-            maxWidth: 400,
+            maxWidth: bubbleMaxWidth.value, // 使用动态宽度
+            canvasWidth: W, // 传入画布宽度以实现自动居中
             fontSize: fontSize.value,
             lineHeight: fontSize.value * 1.5,
             backgroundColor: "rgba(255,255,255,0.85)",
@@ -806,6 +822,7 @@ function drawBubbleText(ctx, options) {
     textColor = "#fff",
     fontSize = 32,
     fontFamily = "PingFang SC",
+    canvasWidth, // 新增：画布宽度，用于居中计算
   } = options;
   if (!text) return;
 
@@ -835,6 +852,20 @@ function drawBubbleText(ctx, options) {
     if (line) lines.push(line);
   });
 
+  // 计算实际最大宽度以支持居中
+  let maxLineWidth = 0;
+  lines.forEach((line) => {
+    const { width } = ctx.measureText(line);
+    if (width > maxLineWidth) maxLineWidth = width;
+  });
+
+  // 如果提供了 canvasWidth，则自动计算居中的 x 坐标
+  let drawX = x;
+  if (canvasWidth) {
+    const totalWidth = maxLineWidth + padding * 2;
+    drawX = (canvasWidth - totalWidth) / 2;
+  }
+
   // 2️⃣ 计算气泡尺寸
   // const bubbleWidth = maxWidth
 
@@ -843,7 +874,7 @@ function drawBubbleText(ctx, options) {
   // 3️⃣ 绘制气泡（圆角矩形）
   // drawRoundRect(
   //   ctx,
-  //   x,
+  //   drawX,
   //   y,
   //   bubbleWidth,
   //   bubbleHeight,
@@ -855,7 +886,7 @@ function drawBubbleText(ctx, options) {
   ctx.fillStyle = textColor;
 
   lines.forEach((line, index) => {
-    ctx.fillText(line, x + padding, y + padding + index * lineHeight);
+    ctx.fillText(line, drawX + padding, y + padding + index * lineHeight);
   });
 }