细节优化

2026-01-05 18:03:47 +08:00
parent 3364aac93d
commit f7c24680cb
4 changed files with 109 additions and 12 deletions
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -481,3 +481,64 @@ async function loadCanvasImage(canvas, src) {
    }
  });
 }
+
+export const sharePractiseData = async (canvasId, data) => {
+  try {
+    const width = 375;
+    const height = 460;
+    // 获取 Canvas 2D 上下文并按 DPR 设置
+    const { canvas, ctx } = await getCanvas2DContext(canvasId, width, height);
+
+    // 背景填充
+    ctx.fillStyle = "#F5F5F5";
+    ctx.fillRect(0, 0, width, height);
+
+    // 背景图
+    const bgSrc = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2026-01-05/dfgirwfuz5htwfd4sd.png"
+    );
+    const bgImg = await loadCanvasImage(canvas, bgSrc);
+    ctx.drawImage(bgImg, 0, 0, width, width);
+
+    // 头像
+    const avatarSrc = await loadImage(data.avatar);
+    const avatarImg = await loadCanvasImage(canvas, avatarSrc);
+    await drawRoundImage(ctx, avatarImg, 13, 13, 54, 54, 27, "#fff", 1);
+
+    renderText(ctx, data.name, 20, "#fff", 84, 50);
+
+    const bubble1Src = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2026-01-05/dfgirwcxugdsenlnud.png"
+    );
+    const bubble2Src = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2026-01-05/dfgirwcxujhysg0vfq.png"
+    );
+    const bubble3Src = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2026-01-05/dfgirwfa33spdori3p.png"
+    );
+    const bubble1Img = await loadCanvasImage(canvas, bubble1Src);
+    const bubble2Img = await loadCanvasImage(canvas, bubble2Src);
+    const bubble3Img = await loadCanvasImage(canvas, bubble3Src);
+    ctx.drawImage(bubble1Img, 10, 88, 143, 87);
+    renderText(ctx, "本周箭数", 14, "#FDA103", 84, 116, "center");
+    renderText(ctx, data.weekArrow, 36, "#FA2A2A", 84, 152, "center");
+    ctx.drawImage(bubble2Img, 65, 220, 143, 87);
+    renderText(ctx, "本周消耗", 14, "#FDA103", 139, 248, "center");
+    renderText(ctx, data.weekArrow * 1.6, 36, "#FA2A2A", 139, 284, "center");
+    ctx.drawImage(bubble3Img, 255, 52, 114, 92);
+    renderText(ctx, "我的名次", 14, "#FDA103", 312, 80, "center");
+    renderText(ctx, data.rank, 36, "#FA2A2A", 312, 116, "center");
+
+    const qrcodeSrc = await loadImage(
+      "https://static.shelingxingqiu.com/attachment/2025-12-04/dep7lfqhpelmerjle4.png"
+    );
+    const qrcodeImg = await loadCanvasImage(canvas, qrcodeSrc);
+    ctx.drawImage(qrcodeImg, 40, 383, 68, 68);
+
+    renderText(ctx, "射灵星球", 18, "#333", 120, 412);
+    renderText(ctx, "高效记录每一箭，快来一起打卡吧！", 13, "#999", 120, 435);
+    // 2D 即时绘制，无需 ctx.draw()
+  } catch (e) {
+    console.error("generateShareImage 绘制失败:", e);
+  }
+};