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

canvas代码优化

Browse Source
This commit is contained in:
kron
2026-01-08 10:30:41 +08:00
parent c9a7c1ae8b
commit 4aa14c6a4c
12 changed files with 490 additions and 613 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.vue
View File

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

464
src/canvas.js
View File

@@ -1,4 +1,15 @@
import { loadImage } from "@/util";
const loadImage = (src) =>
new Promise((resolve, reject) => {
try {
uni.getImageInfo({
src,
success: (res) => resolve(res.path || res.tempFilePath || src),
fail: (e) => reject(e),
});
} catch (e) {
reject(src);
}
});
function drawLine(ctx, x1, y1, x2, y2, color = "#000", width = 1) {
ctx.beginPath();
@@ -482,7 +493,7 @@ async function loadCanvasImage(canvas, src) {
});
}
export const sharePractiseData = async (canvasId, data) => {
export const sharePointData = async (canvasId, data) => {
try {
const width = 375;
const height = 460;
@@ -550,3 +561,452 @@ export const sharePractiseData = async (canvasId, data) => {
console.error("generateShareImage 绘制失败:", e);
}
};
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);
// 设置背景颜色并填充
if (typeof ctx.setFillStyle === "function") {
ctx.setFillStyle("#5F51FF");
} else {
ctx.fillStyle = "#5F51FF";
}
ctx.fill();
if (typeof ctx.setFontSize === "function") {
ctx.setFontSize(fontSize);
ctx.setTextAlign("center");
ctx.setFillStyle("rgba(255, 255, 255, 0.9)");
} else {
ctx.font = `${fontSize}px sans-serif`;
ctx.textAlign = "center";
ctx.fillStyle = "rgba(255, 255, 255, 0.9)";
}
ctx.fillText(text, textX, textY); // 绘制文字
}
export function renderScores(ctx, arrows = [], bgImg) {
let rowIndex = 0;
arrows.forEach((item, i) => {
rowIndex = i;
if (arrows.length >= 36 && i < 36) {
if (bgImg) {
ctx.drawImage(
bgImg,
16 + (i % 9) * 30,
290 + Math.ceil((i + 1) / 9) * 30,
27,
27
);
} else {
ctx.drawImage(
"../static/score-bg.png",
16 + (i % 9) * 30,
290 + Math.ceil((i + 1) / 9) * 30,
27,
27
);
}
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;
if (bgImg) {
ctx.drawImage(bgImg, 24 + rowIndex * 42, i > 5 ? 362 : 320, 38, 38);
} else {
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();
if (typeof ctx.setLineWidth === "function") {
ctx.setLineWidth(1);
ctx.setStrokeStyle("rgba(255, 255, 255, 0.3)");
} else {
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 async function sharePractiseData(canvasId, type, user, data) {
try {
const width = 300;
const height = 530;
const { canvas, ctx } = await getCanvas2DContext(canvasId, width, height);
// 预加载所有图片
const bgImgSrc = await loadImage(
"https://static.shelingxingqiu.com/attachment/2026-01-07/dfia8qlexbwoqaezyd.png"
);
const bgImg = await loadCanvasImage(canvas, bgImgSrc);
const avatarImgPromise = loadImage(user.avatar).then((path) =>
loadCanvasImage(canvas, path)
);
const lvlImgPromise = loadImage(user.lvlImage).then((path) =>
loadCanvasImage(canvas, path)
);
let titleImageSrc = "../static/first-try-title.png";
if (type == 2) {
titleImageSrc = "../static/practise-one-title.png";
} else if (type == 3) {
titleImageSrc = "../static/practise-two-title.png";
}
const titleImgPromise = loadCanvasImage(canvas, titleImageSrc);
const scoreBgImgPromise = loadCanvasImage(canvas, "../static/score-bg.png");
const qrCodeImgPromise = loadCanvasImage(canvas, "../static/qr-code.png");
const [avatarImg, lvlImg, titleImg, scoreBgImg, qrCodeImg] =
await Promise.all([
avatarImgPromise,
lvlImgPromise,
titleImgPromise,
scoreBgImgPromise,
qrCodeImgPromise,
]);
// 先填充整体背景色
ctx.fillStyle = "#F5F5F5";
ctx.fillRect(0, 0, width, height);
ctx.drawImage(bgImg, 0, 0, width, height);
drawRoundImage(ctx, avatarImg, 17, 20, 32, 32, 20);
ctx.drawImage(lvlImg, 12, 15, 42, 42);
renderText(ctx, user.nickName, 13, "#fff", 58, 34);
renderRankTitle(ctx, user.lvlName);
let subTitle = "正式开启弓箭手之路";
if (type > 1) {
subTitle = `今日弓箭练习打卡 ${data.createdAt
.split(" ")[0]
.replaceAll("-", ".")}`;
}
ctx.drawImage(titleImg, (width - 160) / 2, 160, 160, 40);
ctx.font = "18px sans-serif";
renderText(ctx, subTitle, 18, "#fff", width / 2, 224, "center");
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, scoreBgImg);
ctx.drawImage(qrCodeImg, width * 0.06, height * 0.87, 52, 52);
renderText(ctx, "射灵平台", 12, "#fff", width * 0.26, height * 0.9);
renderText(
ctx,
"快加入我们一起玩吧~",
9,
"rgba(255, 255, 255, 0.5)",
width * 0.26,
height * 0.93
);
renderText(
ctx,
"后羿就是这样练成的",
9,
"rgba(255, 255, 255, 0.5)",
width * 0.26,
height * 0.955
);
// 2D 模式下无需 ctx.draw()
} catch (err) {
console.log(err);
}
}
export const generateShareCard = (canvasId, date, actual, total) => {
try {
const ctx = uni.createCanvasContext(canvasId);
const imgUrl =
"https://static.shelingxingqiu.com/attachment/2025-11-04/ddzpm4tyh5vunyacsr.png";
const drawWidth = 375;
const drawHeight = 300;
// 先填充整体背景色
if (typeof ctx.setFillStyle === "function") {
ctx.setFillStyle("#F5F5F5");
} else {
ctx.fillStyle = "#F5F5F5";
}
if (typeof ctx.fillRect === "function") {
ctx.fillRect(0, 0, drawWidth, drawHeight);
}
// 兼容第三个参数传入 "actual/total" 的情况
let a = actual;
let t = total;
if (
(t === undefined || t === null) &&
typeof a === "string" &&
a.includes("/")
) {
const parts = a.split("/");
a = parts[0];
t = parts[1] || "";
}
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: imgUrl,
success: (res) => {
const path = res.path || res.tempFilePath || imgUrl;
if (typeof ctx.clearRect === "function") {
ctx.clearRect(0, 0, drawWidth, drawHeight);
}
ctx.drawImage(path, 0, 0, drawWidth, drawHeight);
// 绘制左上角日期（白色，22px）
renderText(ctx, String(date || ""), 18, "#FFFFFF", 6, 20, "left");
// 居中绘制第三个参数为圆角黑底标签
const rectW = 200;
const rectH = 78;
const radius = 39;
const rectX = (drawWidth - rectW) / 2;
const rectY = (drawHeight - rectH) / 2 - 12;
ctx.save();
ctx.beginPath();
ctx.moveTo(rectX + radius, rectY);
ctx.lineTo(rectX + rectW - radius, rectY);
ctx.quadraticCurveTo(
rectX + rectW,
rectY,
rectX + rectW,
rectY + radius
);
ctx.lineTo(rectX + rectW, rectY + rectH - radius);
ctx.quadraticCurveTo(
rectX + rectW,
rectY + rectH,
rectX + rectW - radius,
rectY + rectH
);
ctx.lineTo(rectX + radius, rectY + rectH);
ctx.quadraticCurveTo(
rectX,
rectY + rectH,
rectX,
rectY + rectH - radius
);
ctx.lineTo(rectX, rectY + radius);
ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
ctx.closePath();
ctx.setFillStyle("rgba(0,0,0,0.5)");
ctx.fill();
ctx.restore();
// 居中排版：左侧显示 actual/，右侧显示 total，再追加“环”
ctx.save();
if (typeof ctx.setTextBaseline === "function")
ctx.setTextBaseline("middle");
const centerX = rectX + rectW / 2;
const centerY = rectY + rectH / 2;
// 左半部：右对齐 actual/
renderText(ctx, `${a}/`, 40, "#FFFFFF", centerX, centerY, "right");
// 右半部：左对齐 total
renderText(
ctx,
`${t || ""}`,
30,
"#FFFFFF",
centerX,
centerY,
"left"
);
// 追加单位“环”：放在 total 文本之后 16px
const totalWidth = ctx.measureText(`${t || ""}`).width || 0;
renderText(
ctx,
"环",
20,
"#FFFFFF",
centerX + totalWidth + 5,
centerY,
"left"
);
ctx.restore();
ctx.draw(false, () => {
try {
uni.canvasToTempFilePath({
canvasId,
width: drawWidth,
height: drawHeight,
destWidth: drawWidth,
destHeight: drawHeight,
fileType: "png",
quality: 1,
success: (r) => {
const path = r.tempFilePath || r.apFilePath || r.filePath;
resolve(path);
},
fail: (err) => reject(err),
});
} catch (err) {
reject(err);
}
});
},
fail: () => {
try {
ctx.drawImage(imgUrl, 0, 0, drawWidth, drawHeight);
// 绘制左上角日期（白色，22px）
renderText(ctx, String(date || ""), 22, "#FFFFFF", 10, 22, "left");
// 居中绘制第三个参数为圆角黑底标签
const rectW = 200;
const rectH = 78;
const radius = 39;
const rectX = (drawWidth - rectW) / 2;
const rectY = (drawHeight - rectH) / 2;
ctx.save();
ctx.beginPath();
ctx.moveTo(rectX + radius, rectY);
ctx.lineTo(rectX + rectW - radius, rectY);
ctx.quadraticCurveTo(
rectX + rectW,
rectY,
rectX + rectW,
rectY + radius
);
ctx.lineTo(rectX + rectW, rectY + rectH - radius);
ctx.quadraticCurveTo(
rectX + rectW,
rectY + rectH,
rectX + rectW - radius,
rectY + rectH
);
ctx.lineTo(rectX + radius, rectY + rectH);
ctx.quadraticCurveTo(
rectX,
rectY + rectH,
rectX,
rectY + rectH - radius
);
ctx.lineTo(rectX, rectY + radius);
ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
ctx.closePath();
ctx.setFillStyle("rgba(0,0,0,0.5)");
ctx.fill();
ctx.restore();
// 居中排版：左侧显示 actual/，右侧显示 total，再追加“环”
ctx.save();
if (typeof ctx.setTextBaseline === "function")
ctx.setTextBaseline("middle");
const centerX = rectX + rectW / 2;
const centerY = rectY + rectH / 2;
// 左半部：右对齐 actual/
renderText(ctx, `${a}/`, 40, "#FFFFFF", centerX, centerY, "right");
// 右半部：左对齐 total
renderText(
ctx,
`${t || ""}`,
35,
"#FFFFFF",
centerX,
centerY,
"left"
);
// 追加单位“环”：放在 total 文本之后 16px
const totalWidth = ctx.measureText(`${t || ""}`).width || 0;
renderText(
ctx,
"环",
20,
"#FFFFFF",
centerX + totalWidth + 5,
centerY,
"left"
);
ctx.restore();
ctx.draw(false, () => {
try {
uni.canvasToTempFilePath({
canvasId,
width: drawWidth,
height: drawHeight,
destWidth: drawWidth,
destHeight: drawHeight,
fileType: "png",
quality: 1,
success: (r) => {
const path = r.tempFilePath || r.apFilePath || r.filePath;
resolve(path);
},
fail: (err) => reject(err),
});
} catch (err) {
reject(err);
}
});
} catch (e) {
reject(e);
}
},
});
});
} catch (e) {
console.error("generateShareCardImage 绘制失败:", e);
}
};

32
src/pages/first-try.vue
View File

@@ -13,8 +13,9 @@ import BowPower from "@/components/BowPower.vue";
import TestDistance from "@/components/TestDistance.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import audioManager from "@/audioManager";
import { createPractiseAPI } from "@/apis";
import { generateCanvasImage, wxShare, debounce } from "@/util";
import { createPractiseAPI, getPractiseAPI } from "@/apis";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -60,34 +61,29 @@ const createPractise = async (arrows) => {
if (result) practiseId.value = result.id;
};
const onOver = async () => {
start.value = false;
practiseResult.value = await getPractiseAPI(practiseId.value);
};
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
if (scores.value.length < total) {
scores.value.push(msg.target);
}
if (step.value === 2 && msg.target.dst / 100 >= 5) {
btnDisabled.value = false;
showGuide.value = true;
} else if (scores.value.length < total) {
scores.value.push(msg.target);
}
}
if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
if (practiseId.value && practiseId.value === msg.practice.id) {
setTimeout(() => {
start.value = false;
practiseResult.value = {
...msg.practice,
arrows: JSON.parse(msg.practice.arrows),
lvl: msg.lvl,
};
}, 1500);
if (scores.value.length === total) {
setTimeout(onOver, 1500);
}
}
});
}
const onClickShare = debounce(async () => {
await generateCanvasImage("shareCanvas", 1, user.value, practiseResult.value);
await sharePractiseData("shareCanvas", 1, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
@@ -262,7 +258,7 @@ const onClose = () => {
: ''
}finish-tip.png`"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</view>
<view :style="{ marginBottom: '20px' }">
<SButton v-if="step !== 4" :onClick="nextStep" :disabled="btnDisabled">

72
src/pages/index.vue
View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, watch } from "vue";
import { ref, onMounted } from "vue";
import { onShow, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import AppFooter from "@/components/AppFooter.vue";
@@ -8,7 +8,6 @@ import UserHeader from "@/components/UserHeader.vue";
import SModal from "@/components/SModal.vue";
import Signin from "@/components/Signin.vue";
import BubbleTip from "@/components/BubbleTip.vue";
import ScreenHint2 from "@/components/ScreenHint2.vue";
import {
getAppConfig,
@@ -35,7 +34,6 @@ const {
const { user, device, rankData, online } = storeToRefs(store);
const showModal = ref(false);
const showGuide = ref(false);
const showTheUser = ref(false);
const toPage = async (path) => {
if (!user.value.id) {
@@ -58,22 +56,6 @@ const toRankListPage = () => {
});
};
watch(
() => user.value.id,
(newVal) => {
if (newVal && "823,209,293,257,210,290".indexOf(newVal) !== -1) {
const show = uni.getStorageSync("show-the-user");
if (!show) {
showTheUser.value = true;
uni.setStorageSync("show-the-user", true);
}
}
},
{
deep: false,
}
);
onShow(async () => {
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
@@ -265,23 +247,6 @@ onShareTimeline(() => {
<SModal :show="showModal" :onClose="() => (showModal = false)">
<Signin :onClose="() => (showModal = false)" />
</SModal>
<ScreenHint2 :show="showTheUser" :onClose="() => (showTheUser = false)">
<view class="tip-content">
<text>公告</text>
<text>小程序问题找客服 1v1 解答！</text>
<view>
<text>反馈 bug 可领取红包</text>
<image src="../static/hongbao.png" mode="widthFix" />
</view>
<text>射箭爱好者群等你，扫码加入～</text>
<image
src="../static/service-wechat.png"
mode="widthFix"
show-menu-by-longpress
/>
<text>长按添加客服</text>
</view>
</ScreenHint2>
</view>
<AppFooter />
</Container>
@@ -467,41 +432,6 @@ onShareTimeline(() => {
line-height: 25px;
font-weight: 500;
}
.tip-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #333333;
line-height: 42rpx;
padding: 40rpx;
}
.tip-content > text:first-child {
font-weight: 500;
font-size: 30rpx;
color: #333333;
margin: 20rpx 0;
}
.tip-content > view {
display: flex;
align-items: center;
justify-content: center;
}
.tip-content > view > image {
width: 26rpx;
height: 32rpx;
margin-left: 5rpx;
}
.tip-content > image {
width: 302rpx;
height: 302rpx;
margin: 10rpx;
}
.tip-content > text:last-child {
font-size: 24rpx;
color: #999999;
}
.top-theme {
position: absolute;
display: flex;

4
src/pages/point-book-detail.vue
View File

@@ -7,8 +7,8 @@ import ScreenHint2 from "@/components/ScreenHint2.vue";
import RingBarChart from "@/components/RingBarChart.vue";
import { getPointBookDetailAPI, addNoteAPI } from "@/apis";
import { wxShare, generateShareCard } from "@/util";
import { generateShareImage } from "@/canvas";
import { wxShare } from "@/util";
import { generateShareImage, generateShareCard } from "@/canvas";
import useStore from "@/store";
import { storeToRefs } from "pinia";

4
src/pages/point-book-rank.vue
View File

@@ -5,7 +5,7 @@ import PointRankItem from "@/components/PointRankItem.vue";
import { getPointBookRankListAPI } from "@/apis";
import { capsuleHeight } from "@/util";
import { wxShare } from "@/util";
import { sharePractiseData } from "@/canvas";
import { sharePointData } from "@/canvas";
const list = ref([]);
const mine = ref({
@@ -24,7 +24,7 @@ const onLoad = async (page) => {
const shareImage = async () => {
if (loading.value || !mine.value.id) return;
loading.value = true;
await sharePractiseData("shareCanvas", mine.value);
await sharePointData("shareCanvas", mine.value);
await wxShare("shareCanvas");
loading.value = false;
};

7
src/pages/practise-one.vue
View File

@@ -14,7 +14,8 @@ import BubbleTip from "@/components/BubbleTip.vue";
import audioManager from "@/audioManager";
import { createPractiseAPI, getPractiseAPI } from "@/apis";
import { generateCanvasImage, wxShare, debounce } from "@/util";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import useStore from "@/store";
@@ -84,7 +85,7 @@ async function onComplete() {
}
const onClickShare = debounce(async () => {
await generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
await sharePractiseData("shareCanvas", 2, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
@@ -155,7 +156,7 @@ onBeforeUnmount(() => {
: ''
}finish-tip.png`"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</block>
</view>
<view :style="{ marginBottom: '20px' }">

7
src/pages/practise-two.vue
View File

@@ -13,7 +13,8 @@ import BubbleTip from "@/components/BubbleTip.vue";
import audioManager from "@/audioManager";
import { createPractiseAPI, getPractiseAPI } from "@/apis";
import { generateCanvasImage, wxShare, debounce } from "@/util";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
@@ -78,7 +79,7 @@ async function onComplete() {
}
const onClickShare = debounce(async () => {
await generateCanvasImage("shareCanvas", 3, user.value, practiseResult.value);
await sharePractiseData("shareCanvas", 3, user.value, practiseResult.value);
await wxShare("shareCanvas");
});
@@ -146,7 +147,7 @@ onBeforeUnmount(() => {
: ''
}finish-tip.png`"
/>
<canvas class="share-canvas" canvas-id="shareCanvas"></canvas>
<canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
</block>
</view>
<view :style="{ marginBottom: '20px' }">

BIN
src/static/hongbao.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 487 B

BIN
src/static/service-wechat.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 20 KiB

BIN
src/static/share-bg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

511
src/util.js
View File

@@ -26,287 +26,6 @@ export const debounce = (fn, delay = 300) => {
};
};
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",
rotateDeg = 0
) {
ctx.setFontSize(size);
ctx.setFillStyle(color);
ctx.setTextAlign(textAlign);
if (rotateDeg) {
ctx.save();
ctx.translate(x, y);
ctx.rotate((Math.PI / 180) * rotateDeg);
ctx.fillText(text, 0, 0);
ctx.restore();
} else {
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,
borderColor = null,
borderWidth = 0
) => {
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();
// 绘制边框（可选）
if (borderWidth > 0 && borderColor) {
// 内收路径，使描边完全落在给定宽高内
const inset = borderWidth / 2;
const bx = x + inset;
const by = y + inset;
const bw = width - inset * 2;
const bh = height - inset * 2;
const br = Math.max(radius - inset, 0);
ctx.beginPath();
ctx.moveTo(bx + br, by);
// 右上角
ctx.lineTo(bx + bw - br, by);
ctx.arcTo(bx + bw, by, bx + bw, by + br, br);
// 右下角
ctx.lineTo(bx + bw, by + bh - br);
ctx.arcTo(bx + bw, by + bh, bx + bw - br, by + bh, br);
// 左下角
ctx.lineTo(bx + br, by + bh);
ctx.arcTo(bx, by + bh, bx, by + bh - br, br);
// 左上角
ctx.lineTo(bx, by + br);
ctx.arcTo(bx, by, bx + br, by, br);
if (typeof ctx.setLineWidth === "function") {
ctx.setLineWidth(borderWidth);
} else {
ctx.lineWidth = borderWidth;
}
if (typeof ctx.setStrokeStyle === "function") {
ctx.setStrokeStyle(borderColor);
} else {
ctx.strokeStyle = borderColor;
}
ctx.stroke();
}
};
export const loadImage = (src) =>
new Promise((resolve, reject) => {
try {
uni.getImageInfo({
src,
success: (res) => resolve(res.path || res.tempFilePath || src),
fail: (e) => reject(e),
});
} catch (e) {
reject(src);
}
});
export async function generateCanvasImage(canvasId, type, user, data) {
try {
var ctx = uni.createCanvasContext(canvasId);
const width = 300;
const height = 534;
// 先填充整体背景色
if (typeof ctx.setFillStyle === "function") {
ctx.setFillStyle("#F5F5F5");
} else {
ctx.fillStyle = "#F5F5F5";
}
if (typeof ctx.fillRect === "function") {
ctx.fillRect(0, 0, width, height);
}
ctx.drawImage("../static/share-bg.png", 0, 0, width, height);
const avatar = await loadImage(user.avatar);
drawRoundImage(ctx, avatar, 17, 20, 32, 32, 20);
const lvlImage = await loadImage(user.lvlImage);
ctx.drawImage(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/qr-code.png", width * 0.06, height * 0.87, 52, 52);
renderText(ctx, "射灵平台", 12, "#fff", width * 0.25, height * 0.9);
renderText(
ctx,
"快加入我们一起玩吧~",
9,
"rgba(255, 255, 255, 0.5)",
width * 0.25,
height * 0.93
);
renderText(
ctx,
"后羿就是这样练成的",
9,
"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 (canvasId = "shareCanvas") => {
try {
// 先尝试按 id 查找 <canvas type="2d"> 节点
@@ -560,236 +279,6 @@ export const calcRing = (bowtargetId, x, y, diameter, arrowRadius = 5) => {
return 0;
};
export const generateShareCard = (canvasId, date, actual, total) => {
try {
const ctx = uni.createCanvasContext(canvasId);
const imgUrl =
"https://static.shelingxingqiu.com/attachment/2025-11-04/ddzpm4tyh5vunyacsr.png";
const drawWidth = 375;
const drawHeight = 300;
// 先填充整体背景色
if (typeof ctx.setFillStyle === "function") {
ctx.setFillStyle("#F5F5F5");
} else {
ctx.fillStyle = "#F5F5F5";
}
if (typeof ctx.fillRect === "function") {
ctx.fillRect(0, 0, drawWidth, drawHeight);
}
// 兼容第三个参数传入 "actual/total" 的情况
let a = actual;
let t = total;
if (
(t === undefined || t === null) &&
typeof a === "string" &&
a.includes("/")
) {
const parts = a.split("/");
a = parts[0];
t = parts[1] || "";
}
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: imgUrl,
success: (res) => {
const path = res.path || res.tempFilePath || imgUrl;
if (typeof ctx.clearRect === "function") {
ctx.clearRect(0, 0, drawWidth, drawHeight);
}
ctx.drawImage(path, 0, 0, drawWidth, drawHeight);
// 绘制左上角日期（白色，22px）
renderText(ctx, String(date || ""), 18, "#FFFFFF", 6, 20, "left");
// 居中绘制第三个参数为圆角黑底标签
const rectW = 200;
const rectH = 78;
const radius = 39;
const rectX = (drawWidth - rectW) / 2;
const rectY = (drawHeight - rectH) / 2;
ctx.save();
ctx.beginPath();
ctx.moveTo(rectX + radius, rectY);
ctx.lineTo(rectX + rectW - radius, rectY);
ctx.quadraticCurveTo(
rectX + rectW,
rectY,
rectX + rectW,
rectY + radius
);
ctx.lineTo(rectX + rectW, rectY + rectH - radius);
ctx.quadraticCurveTo(
rectX + rectW,
rectY + rectH,
rectX + rectW - radius,
rectY + rectH
);
ctx.lineTo(rectX + radius, rectY + rectH);
ctx.quadraticCurveTo(
rectX,
rectY + rectH,
rectX,
rectY + rectH - radius
);
ctx.lineTo(rectX, rectY + radius);
ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
ctx.closePath();
ctx.setFillStyle("rgba(0,0,0,0.5)");
ctx.fill();
ctx.restore();
// 居中排版：左侧显示 actual/，右侧显示 total，再追加“环”
ctx.save();
if (typeof ctx.setTextBaseline === "function")
ctx.setTextBaseline("middle");
const centerX = rectX + rectW / 2;
const centerY = rectY + rectH / 2;
// 左半部：右对齐 actual/
renderText(ctx, `${a}/`, 40, "#FFFFFF", centerX, centerY, "right");
// 右半部：左对齐 total
renderText(
ctx,
`${t || ""}`,
30,
"#FFFFFF",
centerX,
centerY,
"left"
);
// 追加单位“环”：放在 total 文本之后 16px
const totalWidth = ctx.measureText(`${t || ""}`).width || 0;
renderText(
ctx,
"环",
20,
"#FFFFFF",
centerX + totalWidth + 5,
centerY,
"left"
);
ctx.restore();
ctx.draw(false, () => {
try {
uni.canvasToTempFilePath({
canvasId,
width: drawWidth,
height: drawHeight,
destWidth: drawWidth,
destHeight: drawHeight,
fileType: "png",
quality: 1,
success: (r) => {
const path = r.tempFilePath || r.apFilePath || r.filePath;
resolve(path);
},
fail: (err) => reject(err),
});
} catch (err) {
reject(err);
}
});
},
fail: () => {
try {
ctx.drawImage(imgUrl, 0, 0, drawWidth, drawHeight);
// 绘制左上角日期（白色，22px）
renderText(ctx, String(date || ""), 22, "#FFFFFF", 10, 22, "left");
// 居中绘制第三个参数为圆角黑底标签
const rectW = 200;
const rectH = 78;
const radius = 39;
const rectX = (drawWidth - rectW) / 2;
const rectY = (drawHeight - rectH) / 2;
ctx.save();
ctx.beginPath();
ctx.moveTo(rectX + radius, rectY);
ctx.lineTo(rectX + rectW - radius, rectY);
ctx.quadraticCurveTo(
rectX + rectW,
rectY,
rectX + rectW,
rectY + radius
);
ctx.lineTo(rectX + rectW, rectY + rectH - radius);
ctx.quadraticCurveTo(
rectX + rectW,
rectY + rectH,
rectX + rectW - radius,
rectY + rectH
);
ctx.lineTo(rectX + radius, rectY + rectH);
ctx.quadraticCurveTo(
rectX,
rectY + rectH,
rectX,
rectY + rectH - radius
);
ctx.lineTo(rectX, rectY + radius);
ctx.quadraticCurveTo(rectX, rectY, rectX + radius, rectY);
ctx.closePath();
ctx.setFillStyle("rgba(0,0,0,0.5)");
ctx.fill();
ctx.restore();
// 居中排版：左侧显示 actual/，右侧显示 total，再追加“环”
ctx.save();
if (typeof ctx.setTextBaseline === "function")
ctx.setTextBaseline("middle");
const centerX = rectX + rectW / 2;
const centerY = rectY + rectH / 2;
// 左半部：右对齐 actual/
renderText(ctx, `${a}/`, 40, "#FFFFFF", centerX, centerY, "right");
// 右半部：左对齐 total
renderText(
ctx,
`${t || ""}`,
35,
"#FFFFFF",
centerX,
centerY,
"left"
);
// 追加单位“环”：放在 total 文本之后 16px
const totalWidth = ctx.measureText(`${t || ""}`).width || 0;
renderText(
ctx,
"环",
20,
"#FFFFFF",
centerX + totalWidth + 5,
centerY,
"left"
);
ctx.restore();
ctx.draw(false, () => {
try {
uni.canvasToTempFilePath({
canvasId,
width: drawWidth,
height: drawHeight,
destWidth: drawWidth,
destHeight: drawHeight,
fileType: "png",
quality: 1,
success: (r) => {
const path = r.tempFilePath || r.apFilePath || r.filePath;
resolve(path);
},
fail: (err) => reject(err),
});
} catch (err) {
reject(err);
}
});
} catch (e) {
reject(e);
}
},
});
});
} catch (e) {
console.error("generateShareCardImage 绘制失败:", e);
}
};
export const getDirectionText = (angle = 0) => {
if (angle < 0) return "";
if (angle >= 337.5 || angle < 22.5) {