266 lines
6.9 KiB
JavaScript
266 lines
6.9 KiB
JavaScript
import websocket from "@/websocket";
|
|
|
|
export const formatTimestamp = (timestamp) => {
|
|
const date = new Date(timestamp * 1000);
|
|
const year = date.getFullYear();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
|
|
return `${year}年${month}月${day}号`;
|
|
};
|
|
|
|
export const checkConnection = () => {
|
|
uni.sendSocketMessage({
|
|
data: JSON.stringify({ event: "ping", data: {} }),
|
|
fail: () => {
|
|
const token = uni.getStorageSync("token");
|
|
if (!token) return;
|
|
// 如果发送失败，说明连接已断开，需要重新连接
|
|
websocket.createWebSocket(token, (content) => {
|
|
uni.$emit("socket-inbox", content);
|
|
});
|
|
},
|
|
});
|
|
};
|
|
|
|
export const debounce = (fn, delay = 300) => {
|
|
let timer = null;
|
|
return async (...args) => {
|
|
if (timer) clearTimeout(timer);
|
|
return new Promise((resolve) => {
|
|
timer = setTimeout(async () => {
|
|
try {
|
|
const result = await fn(...args);
|
|
resolve(result);
|
|
} finally {
|
|
timer = null;
|
|
}
|
|
}, delay);
|
|
});
|
|
};
|
|
};
|
|
|
|
export function renderScores(ctx, arrows = []) {
|
|
let rowIndex = 0;
|
|
arrows.forEach((item, i) => {
|
|
rowIndex = i;
|
|
if (arrows.length >= 36 && i < 36) {
|
|
ctx.drawImage(
|
|
"../static/score-bg.png",
|
|
16 + (i % 9) * 30,
|
|
290 + Math.ceil((i + 1) / 9) * 30,
|
|
27,
|
|
27,
|
|
"center"
|
|
);
|
|
renderText(
|
|
ctx,
|
|
item.ring,
|
|
18,
|
|
"#fed847",
|
|
29.5 + (i % 9) * 30,
|
|
310 + Math.ceil((i + 1) / 9) * 30,
|
|
"center"
|
|
);
|
|
} else if (arrows.length >= 12 && i < 12) {
|
|
if (i > 5) rowIndex = i - 6;
|
|
ctx.drawImage(
|
|
"../static/score-bg.png",
|
|
24 + rowIndex * 42,
|
|
i > 5 ? 362 : 320,
|
|
38,
|
|
38
|
|
);
|
|
renderText(
|
|
ctx,
|
|
item.ring,
|
|
23,
|
|
"#fed847",
|
|
43 + rowIndex * 42,
|
|
i > 5 ? 389 : 347,
|
|
"center"
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
export function renderLine(ctx, from) {
|
|
ctx.beginPath();
|
|
ctx.lineWidth = 1;
|
|
ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
|
|
const length = 35;
|
|
ctx.moveTo(from, 295);
|
|
ctx.lineTo(from + length, 295);
|
|
ctx.stroke();
|
|
}
|
|
|
|
export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
|
|
ctx.setFontSize(size);
|
|
ctx.setFillStyle(color);
|
|
ctx.setTextAlign(textAlign);
|
|
ctx.fillText(text, x, y);
|
|
}
|
|
|
|
export function renderRankTitle(ctx, text) {
|
|
const fontSize = 8;
|
|
const textWidth = ctx.measureText(text).width;
|
|
const padding = 8; // 文字与背景边缘的间距
|
|
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 - 25; // 背景宽度
|
|
const height = fontSize + padding - 2; // 背景高度
|
|
|
|
// 开始绘制圆角矩形
|
|
ctx.beginPath();
|
|
// 从左上角开始，顺时针绘制
|
|
ctx.moveTo(x + radius, y);
|
|
// 上边框
|
|
ctx.lineTo(x + width - radius, y);
|
|
ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
|
|
// 右边框
|
|
ctx.lineTo(x + width, y + height - radius);
|
|
ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
|
|
// 下边框
|
|
ctx.lineTo(x + radius, y + height);
|
|
ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
|
|
// 左边框
|
|
ctx.lineTo(x, y + radius);
|
|
ctx.quadraticCurveTo(x, y, x + radius, y);
|
|
|
|
// 设置背景颜色并填充
|
|
ctx.fillStyle = "#5F51FF";
|
|
ctx.fill();
|
|
ctx.setFontSize(fontSize);
|
|
ctx.setTextAlign("center");
|
|
ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
|
|
ctx.fillText(text, textX, textY); // 绘制文字
|
|
}
|
|
|
|
export const drawRoundImage = async (
|
|
ctx,
|
|
imgPath,
|
|
x,
|
|
y,
|
|
width,
|
|
height,
|
|
radius
|
|
) => {
|
|
ctx.save();
|
|
// 创建圆角路径
|
|
ctx.beginPath();
|
|
ctx.moveTo(x + radius, y);
|
|
|
|
// 右上角
|
|
ctx.lineTo(x + width - radius, y);
|
|
ctx.arcTo(x + width, y, x + width, y + radius, radius);
|
|
|
|
// 右下角
|
|
ctx.lineTo(x + width, y + height - radius);
|
|
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
|
|
|
|
// 左下角
|
|
ctx.lineTo(x + radius, y + height);
|
|
ctx.arcTo(x, y + height, x, y + height - radius, radius);
|
|
|
|
// 左上角
|
|
ctx.lineTo(x, y + radius);
|
|
ctx.arcTo(x, y, x + radius, y, radius);
|
|
|
|
ctx.clip();
|
|
// 绘制图片
|
|
ctx.drawImage(imgPath, x, y, width, height);
|
|
ctx.restore();
|
|
};
|
|
|
|
export async function generateCanvasImage(canvasId, type, user, data) {
|
|
try {
|
|
var ctx = uni.createCanvasContext(canvasId);
|
|
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(user.lvlImage, 12, 15, 42, 42);
|
|
renderText(ctx, user.nickName, 13, "#fff", 58, 34);
|
|
renderRankTitle(ctx, user.lvlName);
|
|
|
|
let titleImage = "../static/first-try-title.png";
|
|
let subTitle = "正式开启弓箭手之路";
|
|
if (type > 1) {
|
|
subTitle = `今日弓箭练习打卡 ${data.createdAt
|
|
.split(" ")[0]
|
|
.replaceAll("-", ".")}`;
|
|
}
|
|
if (type == 2) {
|
|
titleImage = "../static/practise-one-title.png";
|
|
} else if (type == 3) {
|
|
titleImage = "../static/practise-two-title.png";
|
|
}
|
|
ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
|
|
const subTitleWidth = ctx.measureText(subTitle).width;
|
|
renderText(
|
|
ctx,
|
|
subTitle,
|
|
18,
|
|
"#fff",
|
|
width / 2 - subTitleWidth - (type > 1 ? 15 : 9),
|
|
220
|
|
);
|
|
renderText(ctx, "共", 14, "#fff", 122, 300);
|
|
const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
|
|
renderText(ctx, totalRing, 14, "#fed847", 148, 300, "center");
|
|
renderText(ctx, "环", 14, "#fff", 161, 300);
|
|
renderLine(ctx, 77);
|
|
renderLine(ctx, 185);
|
|
renderScores(ctx, data.arrows);
|
|
ctx.drawImage(
|
|
"../static/device-icon.png",
|
|
width * 0.06,
|
|
height * 0.87,
|
|
48,
|
|
48
|
|
);
|
|
renderText(ctx, "射灵平台", 14, "#fff", width * 0.25, height * 0.9);
|
|
renderText(
|
|
ctx,
|
|
"快加入我们一起玩吧~",
|
|
10,
|
|
"rgba(255, 255, 255, 0.5)",
|
|
width * 0.25,
|
|
height * 0.93
|
|
);
|
|
renderText(
|
|
ctx,
|
|
"后羿就是这样练成的",
|
|
10,
|
|
"rgba(255, 255, 255, 0.5)",
|
|
width * 0.25,
|
|
height * 0.955
|
|
);
|
|
ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 56, 56);
|
|
ctx.draw();
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}
|
|
|
|
export const wxShare = async () => {
|
|
try {
|
|
const res = await uni.canvasToTempFilePath({
|
|
canvasId: "shareCanvas",
|
|
fileType: "png", // 图片格式，可选 jpg 或 png
|
|
quality: 1, // 图片质量，取值范围为 0-1
|
|
});
|
|
wx.showShareImageMenu({
|
|
path: res.tempFilePath,
|
|
});
|
|
} catch (error) {
|
|
uni.showToast({
|
|
title: "生成图片失败",
|
|
icon: "error",
|
|
});
|
|
}
|
|
};
|