分享功能优化

src/util.js

@@ -2,26 +2,7 @@ export function renderScores(ctx, arrows = []) {
   let rowIndex = 0;
   arrows.forEach((item, i) => {
     rowIndex = i;
-    if (arrows.length === 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"
-      );
-    }
-    if (arrows.length === 36) {
+    if (arrows.length >= 36 && i < 36) {
       ctx.drawImage(
         "../static/score-bg.png",
         18 + (i % 9) * 30,
@@ -39,6 +20,24 @@ export function renderScores(ctx, arrows = []) {
         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"
+      );
     }
   });
 }
@@ -131,3 +130,81 @@ export const drawRoundImage = async (
   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, 302, 534);
+  drawRoundImage(ctx, user.avatar, 20, 20, 35, 35, 20);
+  ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
+  renderText(ctx, user.nickName, 14, "#fff", 77, 35, "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, 160, 160, 40);
+  const subTitleWidth = ctx.measureText(subTitle).width;
+  renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 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",
+    });
+  }
+};