|
|
@@ -422,8 +422,26 @@
|
|
|
ctx.fillStyle = '#FFFFFF';
|
|
|
ctx.fillRect(0, 0, cardWidth, cardHeight);
|
|
|
|
|
|
- // 2. 绘制主图
|
|
|
+ // 2. 绘制主图 (带圆角)
|
|
|
+ ctx.save(); // 保存当前画布状态
|
|
|
+ const borderRadius = 16 * rpxRatio; // 16rpx
|
|
|
+
|
|
|
+ // 创建圆角矩形路径
|
|
|
+ ctx.beginPath();
|
|
|
+ ctx.moveTo(cardPadding + borderRadius, cardPadding);
|
|
|
+ ctx.lineTo(cardPadding + contentWidth - borderRadius, cardPadding);
|
|
|
+ ctx.arcTo(cardPadding + contentWidth, cardPadding, cardPadding + contentWidth, cardPadding + borderRadius, borderRadius);
|
|
|
+ ctx.lineTo(cardPadding + contentWidth, cardPadding + mainImgHeight - borderRadius);
|
|
|
+ ctx.arcTo(cardPadding + contentWidth, cardPadding + mainImgHeight, cardPadding + contentWidth - borderRadius, cardPadding + mainImgHeight, borderRadius);
|
|
|
+ ctx.lineTo(cardPadding + borderRadius, cardPadding + mainImgHeight);
|
|
|
+ ctx.arcTo(cardPadding, cardPadding + mainImgHeight, cardPadding, cardPadding + mainImgHeight - borderRadius, borderRadius);
|
|
|
+ ctx.lineTo(cardPadding, cardPadding + borderRadius);
|
|
|
+ ctx.arcTo(cardPadding, cardPadding, cardPadding + borderRadius, cardPadding, borderRadius);
|
|
|
+ ctx.closePath();
|
|
|
+ ctx.clip(); // 裁剪后续绘图到此路径
|
|
|
+
|
|
|
ctx.drawImage(mainImg.path, cardPadding, cardPadding, contentWidth, mainImgHeight);
|
|
|
+ ctx.restore(); // 恢复画布状态 (移除裁剪路径)
|
|
|
|
|
|
let currentY = cardPadding + mainImgHeight + infoTopMargin;
|
|
|
|
|
|
@@ -466,7 +484,7 @@
|
|
|
ctx.textAlign = 'center';
|
|
|
ctx.font = `bold ${Math.round(20 * rpxRatio)}px "PingFang-SC", sans-serif`;
|
|
|
ctx.fillStyle = '#8B8B8B';
|
|
|
- ctx.fillText('微信扫一扫', rightX + rightPartWidth / 2, qrY + qrCodeHeight + 20 * rpxRatio);
|
|
|
+ ctx.fillText('微信扫一扫', rightX + rightPartWidth / 2, qrY + qrCodeHeight + 30 * rpxRatio);
|
|
|
ctx.textAlign = 'left'; // 恢复默认
|
|
|
|
|
|
// --- 生成图片 ---
|
