分享图片优化

src/util.js

@@ -22,7 +22,7 @@ export function renderScores(ctx, arrows = []) {
     if (arrows.length >= 36 && i < 36) {
       ctx.drawImage(
         "../static/score-bg.png",
-        18 + (i % 9) * 30,
+        16 + (i % 9) * 30,
         290 + Math.ceil((i + 1) / 9) * 30,
         27,
         27,
@@ -33,7 +33,7 @@ export function renderScores(ctx, arrows = []) {
         item.ring,
         18,
         "#fed847",
-        31 + (i % 9) * 30,
+        30 + (i % 9) * 30,
         310 + Math.ceil((i + 1) / 9) * 30,
         "center"
       );
@@ -41,18 +41,18 @@ export function renderScores(ctx, arrows = []) {
       if (i > 5) rowIndex = i - 6;
       ctx.drawImage(
         "../static/score-bg.png",
-        16 + rowIndex * 46,
-        i > 5 ? 366 : 320,
-        40,
-        40
+        24 + rowIndex * 42,
+        i > 5 ? 362 : 320,
+        38,
+        38
       );
       renderText(
         ctx,
         item.ring,
-        25,
+        23,
         "#fed847",
-        36 + rowIndex * 46,
-        i > 5 ? 395 : 349,
+        43 + rowIndex * 42,
+        i > 5 ? 389 : 347,
         "center"
       );
     }
@@ -64,8 +64,8 @@ export function renderLine(ctx, from) {
   ctx.lineWidth = 1;
   ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
   const length = 35;
-  ctx.moveTo(from, 293);
-  ctx.lineTo(from + length, 293);
+  ctx.moveTo(from, 295);
+  ctx.lineTo(from + length, 295);
   ctx.stroke();
 }
 
@@ -80,29 +80,30 @@ export function renderRankTitle(ctx, text) {
   const fontSize = 8;
   const textWidth = ctx.measureText(text).width;
   const padding = 8; // 文字与背景边缘的间距
-  const radius = 10; // 圆角半径
-  const textX = 85;
-  const textY = 52;
-  const x = textX - padding - 12; // 文字 x 坐标减去内边距
-  const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
-  const width = textWidth + padding * 2 - 24; // 背景宽度
-  const height = fontSize + padding; // 背景高度
+  const radius = 8; // 圆角半径
+  const textX = 76;
+  const textY = 50;
+  const x = textX - padding - 10; // 文字 x 坐标减去内边距
+  const y = textY - fontSize - padding / 2 + 2; // 文字 y 坐标减去字体大小和内边距
+  const width = textWidth + padding * 2 - 27; // 背景宽度
+  const height = fontSize + padding - 2; // 背景高度
 
   // 开始绘制圆角矩形
   ctx.beginPath();
+  // 从左上角开始，顺时针绘制
   ctx.moveTo(x + radius, y);
   // 上边框
   ctx.lineTo(x + width - radius, y);
-  ctx.arcTo(x + width, y, x + width, y + radius, radius);
+  ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
   // 右边框
   ctx.lineTo(x + width, y + height - radius);
-  ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
+  ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
   // 下边框
   ctx.lineTo(x + radius, y + height);
-  ctx.arcTo(x, y + height, x, y + height - radius, radius);
+  ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
   // 左边框
   ctx.lineTo(x, y + radius);
-  ctx.arcTo(x, y, x + radius, y, radius);
+  ctx.quadraticCurveTo(x, y, x + radius, y);
 
   // 设置背景颜色并填充
   ctx.fillStyle = "#5F51FF";
@@ -150,12 +151,12 @@ export const drawRoundImage = async (
 
 export function generateCanvasImage(canvasId, type, user, data) {
   var ctx = uni.createCanvasContext(canvasId);
-  const width = 303;
-  const height = 535;
-  ctx.drawImage("../static/share-bg.png", 0, 0, 300, 530);
-  drawRoundImage(ctx, user.avatar, 17, 20, 37, 37, 20);
-  ctx.drawImage("../static/avatar-frame.png", 12, 15, 47, 47);
-  renderText(ctx, user.nickName, 14, "#fff", 80, 32, "center");
+  const width = 300;
+  const height = 534;
+  ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
+  drawRoundImage(ctx, user.avatar, 17, 20, 32, 32, 20);
+  ctx.drawImage("../static/avatar-frame.png", 12, 15, 42, 42);
+  renderText(ctx, user.nickName, 13, "#fff", 72, 34, "center");
   renderRankTitle(ctx, user.lvlName, "center");
 
   let titleImage = "../static/first-try-title.png";
@@ -180,38 +181,38 @@ export function generateCanvasImage(canvasId, type, user, data) {
     width / 2 - subTitleWidth - (type > 1 ? 15 : 13),
     220
   );
-  renderText(ctx, "共", 16, "#fff", 124, 300);
+  renderText(ctx, "共", 14, "#fff", 124, 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);
+  renderText(ctx, totalRing, 14, "#fed847", 150, 300, "center");
+  renderText(ctx, "环", 14, "#fff", 163, 300);
   renderLine(ctx, 80);
-  renderLine(ctx, 192);
+  renderLine(ctx, 187);
   renderScores(ctx, data.arrows);
   ctx.drawImage(
     "../static/device-icon.png",
     width * 0.06,
     height * 0.87,
-    55,
-    55
+    48,
+    48
   );
-  renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
+  renderText(ctx, "射灵平台", 14, "#fff", width * 0.25, height * 0.9);
   renderText(
     ctx,
     "快加入我们一起玩吧~",
-    11,
+    10,
     "rgba(255, 255, 255, 0.5)",
-    width * 0.28,
+    width * 0.25,
     height * 0.93
   );
   renderText(
     ctx,
     "后羿就是这样练成的",
-    11,
+    10,
     "rgba(255, 255, 255, 0.5)",
-    width * 0.28,
-    height * 0.96
+    width * 0.25,
+    height * 0.955
   );
-  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
+  ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 56, 56);
   ctx.draw();
 }