shoot-miniprograms/src/canvas.js

import { formatTimestamp } from "@/util";

const loadImage = (src) =>
  new Promise((resolve, reject) => {
    try {
      uni.getImageInfo({
        src,
        success: (res) => resolve(res.path || res.tempFilePath || src),
        fail: (e) => reject(e),
      });
    } catch (e) {
      reject(src);
    }
  });

function drawLine(ctx, x1, y1, x2, y2, color = "#000", width = 1) {
  ctx.beginPath();
  ctx.lineWidth = width;
  ctx.strokeStyle = color;
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();
}

const drawRoundImage = async (
  ctx,
  img,
  x,
  y,
  width,
  height,
  radius,
  borderColor = null,
  borderWidth = 0
) => {
  ctx.save();
  // 创建圆角路径
  ctx.beginPath();
  ctx.moveTo(x + radius, y);

  // 右上角
  ctx.lineTo(x + width - radius, y);
  ctx.arcTo(x + width, y, x + width, y + radius, radius);

  // 右下角
  ctx.lineTo(x + width, y + height - radius);
  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);

  // 左下角
  ctx.lineTo(x + radius, y + height);
  ctx.arcTo(x, y + height, x, y + height - radius, radius);

  // 左上角
  ctx.lineTo(x, y + radius);
  ctx.arcTo(x, y, x + radius, y, radius);

  ctx.clip();
  // 绘制图片
  ctx.drawImage(img, x, y, width, height);
  ctx.restore();

  // 绘制边框（可选）
  if (borderWidth > 0 && borderColor) {
    // 内收路径，使描边完全落在给定宽高内
    const inset = borderWidth / 2;
    const bx = x + inset;
    const by = y + inset;
    const bw = width - inset * 2;
    const bh = height - inset * 2;
    const br = Math.max(radius - inset, 0);

    ctx.beginPath();
    ctx.moveTo(bx + br, by);
    // 右上角
    ctx.lineTo(bx + bw - br, by);
    ctx.arcTo(bx + bw, by, bx + bw, by + br, br);
    // 右下角
    ctx.lineTo(bx + bw, by + bh - br);
    ctx.arcTo(bx + bw, by + bh, bx + bw - br, by + bh, br);
    // 左下角
    ctx.lineTo(bx + br, by + bh);
    ctx.arcTo(bx, by + bh, bx, by + bh - br, br);
    // 左上角
    ctx.lineTo(bx, by + br);
    ctx.arcTo(bx, by, bx + br, by, br);

    if (typeof ctx.setLineWidth === "function") {
      ctx.setLineWidth(borderWidth);
    } else {
      ctx.lineWidth = borderWidth;
    }
    if (typeof ctx.setStrokeStyle === "function") {
      ctx.setStrokeStyle(borderColor);
    } else {
      ctx.strokeStyle = borderColor;
    }
    ctx.stroke();
  }
};

function drawRingCircle(ctx, x, y, text, diameter = 9) {
  const fillColor = "#00bf04";
  const borderColor = "#ffffff";
  const borderWidth = 1;
  const r = diameter / 2;

  const cx = x - r - borderWidth;
  const cy = y - r - borderWidth;

  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.fillStyle = fillColor;

  ctx.shadowColor = "rgba(0,0,0,0.25)";
  ctx.shadowBlur = 2;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 1;
  ctx.fill();

  // 重置阴影
  ctx.shadowColor = "transparent";
  ctx.shadowBlur = 0;
  ctx.shadowOffsetX = 0;
  ctx.shadowOffsetY = 0;

  ctx.lineWidth = borderWidth;
  ctx.strokeStyle = borderColor;
  ctx.stroke();

  const fontSize = 7;
  ctx.save();
  ctx.translate(cx, cy);
  ctx.textAlign = "center";
  ctx.textBaseline = "middle";
  ctx.font = `${fontSize}px sans-serif`;
  ctx.fillStyle = "#ffffff";
  ctx.scale(0.7, 1);
  ctx.fillText(String(text ?? ""), 0, 0);
  ctx.restore();
}

function drawRoundedRect(
  ctx,
  x,
  y,
  width,
  height,
  radius,
  fillColor = "#fff",
  strokeColor = null,
  lineWidth = 1
) {
  const r = Math.max(Math.min(radius, Math.min(width, height) / 2), 0);
  if (r === 0) {
    ctx.beginPath();
    ctx.rect(x, y, width, height);
    if (fillColor) {
      ctx.fillStyle = fillColor;
      ctx.fill();
    }
    if (strokeColor) {
      ctx.lineWidth = lineWidth;
      ctx.strokeStyle = strokeColor;
      ctx.stroke();
    }
    return;
  }
  ctx.beginPath();
  ctx.moveTo(x + r, y);
  ctx.lineTo(x + width - r, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + r);
  ctx.lineTo(x + width, y + height - r);
  ctx.quadraticCurveTo(x + width, y + height, x + width - r, y + height);
  ctx.lineTo(x + r, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - r);
  ctx.lineTo(x, y + r);
  ctx.quadraticCurveTo(x, y, x + r, y);
  ctx.closePath();

  if (fillColor) {
    ctx.fillStyle = fillColor;
    ctx.fill();
  }

  if (strokeColor) {
    ctx.lineWidth = lineWidth;
    ctx.strokeStyle = strokeColor;
    ctx.stroke();
  }
}

function drawTextBoxesLine(
  ctx,
  text,
  startX,
  baselineY,
  fontSize = 9,
  padding = 10,
  bgColor = "#fff",
  textColor = "#000",
  radius = 4,
  gap = 0
) {
  const str = String(text || "");
  ctx.font = `${fontSize}px sans-serif`;
  const w = ctx.measureText(str).width; // 整段文本宽度
  const hPadding = padding + 4;
  const rectW = Math.ceil(w) + hPadding * 2;
  const rectH = fontSize + padding * 2;
  const rectY = baselineY - fontSize - padding / 1.3;
  drawRoundedRect(ctx, startX, rectY, rectW, rectH, radius, bgColor, null, 0);
  renderText(
    ctx,
    str,
    fontSize,
    textColor,
    startX + rectW / 2,
    baselineY,
    "center"
  );
  return startX + rectW + gap;
}

function renderText(
  ctx,
  text,
  size,
  color,
  x,
  y,
  textAlign = "left",
  rotateDeg = 0
) {
  ctx.font = `${size}px sans-serif`;
  ctx.fillStyle = color;
  ctx.textAlign = textAlign;
  ctx.textBaseline = "alphabetic";
  if (rotateDeg) {
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate((Math.PI / 180) * rotateDeg);
    ctx.fillText(text, 0, 0);
    ctx.restore();
  } else {
    ctx.fillText(text, x, y);
  }
}

export const generateShareImage = async (canvasId, data) => {
  try {
    const pointBook = uni.getStorageSync("point-book");
    const arrowData = data.groups && data.groups[0] ? data.groups[0] : {};
    const hasPoint =
      Array.isArray(arrowData.list) &&
      arrowData.list.some((arrow) => arrow?.x && arrow?.y);

    const width = 375;
    const height = hasPoint ? 800 : 440;
    // 获取 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/2025-11-14/de88ugdgqwecnmsqfv.png"
    );
    const bgImg = await loadCanvasImage(canvas, bgSrc);
    ctx.drawImage(bgImg, 0, 0, width, 300);

    // 头像
    const avatarSrc = await loadImage(data.user.avatar);
    const avatarImg = await loadCanvasImage(canvas, avatarSrc);
    await drawRoundImage(ctx, avatarImg, 13, 13, 54, 54, 27, "#000", 1);

    renderText(ctx, data.user.name, 18, "#000", 84, 36);
    renderText(ctx, data.recordDate, 9, "#fff", 348, 23, "center", 39);
    renderText(ctx, "今日打卡", 14, "#fff", 336, 38, "center", 39);

    // 文本标签
    let cursorX = 84;
    cursorX = drawTextBoxesLine(
      ctx,
      pointBook.bowType.name,
      cursorX,
      58,
      9,
      5,
      "#fff",
      "#000",
      6,
      2
    );
    cursorX = drawTextBoxesLine(
      ctx,
      String(pointBook.distance) + " 米",
      cursorX + 6,
      58,
      9,
      5,
      "#fff",
      "#000",
      6,
      2
    );
    cursorX = drawTextBoxesLine(
      ctx,
      pointBook.bowtargetType.name,
      cursorX + 6,
      58,
      9,
      5,
      "#fff",
      "#000",
      6,
      2
    );

    renderText(ctx, "落点稳定性", 13, "#999", 25, 110);
    renderText(ctx, "黄心率", 13, "#999", 145, 110);
    renderText(ctx, "10环数", 13, "#999", 262, 110);

    renderText(
      ctx,
      Number(arrowData.stability.toFixed(2)),
      15,
      "#000",
      25,
      133
    );
    renderText(
      ctx,
      Number((arrowData.yellowRate * 100).toFixed(2)) + "%",
      15,
      "#000",
      145,
      133
    );
    renderText(ctx, arrowData.tenRings, 15, "#000", 262, 133);

    renderText(ctx, "平均环数", 13, "#999", 25, 175);
    renderText(ctx, "总环数", 13, "#999", 145, 175);
    renderText(
      ctx,
      Number(arrowData.averageRing.toFixed(2)),
      15,
      "#000",
      25,
      200
    );
    renderText(
      ctx,
      `${arrowData.userTotalRing}/${arrowData.totalRing}`,
      15,
      "#000",
      145,
      200
    );

    if (hasPoint) {
      drawRoundedRect(ctx, 20, 230, 5, 15, 5, "#FED847");
      renderText(ctx, "落点分布", 13, "#999", 32, 242);

      const bowSrc = await loadImage(pointBook.bowtargetType.iconPng);
      const bowImg = await loadCanvasImage(canvas, bowSrc);
      ctx.drawImage(bowImg, 375 * 0.08, 250, 375 * 0.84, 375 * 0.84);
      arrowData.list
        .filter((arrow) => arrow?.x && arrow?.y)
        .forEach((arrow, index) => {
          const px = 375 * 0.08 + (375 * 0.84 + 20) * arrow.x;
          const py = 250 + (375 * 0.84 + 20) * arrow.y;
          drawRingCircle(ctx, px, py, index + 1);
        });
    }

    const ringNames = ["X", 10, 9, 8, 7, 6, 5, 4, 3, 2, 1, "M"];
    const ringBarHeight = hasPoint ? 700 : 340;

    let rings = new Array(12).fill(0);
    arrowData.list.forEach((arrow) => {
      if (arrow.ring === 0) rings[0]++;
      else if (arrow.ring === -1) rings[11]++;
      else rings[arrow.ring]++;
    });
    [rings[0], rings[11]] = [rings[11], rings[0]];
    rings = rings.reverse().map((count) => ({
      count,
      rate: count / arrowData.list.length,
    }));

    const barColor = (rate) => {
      if (rate >= 0.4) return "#FDC540";
      if (rate >= 0.2) return "#FED847";
      return "#ffe88f";
    };
    const barWidth = 20;
    const barSpacing = 7.1;
    const startX = 38;
    const startY = ringBarHeight - 15;

    rings.forEach((ring, index) => {
      const barHeight = ring.rate * 90;
      if (ring.rate > 0) {
        renderText(
          ctx,
          Number((ring.rate * 100).toFixed(1)) + "%",
          9,
          "#333",
          startX + index * (barWidth + barSpacing),
          startY - barHeight - (hasPoint ? 6 : 3)
        );
      }
      ctx.fillStyle = barColor(ring.rate);
      ctx.fillRect(
        startX + index * (barWidth + barSpacing),
        startY - barHeight,
        barWidth,
        barHeight
      );
    });

    renderText(ctx, "环值", 9, "#999", 15, ringBarHeight - 1);
    ringNames.forEach((ring, index) => {
      renderText(
        ctx,
        ring,
        11,
        "#333",
        48 + index * 27,
        ringBarHeight,
        "center"
      );
    });
    drawLine(ctx, 15, ringBarHeight - 15, 362, ringBarHeight - 15, "#333");

    const qrcodeSrc = await loadImage(
      "https://static.shelingxingqiu.com/attachment/2025-12-04/dep7lfqhpelmerjle4.png"
    );
    const qrcodeImg = await loadCanvasImage(canvas, qrcodeSrc);
    ctx.drawImage(qrcodeImg, 40, hasPoint ? 715 : 358, 68, 68);

    renderText(ctx, "射灵星球", 18, "#333", 120, hasPoint ? 734 : 380);
    renderText(
      ctx,
      "高效记录每一箭，快来一起打卡吧！",
      13,
      "#999",
      120,
      hasPoint ? 756 : 402
    );
    renderText(ctx, "扫码打卡", 13, "#FFA118", 142, hasPoint ? 777 : 422);
    const pointImg = await loadCanvasImage(canvas, "../static/point.png");
    ctx.drawImage(pointImg, 120, hasPoint ? 765 : 410, 18, 14);
    // 2D 即时绘制，无需 ctx.draw()
  } catch (e) {
    console.error("generateShareImage 绘制失败:", e);
  }
};

// 顶部导入与工具方法
async function getCanvas2DContext(canvasId, targetWidth, targetHeight) {
  return new Promise((resolve) => {
    const query = uni.createSelectorQuery();
    query
      .select(`#${canvasId}`)
      .fields({ node: true, size: true })
      .exec((res) => {
        const { node: canvas } = res[0] || {};
        const ctx = canvas.getContext("2d");
        const dpr = uni.getSystemInfoSync().pixelRatio || 1;

        const w = targetWidth || res[0].width;
        const h = targetHeight || res[0].height;

        canvas.width = w * dpr;
        canvas.height = h * dpr;
        ctx.scale(dpr, dpr);
        resolve({ canvas, ctx, dpr, cssWidth: w, cssHeight: h });
      });
  });
}

async function loadCanvasImage(canvas, src) {
  return new Promise((resolve, reject) => {
    try {
      const img = canvas.createImage();
      img.onload = () => resolve(img);
      img.onerror = (e) => reject(e);
      img.src = src;
    } catch (e) {
      reject(e);
    }
  });
}

export const sharePointData = 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,
      Math.round(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);
  }
};

export function renderRankTitle(ctx, text) {
  const fontSize = 8;
  const textWidth = ctx.measureText(text).width;
  const padding = 8; // 文字与背景边缘的间距
  const radius = 8; // 圆角半径
  const textX = 76;
  const textY = 50;
  const x = textX - padding - 10; // 文字 x 坐标减去内边距
  const y = textY - fontSize - padding / 2 + 2; // 文字 y 坐标减去字体大小和内边距
  const width = textWidth + padding * 2 - 25; // 背景宽度
  const height = fontSize + padding - 2; // 背景高度

  // 开始绘制圆角矩形
  ctx.beginPath();
  // 从左上角开始，顺时针绘制
  ctx.moveTo(x + radius, y);
  // 上边框
  ctx.lineTo(x + width - radius, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
  // 右边框
  ctx.lineTo(x + width, y + height - radius);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
  // 下边框
  ctx.lineTo(x + radius, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
  // 左边框
  ctx.lineTo(x, y + radius);
  ctx.quadraticCurveTo(x, y, x + radius, y);

  // 设置背景颜色并填充
  if (typeof ctx.setFillStyle === "function") {
    ctx.setFillStyle("#5F51FF");
  } else {
    ctx.fillStyle = "#5F51FF";
  }
  ctx.fill();

  if (typeof ctx.setFontSize === "function") {
    ctx.setFontSize(fontSize);
    ctx.setTextAlign("center");
    ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
  } else {
    ctx.font = `${fontSize}px sans-serif`;
    ctx.textAlign = "center";
    ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
  }
  ctx.fillText(text, textX, textY); // 绘制文字
}

export function renderScores(ctx, arrows = [], bgImg) {
  let rowIndex = 0;
  arrows.forEach((item, i) => {
    rowIndex = i;
    if (arrows.length >= 36 && i < 36) {
      if (bgImg) {
        ctx.drawImage(
          bgImg,
          16 + (i % 9) * 30,
          290 + Math.ceil((i + 1) / 9) * 30,
          27,
          27
        );
      } else {
        ctx.drawImage(
          "../static/score-bg.png",
          16 + (i % 9) * 30,
          290 + Math.ceil((i + 1) / 9) * 30,
          27,
          27
        );
      }
      renderText(
        ctx,
        item.ringX ? "X" : item.ring,
        18,
        "#fed847",
        29.5 + (i % 9) * 30,
        310 + Math.ceil((i + 1) / 9) * 30,
        "center"
      );
    } else if (arrows.length >= 12 && i < 12) {
      if (i > 5) rowIndex = i - 6;
      if (bgImg) {
        ctx.drawImage(bgImg, 24 + rowIndex * 42, i > 5 ? 362 : 320, 38, 38);
      } else {
        ctx.drawImage(
          "../static/score-bg.png",
          24 + rowIndex * 42,
          i > 5 ? 362 : 320,
          38,
          38
        );
      }
      renderText(
        ctx,
        item.ringX ? "X" : item.ring,
        23,
        "#fed847",
        43 + rowIndex * 42,
        i > 5 ? 389 : 347,
        "center"
      );
    }
  });
}

export function renderLine(ctx, from) {
  ctx.beginPath();
  if (typeof ctx.setLineWidth === "function") {
    ctx.setLineWidth(1);
    ctx.setStrokeStyle("rgba(255, 255, 255, 0.3)");
  } else {
    ctx.lineWidth = 1;
    ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
  }
  const length = 35;
  ctx.moveTo(from, 295);
  ctx.lineTo(from + length, 295);
  ctx.stroke();
}

export async function sharePractiseData(canvasId, type, user, data) {
  try {
    const width = 300;
    const height = 530;

    const { canvas, ctx } = await getCanvas2DContext(canvasId, width, height);

    // 预加载所有图片

    const bgImgSrc = await loadImage(
      "https://static.shelingxingqiu.com/attachment/2026-01-07/dfia8qlexbwoqaezyd.png"
    );
    const bgImg = await loadCanvasImage(canvas, bgImgSrc);

    const avatarImgPromise = loadImage(user.avatar).then((path) =>
      loadCanvasImage(canvas, path)
    );
    const lvlImgPromise = loadImage(user.lvlImage).then((path) =>
      loadCanvasImage(canvas, path)
    );

    let titleImageSrc = "../static/first-try-title.png";
    if (type == 2) {
      titleImageSrc = "../static/practise-one-title.png";
    } else if (type == 3) {
      titleImageSrc = "../static/practise-two-title.png";
    }
    const titleImgPromise = loadCanvasImage(canvas, titleImageSrc);
    const scoreBgImgPromise = loadCanvasImage(canvas, "../static/score-bg.png");
    const qrCodeImgPromise = loadCanvasImage(canvas, "../static/qr-code.png");

    const [avatarImg, lvlImg, titleImg, scoreBgImg, qrCodeImg] =
      await Promise.all([
        avatarImgPromise,
        lvlImgPromise,
        titleImgPromise,
        scoreBgImgPromise,
        qrCodeImgPromise,
      ]);

    // 先填充整体背景色
    ctx.fillStyle = "#F5F5F5";
    ctx.fillRect(0, 0, width, height);

    ctx.drawImage(bgImg, 0, 0, width, height);

    drawRoundImage(ctx, avatarImg, 17, 20, 32, 32, 20);
    ctx.drawImage(lvlImg, 12, 15, 42, 42);

    renderText(ctx, user.nickName, 13, "#fff", 58, 34);
    renderRankTitle(ctx, user.lvlName);

    let subTitle = "正式开启弓箭手之路";
    if (type > 1) {
      subTitle = `今日弓箭练习打卡 ${formatTimestamp(data.startTime)}`;
    }

    ctx.drawImage(titleImg, (width - 160) / 2, 160, 160, 40);

    ctx.font = "18px sans-serif";
    renderText(ctx, subTitle, 18, "#fff", width / 2, 224, "center");

    renderText(ctx, "共", 14, "#fff", 122, 300);
    const totalRing = data.details.reduce((last, next) => last + next.ring, 0);
    renderText(ctx, totalRing, 14, "#fed847", 148, 300, "center");
    renderText(ctx, "环", 14, "#fff", 161, 300);

    renderLine(ctx, 77);
    renderLine(ctx, 185);

    renderScores(ctx, data.details, scoreBgImg);

    ctx.drawImage(qrCodeImg, width * 0.06, height * 0.87, 52, 52);
    renderText(ctx, "射灵平台", 12, "#fff", width * 0.26, height * 0.9);
    renderText(
      ctx,
      "快加入我们一起玩吧~",
      9,
      "rgba(255, 255, 255, 0.5)",
      width * 0.26,
      height * 0.93
    );
    renderText(
      ctx,
      "后羿就是这样练成的",
      9,
      "rgba(255, 255, 255, 0.5)",
      width * 0.26,
      height * 0.955
    );
    // 2D 模式下无需 ctx.draw()
  } catch (err) {
    console.log(err);
  }
}

export const generateShareCard = (canvasId, date, actual, total) => {
  try {
    const ctx = uni.createCanvasContext(canvasId);
    const imgUrl =
      "https://static.shelingxingqiu.com/attachment/2025-11-04/ddzpm4tyh5vunyacsr.png";
    const drawWidth = 375;
    const drawHeight = 300;
    // 先填充整体背景色
    if (typeof ctx.setFillStyle === "function") {
      ctx.setFillStyle("#F5F5F5");
    } else {
      ctx.fillStyle = "#F5F5F5";
    }
    if (typeof ctx.fillRect === "function") {
      ctx.fillRect(0, 0, drawWidth, drawHeight);
    }
    // 兼容第三个参数传入 "actual/total" 的情况
    let a = actual;
    let t = total;
    if (
      (t === undefined || t === null) &&
      typeof a === "string" &&
      a.includes("/")
    ) {
      const parts = a.split("/");
      a = parts[0];
      t = parts[1] || "";
    }

    return new Promise((resolve, reject) => {
      uni.getImageInfo({
        src: imgUrl,
        success: (res) => {
          const path = res.path || res.tempFilePath || imgUrl;
          if (typeof ctx.clearRect === "function") {
            ctx.clearRect(0, 0, drawWidth, drawHeight);
          }
          ctx.drawImage(path, 0, 0, drawWidth, drawHeight);
          // 绘制左上角日期（白色，22px）
          renderText(ctx, String(date || ""), 18, "#FFFFFF", 6, 20, "left");
          // 居中绘制第三个参数为圆角黑底标签
          const rectW = 200;
          const rectH = 78;
          const radius = 39;
          const rectX = (drawWidth - rectW) / 2;
          const rectY = (drawHeight - rectH) / 2 - 12;
          ctx.save();
          ctx.beginPath();
          ctx.moveTo(rectX + radius, rectY);
          ctx.lineTo(rectX + rectW - radius, rectY);
          ctx.quadraticCurveTo(
            rectX + rectW,
            rectY,
            rectX + rectW,
            rectY + radius
          );
          ctx.lineTo(rectX + rectW, rectY + rectH - radius);
          ctx.quadraticCurveTo(
            rectX + rectW,
            rectY + rectH,
            rectX + rectW - radius,
            rectY + rectH
          );
          ctx.lineTo(rectX + radius, rectY + rectH);
          ctx.quadraticCurveTo(
            rectX,
            rectY + rectH,
            rectX,
            rectY + rectH - radius
          );
          ctx.lineTo(rectX, rectY + radius);
          ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
          ctx.closePath();
          ctx.setFillStyle("rgba(0,0,0,0.5)");
          ctx.fill();
          ctx.restore();

          // 居中排版：左侧显示 actual/，右侧显示 total，再追加“环”
          ctx.save();
          if (typeof ctx.setTextBaseline === "function")
            ctx.setTextBaseline("middle");
          const centerX = rectX + rectW / 2;
          const centerY = rectY + rectH / 2;
          // 左半部：右对齐 actual/
          renderText(ctx, `${a}/`, 40, "#FFFFFF", centerX, centerY, "right");
          // 右半部：左对齐 total
          renderText(
            ctx,
            `${t || ""}`,
            30,
            "#FFFFFF",
            centerX,
            centerY,
            "left"
          );
          // 追加单位“环”：放在 total 文本之后 16px
          const totalWidth = ctx.measureText(`${t || ""}`).width || 0;
          renderText(
            ctx,
            "环",
            20,
            "#FFFFFF",
            centerX + totalWidth + 5,
            centerY,
            "left"
          );
          ctx.restore();
          ctx.draw(false, () => {
            try {
              uni.canvasToTempFilePath({
                canvasId,
                width: drawWidth,
                height: drawHeight,
                destWidth: drawWidth,
                destHeight: drawHeight,
                fileType: "png",
                quality: 1,
                success: (r) => {
                  const path = r.tempFilePath || r.apFilePath || r.filePath;
                  resolve(path);
                },
                fail: (err) => reject(err),
              });
            } catch (err) {
              reject(err);
            }
          });
        },
        fail: () => {
          try {
            ctx.drawImage(imgUrl, 0, 0, drawWidth, drawHeight);
            // 绘制左上角日期（白色，22px）
            renderText(ctx, String(date || ""), 22, "#FFFFFF", 10, 22, "left");
            // 居中绘制第三个参数为圆角黑底标签
            const rectW = 200;
            const rectH = 78;
            const radius = 39;
            const rectX = (drawWidth - rectW) / 2;
            const rectY = (drawHeight - rectH) / 2;
            ctx.save();
            ctx.beginPath();
            ctx.moveTo(rectX + radius, rectY);
            ctx.lineTo(rectX + rectW - radius, rectY);
            ctx.quadraticCurveTo(
              rectX + rectW,
              rectY,
              rectX + rectW,
              rectY + radius
            );
            ctx.lineTo(rectX + rectW, rectY + rectH - radius);
            ctx.quadraticCurveTo(
              rectX + rectW,
              rectY + rectH,
              rectX + rectW - radius,
              rectY + rectH
            );
            ctx.lineTo(rectX + radius, rectY + rectH);
            ctx.quadraticCurveTo(
              rectX,
              rectY + rectH,
              rectX,
              rectY + rectH - radius
            );
            ctx.lineTo(rectX, rectY + radius);
            ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
            ctx.closePath();
            ctx.setFillStyle("rgba(0,0,0,0.5)");
            ctx.fill();
            ctx.restore();
            // 居中排版：左侧显示 actual/，右侧显示 total，再追加“环”
            ctx.save();
            if (typeof ctx.setTextBaseline === "function")
              ctx.setTextBaseline("middle");
            const centerX = rectX + rectW / 2;
            const centerY = rectY + rectH / 2;
            // 左半部：右对齐 actual/
            renderText(ctx, `${a}/`, 40, "#FFFFFF", centerX, centerY, "right");
            // 右半部：左对齐 total
            renderText(
              ctx,
              `${t || ""}`,
              35,
              "#FFFFFF",
              centerX,
              centerY,
              "left"
            );
            // 追加单位“环”：放在 total 文本之后 16px
            const totalWidth = ctx.measureText(`${t || ""}`).width || 0;
            renderText(
              ctx,
              "环",
              20,
              "#FFFFFF",
              centerX + totalWidth + 5,
              centerY,
              "left"
            );
            ctx.restore();
            ctx.draw(false, () => {
              try {
                uni.canvasToTempFilePath({
                  canvasId,
                  width: drawWidth,
                  height: drawHeight,
                  destWidth: drawWidth,
                  destHeight: drawHeight,
                  fileType: "png",
                  quality: 1,
                  success: (r) => {
                    const path = r.tempFilePath || r.apFilePath || r.filePath;
                    resolve(path);
                  },
                  fail: (err) => reject(err),
                });
              } catch (err) {
                reject(err);
              }
            });
          } catch (e) {
            reject(e);
          }
        },
      });
    });
  } catch (e) {
    console.error("generateShareCardImage 绘制失败:", e);
  }
};