完成不同练习生成不同截图

src/apis.js

@@ -78,8 +78,11 @@ export const createPractiseAPI = (arrows) => {
   });
 };
 
-export const getPractiseAPI = (id) => {
-  return request("GET", `/user/practice/get?id=${id}`);
+export const getPractiseAPI = async (id) => {
+  const result = await request("GET", `/user/practice/get?id=${id}`);
+  const data = { ...(result.UserPracticeRound || {}) };
+  if (data.arrows) data.arrows = JSON.parse(data.arrows);
+  return data;
 };
 
 export const createRoomAPI = (gameType, teamSize) => {

src/components/Container.vue

@@ -48,5 +48,6 @@ onMounted(() => {
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
+  overflow-x: hidden;
 }
 </style>

src/components/ScorePanel2.vue

@@ -20,7 +20,6 @@ const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
     <view
       v-for="(_, index) in new Array(Math.ceil(scores.length / 3)).fill(1)"
       :key="index"
-      class="score-item"
     >
       <text>{{ roundsName[index] }}</text>
       <text>{{
@@ -47,8 +46,8 @@ const roundsName = ["第一轮", "第二轮", "第三轮", "第四轮"];
 .container {
   width: 100vw;
   display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
+  flex-direction: column;
+  overflow-x: hidden;
 }
 .container > view {
   width: calc(100% - 30px);

src/components/ScoreResult.vue

@@ -2,7 +2,6 @@
 import { ref } from "vue";
 import IconButton from "@/components/IconButton.vue";
 import SButton from "@/components/SButton.vue";
-import ImageShare from "@/components/ImageShare.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import BowData from "@/components/BowData.vue";
 const props = defineProps({
@@ -26,10 +25,13 @@ const props = defineProps({
     type: Object,
     default: () => ({}),
   },
+  dataType: {
+    type: Number,
+    default: 0,
+  },
 });
 const showPanel = ref(true);
 const showComment = ref(false);
-const showShare = ref(false);
 const showBowData = ref(false);
 const closePanel = () => {
   showPanel.value = false;
@@ -40,6 +42,11 @@ const closePanel = () => {
 setTimeout(() => {
   showPanel.value = true;
 }, 300);
+const toSharePage = () => {
+  uni.navigateTo({
+    url: `image-share?id=${props.result.id}&type=${props.dataType}`,
+  });
+};
 </script>
 
 <template>
@@ -89,7 +96,7 @@ setTimeout(() => {
         <IconButton
           name="分享"
           src="../static/share.png"
-          :onClick="() => (showShare = true)"
+          :onClick="toSharePage"
         />
         <IconButton
           name="教练点评"
@@ -99,7 +106,6 @@ setTimeout(() => {
         <SButton width="70vw" :rounded="30" :onClick="closePanel">完成</SButton>
       </view>
     </view>
-    <ImageShare :show="showShare" :onClose="() => (showShare = false)" />
     <ScreenHint :show="showComment" :onClose="() => (showComment = false)">
       {{ result.adjustmentHint }}
     </ScreenHint>

src/pages/first-try.vue

@@ -220,6 +220,7 @@ const onClose = () => {
         v-if="step === 4"
         :onClose="onClose"
         :result="practiseResult"
+        :dataType="1"
       />
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>

src/pages/image-share.vue

@@ -1,58 +1,55 @@
 <script setup>
-import { onMounted } from "vue";
+import { ref } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
-import { renderText, renderRankTitle, renderLine } from "@/util.js";
+import {
+  renderText,
+  renderRankTitle,
+  renderLine,
+  renderScores,
+  drawRoundImage,
+} from "@/util.js";
+import { getPractiseAPI } from "@/apis";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 
-const saveImage = () => {
-  uni.canvasToTempFilePath({
-    canvasId: "shareCanvas",
-    success: (res) => {
-      const tempFilePath = res.tempFilePath;
-
-      // 保存图片到相册
-      uni.saveImageToPhotosAlbum({
-        filePath: tempFilePath,
-        success: () => {
-          uni.showToast({ title: "保存成功" });
-        },
-        fail: () => {
-          uni.showToast({ title: "保存失败", icon: "error" });
-        },
-      });
-    },
-  });
-};
-
-onMounted(() => {
+onLoad(async (options) => {
+  const id = options.id || 462;
+  const data = await getPractiseAPI(id);
+  if (!data.arrows.length) return;
   var ctx = uni.createCanvasContext("shareCanvas");
-  const width = 302;
+  const width = 303;
   const height = 535;
   ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
-  ctx.drawImage("../static/avatar.png", 20, 20, 35, 35);
+  drawRoundImage(ctx, user.value.avatar, 20, 20, 35, 35, 20);
   ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
-  renderText(ctx, "用户名称", 14, "#fff", 70, 35);
-  renderRankTitle(ctx, "钻石1级");
-  ctx.drawImage(
-    "../static/first-try-title.png",
-    (width - 200) / 2,
-    155,
-    200,
-    53
-  );
-  renderText(ctx, "正式开启弓箭手之路", 22, "#fff", 53, 230);
+  renderText(ctx, user.value.nickName, 14, "#fff", 77, 35, "center");
+  renderRankTitle(ctx, user.value.lvlName, "center");
+
+  let titleImage = "../static/first-try-title.png";
+  let subTitle = "正式开启弓箭手之路";
+  if (options.type > 1) {
+    subTitle = `今日弓箭练习打卡 ${data.createdAt
+      .split(" ")[0]
+      .replaceAll("-", ".")}`;
+  }
+  if (options.type == 2) {
+    titleImage = "../static/practise-one-title.png";
+  } else if (options.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);
-  renderText(ctx, "50", 16, "#fed847", 144, 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);
-  for (let i = 0; i < 6; i++) {
-    ctx.drawImage("../static/score-bg.png", 16 + i * 46, 320, 40, 40);
-    renderText(ctx, "9", 25, "#fed847", 29 + i * 46, 349);
-  }
-  for (let i = 0; i < 6; i++) {
-    ctx.drawImage("../static/score-bg.png", 16 + i * 46, 366, 40, 40);
-    renderText(ctx, "9", 25, "#fed847", 29 + i * 46, 395);
-  }
+  renderScores(ctx, data.arrows);
   ctx.drawImage(
     "../static/device-icon.png",
     width * 0.06,
@@ -80,16 +77,38 @@ onMounted(() => {
   ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
   ctx.draw();
 });
+
+const saveImage = () => {
+  uni.canvasToTempFilePath({
+    canvasId: "shareCanvas",
+    success: (res) => {
+      const tempFilePath = res.tempFilePath;
+
+      // 保存图片到相册
+      uni.saveImageToPhotosAlbum({
+        filePath: tempFilePath,
+        success: () => {
+          uni.showToast({ title: "保存成功" });
+        },
+        fail: () => {
+          uni.showToast({ title: "保存失败", icon: "error" });
+        },
+      });
+    },
+  });
+};
 </script>
 
 <template>
   <Container>
     <view class="content">
-      <canvas
-        style="width: 302px; height: 534px"
-        canvas-id="shareCanvas"
-        id="firstCanvas"
-      ></canvas>
+      <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
+        <canvas
+          style="width: 302px; height: 534px"
+          canvas-id="shareCanvas"
+          id="firstCanvas"
+        ></canvas>
+      </view>
       <view class="footer">
         <view>
           <image src="../static/wechat-outline.png" mode="widthFix" />

src/pages/my-growth.vue

@@ -26,7 +26,7 @@ const toMatchDetail = (id) => {
 };
 const getPractiseDetail = async (id) => {
   const result = await getPractiseAPI(id);
-  arrows.value = JSON.parse(result.UserPracticeRound.arrows);
+  arrows.value = result.arrows;
   showBowData.value = true;
 };
 const onMatchLoading = async (page) => {

src/pages/practise-one.vue

@@ -111,6 +111,7 @@ onUnmounted(() => {
         :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
+        :dataType="2"
       />
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>

src/pages/practise-two.vue

@@ -111,6 +111,7 @@ onUnmounted(() => {
         :show="showScore"
         :onClose="onComplete"
         :result="practiseResult"
+        :dataType="3"
       />
       <StartCountdown :start="startCount" :onFinish="onStart" />
     </view>

src/store.js

@@ -5,6 +5,7 @@ const defaultUser = {
   nickName: "游客",
   avatar: "../static/avatar.png",
   trio: 0, // 大于1表示完成了新手引导
+  lvlName: "砖石1级",
 };
 
 // 定义游戏相关的 store

src/util.js

@@ -1,3 +1,48 @@
+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) {
+      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"
+      );
+    }
+  });
+}
+
 export function renderLine(ctx, from) {
   ctx.beginPath();
   ctx.lineWidth = 1;
@@ -8,9 +53,10 @@ export function renderLine(ctx, from) {
   ctx.stroke();
 }
 
-export function renderText(ctx, text, size, color, x, y) {
+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);
 }
 
@@ -19,11 +65,11 @@ export function renderRankTitle(ctx, text) {
   const textWidth = ctx.measureText(text).width;
   const padding = 8; // 文字与背景边缘的间距
   const radius = 10; // 圆角半径
-  const textX = 75;
+  const textX = 85;
   const textY = 55;
-  const x = textX - padding; // 文字 x 坐标减去内边距
+  const x = textX - padding - 15; // 文字 x 坐标减去内边距
   const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
-  const width = textWidth + padding * 2 - 15; // 背景宽度
+  const width = textWidth + padding * 2 - 19; // 背景宽度
   const height = fontSize + padding + 1; // 背景高度
 
   // 开始绘制圆角矩形
@@ -49,3 +95,39 @@ export function renderRankTitle(ctx, text) {
   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();
+};