shoot-miniprograms/src/util.js

export function renderScores(ctx, arrows = []) {
  let rowIndex = 0;
  arrows.forEach((item, i) => {
    rowIndex = i;
    if (arrows.length >= 36 && i < 36) {
      ctx.drawImage(
        "../static/score-bg.png",
        18 + (i % 9) * 30,
        290 + Math.ceil((i + 1) / 9) * 30,
        27,
        27,
        "center"
      );
      renderText(
        ctx,
        item.ring,
        18,
        "#fed847",
        31 + (i % 9) * 30,
        310 + Math.ceil((i + 1) / 9) * 30,
        "center"
      );
    } else if (arrows.length >= 12 && i < 12) {
      if (i > 5) rowIndex = i - 6;
      ctx.drawImage(
        "../static/score-bg.png",
        16 + rowIndex * 46,
        i > 5 ? 366 : 320,
        40,
        40
      );
      renderText(
        ctx,
        item.ring,
        25,
        "#fed847",
        36 + rowIndex * 46,
        i > 5 ? 395 : 349,
        "center"
      );
    }
  });
}

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

export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
  ctx.setFontSize(size);
  ctx.setFillStyle(color);
  ctx.setTextAlign(textAlign);
  ctx.fillText(text, x, y);
}

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

  // 开始绘制圆角矩形
  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.fillStyle = "#5F51FF";
  ctx.fill();
  ctx.setFontSize(fontSize);
  ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
  ctx.fillText(text, textX, textY); // 绘制文字
}

export const drawRoundImage = async (
  ctx,
  imgPath,
  x,
  y,
  width,
  height,
  radius
) => {
  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(imgPath, x, y, width, height);
  ctx.restore();
};

export function generateCanvasImage(canvasId, type, user, data) {
  var ctx = uni.createCanvasContext(canvasId);
  const width = 303;
  const height = 535;
  ctx.drawImage("../static/share-bg.png", 0, 0, 300, 530);
  drawRoundImage(ctx, user.avatar, 17, 20, 37, 37, 20);
  ctx.drawImage("../static/avatar-frame.png", 12, 15, 47, 47);
  renderText(ctx, user.nickName, 14, "#fff", 80, 32, "center");
  renderRankTitle(ctx, user.lvlName, "center");

  let titleImage = "../static/first-try-title.png";
  let subTitle = "正式开启弓箭手之路";
  if (type > 1) {
    subTitle = `今日弓箭练习打卡 ${data.createdAt
      .split(" ")[0]
      .replaceAll("-", ".")}`;
  }
  if (type == 2) {
    titleImage = "../static/practise-one-title.png";
  } else if (type == 3) {
    titleImage = "../static/practise-two-title.png";
  }
  ctx.drawImage(titleImage, (width - 160) / 2 - 5, 160, 160, 40);
  const subTitleWidth = ctx.measureText(subTitle).width;
  renderText(
    ctx,
    subTitle,
    18,
    "#fff",
    width / 2 - subTitleWidth - (type > 1 ? 15 : 13),
    220
  );
  renderText(ctx, "共", 16, "#fff", 124, 300);
  const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
  renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);
  renderText(ctx, "环", 16, "#fff", 166, 300);
  renderLine(ctx, 80);
  renderLine(ctx, 192);
  renderScores(ctx, data.arrows);
  ctx.drawImage(
    "../static/device-icon.png",
    width * 0.06,
    height * 0.87,
    55,
    55
  );
  renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
  renderText(
    ctx,
    "快加入我们一起玩吧~",
    11,
    "rgba(255, 255, 255, 0.5)",
    width * 0.28,
    height * 0.93
  );
  renderText(
    ctx,
    "后羿就是这样练成的",
    11,
    "rgba(255, 255, 255, 0.5)",
    width * 0.28,
    height * 0.96
  );
  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
  ctx.draw();
}

export const wxShare = async () => {
  try {
    const res = await uni.canvasToTempFilePath({
      canvasId: "shareCanvas",
      fileType: "png", // 图片格式，可选 jpg 或 png
      quality: 1, // 图片质量，取值范围为 0-1
    });
    wx.showShareImageMenu({
      path: res.tempFilePath,
    });
  } catch (error) {
    uni.showToast({
      title: "生成图片失败",
      icon: "error",
    });
  }
};