From db293350f05d9909db6255f398ec7b06f871d5b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= Date: Sat, 6 Dec 2025 19:05:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B5=8B=E8=AF=95=E7=BB=93=E6=9E=9C?= =?UTF-8?q?=E9=A1=B5=E9=9B=B7=E8=BE=BE=E5=9B=BE=E6=A0=B7=E5=BC=8F=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=20&=20=E4=BF=9D=E5=AD=98=E5=9B=BE=E7=89=87=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E6=8F=90=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Radar/index.tsx | 14 +++---- .../ntrp-evaluate/index.module.scss | 3 +- src/other_pages/ntrp-evaluate/index.tsx | 37 ++++++++++++++----- src/utils/genPoster.ts | 2 - 4 files changed, 36 insertions(+), 20 deletions(-) diff --git a/src/components/Radar/index.tsx b/src/components/Radar/index.tsx index 4237510..ca71305 100644 --- a/src/components/Radar/index.tsx +++ b/src/components/Radar/index.tsx @@ -38,13 +38,13 @@ const RadarChart: React.FC = forwardRef((props, ref) => { canvas.width = res[0].width * dpr; canvas.height = res[0].height * dpr; ctx.scale(dpr, dpr); - + // 启用抗锯齿，消除锯齿 ctx.imageSmoothingEnabled = true; - ctx.imageSmoothingQuality = 'high'; + ctx.imageSmoothingQuality = "high"; // 设置线条端点样式为圆形，减少锯齿 - ctx.lineCap = 'round'; - ctx.lineJoin = 'round'; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; // === 绘制圆形网格 === for (let i = levels; i >= 1; i--) { @@ -52,10 +52,10 @@ const RadarChart: React.FC = forwardRef((props, ref) => { ctx.beginPath(); ctx.arc(center.x, center.y, r, 0, Math.PI * 2); if (i % 2 === 1) { - ctx.fillStyle = "#fff"; + ctx.fillStyle = "rgba(255, 255, 255, 0.4)"; ctx.fill(); } else { - ctx.fillStyle = "#CAFCF0"; + ctx.fillStyle = "rgba(149, 249, 225, 0.4)"; ctx.fill(); } // 根据层级设置不同的线条颜色，中间圆圈使用更浅的颜色 @@ -70,7 +70,7 @@ const RadarChart: React.FC = forwardRef((props, ref) => { ctx.strokeStyle = "#D5D5D5"; } // 设置线条宽度为1px，确保清晰 - ctx.lineWidth = 1; + ctx.lineWidth = 0.5; ctx.stroke(); } diff --git a/src/other_pages/ntrp-evaluate/index.module.scss b/src/other_pages/ntrp-evaluate/index.module.scss index e83d71e..7b5ac7c 100644 --- a/src/other_pages/ntrp-evaluate/index.module.scss +++ b/src/other_pages/ntrp-evaluate/index.module.scss @@ -546,7 +546,8 @@ align-self: stretch; border-radius: 26px; border: 4px solid #fff; - background: linear-gradient(180deg, #bfffef 0%, #f2fffc 100%), #fff; + // background: linear-gradient(180deg, #bfffef 0%, #f2fffc 100%), #fff; + background-size: contain; box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1); .avatarWrap { diff --git a/src/other_pages/ntrp-evaluate/index.tsx b/src/other_pages/ntrp-evaluate/index.tsx index acd3c06..ed05cab 100644 --- a/src/other_pages/ntrp-evaluate/index.tsx +++ b/src/other_pages/ntrp-evaluate/index.tsx @@ -602,10 +602,10 @@ function Result() { ); } } - + // 使用 RadarV2 的 generateFullImage 方法生成完整图片 const userNickname = (userInfo as any)?.nickname; - const titleText = userNickname + const titleText = userNickname ? `${userNickname}的 NTRP 测试结果为` : "你的 NTRP 测试结果为"; const imageUrl = await radarV2Ref.current?.generateFullImage({ @@ -658,6 +658,7 @@ function Result() { try { const url = await genCardImage(); Taro.saveImageToPhotosAlbum({ filePath: url }); + Taro.showToast({ title: "保存成功" }); } catch (e) { Taro.showToast({ title: "图片保存失败", icon: "none" }); } @@ -691,7 +692,12 @@ function Result() { return ( - + - {(userInfo as any)?.nickname + {(userInfo as any)?.nickname ? `${(userInfo as any).nickname}的 NTRP 测试结果为` : "你的 NTRP 测试结果为"} @@ -776,13 +782,24 @@ function Result() { {/* 隐藏的 RadarV2 用于生成完整图片，不显示在界面上 */} - - +