diff --git a/src/components/Radar/indexV2.tsx b/src/components/Radar/indexV2.tsx index 27cc167..3a5e4ee 100644 --- a/src/components/Radar/indexV2.tsx +++ b/src/components/Radar/indexV2.tsx @@ -445,12 +445,62 @@ const RadarChartV2 = forwardRef((props, ref) }); - // 绘制二维码 - 设计稿位置 + // 绘制二维码 - 设计稿位置(带白色背景、边框、阴影和圆角) if (options.qrCodeUrl) { try { const qrImg = await loadImage(canvas, options.qrCodeUrl); - ctx.drawImage(qrImg, qrX, qrY, qrSize, qrSize); + + // 二维码样式参数(2倍图) + const borderWidth = 2 * scale; // 边框宽度 2px + const borderRadius = 10 * scale; // 圆角 10px + const shadowOffsetX = 0; // 阴影 X 偏移 + const shadowOffsetY = 1.04727 * scale; // 阴影 Y 偏移 1.04727px + const shadowBlur = 9.42545 * scale; // 阴影模糊 9.42545px + const shadowColor = "rgba(0, 0, 0, 0.12)"; // 阴影颜色 + + // 二维码实际绘制区域(留出边框空间) + const qrInnerSize = qrSize - borderWidth * 2; + const qrInnerX = qrX + borderWidth; + const qrInnerY = qrY + borderWidth; + + // 保存上下文状态 + ctx.save(); + + // 设置阴影 + ctx.shadowOffsetX = shadowOffsetX; + ctx.shadowOffsetY = shadowOffsetY; + ctx.shadowBlur = shadowBlur; + ctx.shadowColor = shadowColor; + + // 绘制白色背景(圆角矩形) + ctx.fillStyle = "#FFFFFF"; + roundRect(ctx, qrX, qrY, qrSize, qrSize, borderRadius); + ctx.fill(); + + // 绘制白色边框 + ctx.strokeStyle = "#FFFFFF"; + ctx.lineWidth = borderWidth; + roundRect(ctx, qrX, qrY, qrSize, qrSize, borderRadius); + ctx.stroke(); + + // 清除阴影(二维码图片不需要阴影) + ctx.shadowOffsetX = 0; + ctx.shadowOffsetY = 0; + ctx.shadowBlur = 0; + ctx.shadowColor = "transparent"; + + // 绘制二维码图片(在圆角矩形内) + ctx.save(); + // 创建圆角裁剪区域 + roundRect(ctx, qrInnerX, qrInnerY, qrInnerSize, qrInnerSize, borderRadius - borderWidth); + ctx.clip(); + // 绘制二维码图片 + ctx.drawImage(qrImg, qrInnerX, qrInnerY, qrInnerSize, qrInnerSize); + ctx.restore(); + + // 恢复上下文状态 + ctx.restore(); } catch (error) { console.error("Failed to load QR code:", error); }