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 用于生成完整图片,不显示在界面上 */} - - +