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-21 22:22:19 +08:00
parent 70ddea8ff4
commit 6250ce248b
5 changed files with 31 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
src/components/ImageShare.vue
View File

@@ -1,168 +0,0 @@
<script setup>
import useStore from "@/store";
import Avatar from "@/components/Avatar.vue";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const props = defineProps({
show: {
type: Boolean,
default: false,
},
type: {
type: String,
default: "",
},
onClose: {
type: Function,
default: () => {},
},
});
const saveImage = () => {
// 获取当前页面的节点
const query = uni.createSelectorQuery();
query
.select(".content")
.fields({ node: true, size: true })
.exec((res) => {
// 创建canvas上下文
const canvas = uni.createCanvasContext("shareCanvas");
// 将页面内容绘制到canvas上
// 这里需要根据实际内容进行绘制
canvas.draw(false, () => {
// 将画布内容保存为图片
uni.canvasToTempFilePath({
canvasId: "shareCanvas",
success: (res) => {
const tempFilePath = res.tempFilePath;
// 保存图片到相册
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: () => {
uni.showToast({ title: "保存成功" });
},
fail: () => {
uni.showToast({ title: "保存失败", icon: "error" });
},
});
},
});
});
});
};
</script>
<template>
<view class="container" :style="{ display: show ? 'flex' : 'none' }">
<view class="header">
<view @click="onClose">
<image src="../static/close-white.png" mode="widthFix" />
</view>
</view>
<view class="content">
<image src="../static/share-bg.png" mode="widthFix" />
<view>
<Avatar :src="user.avatar" :size="40" frame />
<view>
<text>{{ user.nickName }}</text>
<text>{{ user.lvlName }}</text>
</view>
</view>
</view>
<view class="footer">
<view>
<image src="../static/wechat-outline.png" mode="widthFix" />
<text>微信好友</text>
</view>
<view>
<image src="../static/wechat-moment.png" mode="widthFix" />
<text>朋友圈</text>
</view>
<view @click="saveImage">
<image src="../static/download.png" mode="widthFix" />
<text>保存到相册</text>
</view>
</view>
</view>
</template>
<style scoped>
.container {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
}
.header {
width: 100%;
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
}
.header > view > image {
width: 40px;
padding: 10px;
}
.content {
width: 75vw;
height: 130vw;
position: relative;
}
.content > image:first-child {
position: absolute;
width: 100%;
height: 100%;
border-radius: 15px;
z-index: -1;
}
.content > view:nth-child(2) {
display: flex;
align-items: center;
justify-content: flex-start;
padding: 20px 15px;
}
.content > view:nth-child(2) > view:last-child {
display: flex;
flex-direction: column;
align-items: flex-start;
color: #fff;
font-size: 14px;
margin-left: 10px;
}
.content > view:nth-child(2) > view:last-child > text:last-child {
font-size: 10px;
padding: 2px 5px;
background-color: #5f51ff;
border-radius: 10px;
color: #fff9;
margin-top: 5px;
}
.footer {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.footer > view {
display: flex;
flex-direction: column;
align-items: center;
color: #fff;
font-size: 12px;
}
.footer > view > image {
width: 45px;
margin-bottom: 10px;
}
</style>

1
src/components/ShootProgress.vue
View File

@@ -142,5 +142,6 @@ onUnmounted(() => {
} }
.container > view:last-child > text { .container > view:last-child > text {
z-index: 1; z-index: 1;
color: #000;
} }
</style> </style>

5
src/components/Signin.vue
View File

@@ -86,7 +86,7 @@ const handleLogin = () => {
class="login-btn" class="login-btn"
hover-class="none" hover-class="none"
> >
<Avatar v-if="avatarUrl" :src="avatarUrl" /> <Avatar v-if="avatarUrl" :src="avatarUrl" :size="30" />
<text v-else>点击获取</text> <text v-else>点击获取</text>
</button> </button>
</view> </view>
@@ -94,7 +94,6 @@ const handleLogin = () => {
<text>昵称:</text> <text>昵称:</text>
<input <input
type="nickname" type="nickname"
class="nickname-input"
placeholder="请输入昵称" placeholder="请输入昵称"
placeholder-style="color: #fff9" placeholder-style="color: #fff9"
@change="onNicknameChange" @change="onNicknameChange"
@@ -156,7 +155,7 @@ const handleLogin = () => {
.nickname > input { .nickname > input {
flex: 1; flex: 1;
font-size: 14px; font-size: 14px;
color: #000; color: #fff;
} }
.wechat-icon { .wechat-icon {
width: 24px; width: 24px;

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

@@ -2,14 +2,9 @@
import { ref } from "vue"; import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app"; import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue"; import Container from "@/components/Container.vue";
import { import { generateCanvasImage } from "@/util";
renderText,
renderRankTitle,
renderLine,
renderScores,
drawRoundImage,
} from "@/util.js";
import { getPractiseAPI } from "@/apis"; import { getPractiseAPI } from "@/apis";
import { wxShare } from "@/util";
import useStore from "@/store"; import useStore from "@/store";
import { storeToRefs } from "pinia"; import { storeToRefs } from "pinia";
const store = useStore(); const store = useStore();
@@ -19,63 +14,7 @@ onLoad(async (options) => {
const id = options.id || 462; const id = options.id || 462;
const data = await getPractiseAPI(id); const data = await getPractiseAPI(id);
if (!data.arrows.length) return; if (!data.arrows.length) return;
var ctx = uni.createCanvasContext("shareCanvas"); generateCanvasImage("shareCanvas", options.type, user.value, data);
const width = 303;
const height = 535;
ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
drawRoundImage(ctx, user.value.avatar, 20, 20, 35, 35, 20);
ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45);
renderText(ctx, user.value.nickName, 14, "#fff", 77, 35, "center");
renderRankTitle(ctx, user.value.lvlName, "center");
let titleImage = "../static/first-try-title.png";
let subTitle = "正式开启弓箭手之路";
if (options.type > 1) {
subTitle = `今日弓箭练习打卡 ${data.createdAt
.split(" ")[0]
.replaceAll("-", ".")}`;
}
if (options.type == 2) {
titleImage = "../static/practise-one-title.png";
} else if (options.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 + 10, 220);
renderText(ctx, "共", 16, "#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);
renderLine(ctx, 80);
renderLine(ctx, 192);
renderScores(ctx, data.arrows);
ctx.drawImage(
"../static/device-icon.png",
width * 0.06,
height * 0.87,
55,
55
);
renderText(ctx, "射灵平台", 16, "#fff", width * 0.28, height * 0.9);
renderText(
ctx,
"快加入我们一起玩吧~",
11,
"rgba(255, 255, 255, 0.5)",
width * 0.28,
height * 0.93
);
renderText(
ctx,
"后羿就是这样练成的",
11,
"rgba(255, 255, 255, 0.5)",
width * 0.28,
height * 0.96
);
ctx.drawImage("../static/qr-code.png", width * 0.75, height * 0.86, 60, 60);
ctx.draw();
}); });
const saveImage = () => { const saveImage = () => {
@@ -104,24 +43,23 @@ const saveImage = () => {
<view class="content"> <view class="content">
<view :style="{ overflow: 'hidden', borderRadius: '10px' }"> <view :style="{ overflow: 'hidden', borderRadius: '10px' }">
<canvas <canvas
style="width: 302px; height: 534px" :style="{ width: '302px', height: '534px' }"
canvas-id="shareCanvas" canvas-id="shareCanvas"
id="firstCanvas"
></canvas> ></canvas>
</view> </view>
<view class="footer"> <view class="footer">
<view> <button hover-class="none" @click="wxShare">
<image src="../static/wechat-outline.png" mode="widthFix" /> <image src="../static/wechat-outline.png" mode="widthFix" />
<text>微信好友</text> <text>微信好友</text>
</view> </button>
<view> <button hover-class="none">
<image src="../static/wechat-moment.png" mode="widthFix" /> <image src="../static/wechat-moment.png" mode="widthFix" />
<text>朋友圈</text> <text>朋友圈</text>
</view> </button>
<view @click="saveImage"> <button hover-class="none" @click="saveImage">
<image src="../static/download.png" mode="widthFix" /> <image src="../static/download.png" mode="widthFix" />
<text>保存到相册</text> <text>保存到相册</text>
</view> </button>
</view> </view>
</view> </view>
</Container> </Container>
@@ -141,14 +79,14 @@ const saveImage = () => {
justify-content: space-around; justify-content: space-around;
margin-top: 50px; margin-top: 50px;
} }
.footer > view { .footer > button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
color: #fff; color: #fff;
font-size: 12px; font-size: 12px;
} }
.footer > view > image { .footer > button > image {
width: 45px; width: 45px;
margin-bottom: 10px; margin-bottom: 10px;
} }

25
src/util.js
View File

@@ -60,16 +60,16 @@ export function renderText(ctx, text, size, color, x, y, textAlign = "left") {
} }
export function renderRankTitle(ctx, text) { export function renderRankTitle(ctx, text) {
const fontSize = 10; const fontSize = 8;
const textWidth = ctx.measureText(text).width; const textWidth = ctx.measureText(text).width;
const padding = 8; // 文字与背景边缘的间距 const padding = 8; // 文字与背景边缘的间距
const radius = 10; // 圆角半径 const radius = 10; // 圆角半径
const textX = 85; const textX = 85;
const textY = 55; const textY = 52;
const x = textX - padding - 15; // 文字 x 坐标减去内边距 const x = textX - padding - 12; // 文字 x 坐标减去内边距
const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距 const y = textY - fontSize - padding / 2 + 1; // 文字 y 坐标减去字体大小和内边距
const width = textWidth + padding * 2 - 19; // 背景宽度 const width = textWidth + padding * 2 - 24; // 背景宽度
const height = fontSize + padding + 1; // 背景高度 const height = fontSize + padding; // 背景高度
// 开始绘制圆角矩形 // 开始绘制圆角矩形
ctx.beginPath(); ctx.beginPath();
@@ -136,9 +136,9 @@ export function generateCanvasImage(canvasId, type, user, data) {
const width = 303; const width = 303;
const height = 535; const height = 535;
ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534); ctx.drawImage("../static/share-bg.png", 0, 0, 302, 534);
drawRoundImage(ctx, user.avatar, 20, 20, 35, 35, 20); drawRoundImage(ctx, user.avatar, 17, 20, 37, 37, 20);
ctx.drawImage("../static/avatar-frame.png", 15, 15, 45, 45); ctx.drawImage("../static/avatar-frame.png", 12, 15, 47, 47);
renderText(ctx, user.nickName, 14, "#fff", 77, 35, "center"); renderText(ctx, user.nickName, 14, "#fff", 80, 32, "center");
renderRankTitle(ctx, user.lvlName, "center"); renderRankTitle(ctx, user.lvlName, "center");
let titleImage = "../static/first-try-title.png"; let titleImage = "../static/first-try-title.png";
@@ -155,7 +155,14 @@ export function generateCanvasImage(canvasId, type, user, data) {
} }
ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40); ctx.drawImage(titleImage, (width - 160) / 2, 160, 160, 40);
const subTitleWidth = ctx.measureText(subTitle).width; const subTitleWidth = ctx.measureText(subTitle).width;
renderText(ctx, subTitle, 18, "#fff", width / 2 - subTitleWidth + 10, 220); renderText(
ctx,
subTitle,
18,
"#fff",
width / 2 - subTitleWidth - (type > 1 ? 15 : 8),
220
);
renderText(ctx, "共", 16, "#fff", 124, 300); renderText(ctx, "共", 16, "#fff", 124, 300);
const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0); const totalRing = data.arrows.reduce((last, next) => last + next.ring, 0);
renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300); renderText(ctx, totalRing, 16, "#fed847", totalRing < 100 ? 144 : 142, 300);