diff --git a/src/App.vue b/src/App.vue index ac36a21..c9158ea 100644 --- a/src/App.vue +++ b/src/App.vue @@ -162,7 +162,7 @@ button::after { .share-canvas { width: 300px; - height: 530px; + height: 534px; position: absolute; top: -1000px; left: 0; diff --git a/src/pages/image-share.vue b/src/pages/image-share.vue index d43334a..b92747b 100644 --- a/src/pages/image-share.vue +++ b/src/pages/image-share.vue @@ -11,7 +11,7 @@ const store = useStore(); const { user } = storeToRefs(store); onLoad(async (options) => { - const id = options.id || 462; + const id = options.id || 461; const data = await getPractiseAPI(id); if (!data.arrows.length) return; generateCanvasImage("shareCanvas", options.type, user.value, data); @@ -43,7 +43,7 @@ const saveImage = () => { diff --git a/src/util.js b/src/util.js index 7e3f990..7641238 100644 --- a/src/util.js +++ b/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(); }