laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

分享图片优化

Browse Source
This commit is contained in:
kron
2025-06-22 16:15:37 +08:00
parent 1e681b46c7
commit fa219892e0
3 changed files with 45 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

@@ -162,7 +162,7 @@ button::after {
.share-canvas {
width: 300px;
height: 530px;
height: 534px;
position: absolute;
top: -1000px;
left: 0;

4
src/pages/image-share.vue
View File

@@ -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 = () => {
<view class="content">
<view :style="{ overflow: 'hidden', borderRadius: '10px' }">
<canvas
:style="{ width: '300px', height: '530px' }"
:style="{ width: '300px', height: '534px' }"
canvas-id="shareCanvas"
></canvas>
</view>

83
src/util.js
View File

@@ -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();
}