From bf57816244e14c29b9ed5a9ea0d1249d618aa975 Mon Sep 17 00:00:00 2001
From: tangxinyue <524779910@qq.com>
Date: Fri, 5 Jun 2026 14:38:37 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E7=8E=8B=E8=80=85=E4=B8=BB?=
 =?UTF-8?q?=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main.js                             |   2 +-
 pages/other/game/honor-of-kings.vue | 155 +++++++++++++++-------------
 2 files changed, 87 insertions(+), 70 deletions(-)

diff --git a/main.js b/main.js
index 70e3a61..eb7f6ef 100644
--- a/main.js
+++ b/main.js
@@ -29,7 +29,7 @@ export function createApp() {
 	app.config.globalProperties.$system = plus.os.name;
 	// #endif
 	app.config.globalProperties.$systemInfo = systemInfo
-	uni.setStorageSync('version', '1.0.6.sp5')
+	uni.setStorageSync('version', '1.0.6.sp7')
 	app.config.globalProperties.$version = uni.getStorageSync('version')
 	app.use(globalMethods);
 	return {
diff --git a/pages/other/game/honor-of-kings.vue b/pages/other/game/honor-of-kings.vue
index 9870f94..a65a645 100644
--- a/pages/other/game/honor-of-kings.vue
+++ b/pages/other/game/honor-of-kings.vue
@@ -5,79 +5,88 @@
 		</nav-bar>
 		<view>
 			<view class="painter-container" @click="handlePreview">
-				<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750rpx; padding: 24rpx; `">
-					<l-painter-view :css="`width: 100%; position: relative;`">
-						<!-- 直接使用主背景图撑开父容器，移除不必要的 opacity: 0 占位图，避免在大屏渲染时产生黑块 -->
-						<l-painter-image :src="`/static/image/other/game/wangzhe/style-${honorData.type}.jpg`"
-							css="width: 100%; display: block;"></l-painter-image>
-						<!-- 头像 (纯百分比绝对定位，完美适配所有大屏分辨率) -->
-						<l-painter-image :src="honorData.avatar"
-							css="position: absolute; left: 15.6%; top: 22.5%; width: 8.5%; height: 20%; border-radius: 200rpx; object-fit: cover; display: block;"></l-painter-image>
+				<!-- 真正的高清图片预览区域，使用原生图片可以自动自适应手机宽度且无任何裁剪 Bug -->
+				<image v-if="finalPosterPath" :src="finalPosterPath" mode="widthFix"
+					style="width: 100%; display: block; border-radius: 12rpx;"></image>
+				<view v-else
+					style="width: 100%; height: 48vw; display: flex; align-items: center; justify-content: center; background: #f0f0f0; border-radius: 12rpx;">
+					<text style="color: #999; font-size: 24rpx;">海报加载中...</text>
+				</view>
 
-						<!-- 头像框 (压在头像上方) -->
-						<l-painter-image :src="`/static/image/other/game/wangzhe/avatar-frame-${honorData.type}.png`"
-							css="position: absolute; left: 0; top: 0; width: 24.3%; height: 9.15%;"></l-painter-image>
+				<!-- 海报生成底层引擎，移出屏幕可视区外专心用纯 px 生成高清无损图 -->
+				<view style="position: fixed; left: -9999px; top: -9999px;">
+					<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750px;`">
+						<l-painter-view :css="`width: 750.0px; position: relative;`">
+							<!-- 直接使用主背景图撑开父容器，移除不必要的 opacity: 0 占位图，避免在大屏渲染时产生黑块 -->
+							<l-painter-image :src="`/static/image/other/game/wangzhe/style-${honorData.type}.jpg`"
+								css="width: 750.0px; display: block;"></l-painter-image>
+							<!-- 头像 (纯百分比绝对定位，完美适配所有大屏分辨率) -->
+							<l-painter-image :src="honorData.avatar"
+								css="position: absolute; left: 117.0px; top: 76.8px; width: 66px; height: 66px; border-radius: 200px; object-fit: cover; display: block;"></l-painter-image>
 
-						<!-- 性别图标 -->
-						<l-painter-image :src="`/static/image/other/game/wangzhe/${honorData.gender}.png`"
-							:css="`position: absolute; left: ${honorData.type == 3 ? '29%' : '27%'}; top: 25.5%; width: 1.57%; height: 3.44%;`"></l-painter-image>
+							<!-- 头像框 (压在头像上方) -->
+							<l-painter-image
+								:src="`/static/image/other/game/wangzhe/avatar-frame-${honorData.type}.png`"
+								css="position: absolute; left: 0; top: 0; width: 183px; height: 141px"></l-painter-image>
 
-						<!-- 昵称渐变图片 -->
-						<l-painter-image v-if="nicknameImage" :src="nicknameImage"
-							:css="`position: absolute; left: ${honorData.type == 3 ? '30.7%' : '28.7%'}; top: 24.5%; width: ${honorData.nickname.length * 1.99}%;`"></l-painter-image>
-						<!-- 地区 -->
-						<l-painter-text :text="honorData.receivedFlowers"
-							css="position: absolute; left: 47.8%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);"></l-painter-text>
-						<!-- 收到花束 -->
-						<l-painter-text :text="honorData.receivedFlowers"
-							css="position: absolute; left: 47.8%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
-						<!-- 热度数 -->
-						<l-painter-text :text="honorData.popularityCount"
-							css="position: absolute; left: 51.5%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
-						<!-- 点赞数 -->
-						<l-painter-text :text="honorData.likeCount"
-							css="position: absolute; left: 55.2%; top: 38.5%; font-size: 9rpx; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
-						<!-- 荣誉一 -->
-						<l-painter-text :text="honorData.honor1"
-							css="position: absolute; left: 33%; top: 42.67%; font-size: 9rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 荣誉二 -->
-						<l-painter-text :text="honorData.honor2"
-							css="position: absolute; left: 62.5%; top: 52.2%; font-size: 8rpx; color: #71B1D3;transform: scale(0.85),translateX(-50%);"></l-painter-text>
-						<!-- 巅峰万强 -->
-						<l-painter-text v-if="honorData.type == 4" :text="honorData.peakStrong"
-							css="position: absolute; left: 34.3%; top: 56.5%; font-size: 8rpx; color: #E9F5FB;transform: translateX(-50%);"></l-painter-text>
-						<!-- 对战场次 -->
-						<l-painter-text :text="honorData.matchCount"
-							css="position: absolute; left: 18.4%; top: 71%; font-size: 12rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 对战被赞 -->
-						<l-painter-text :text="honorData.matchLikeCount"
-							css="position: absolute; left: 26.6%; top: 71%; font-size: 12rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 图鉴等级 -->
-						<l-painter-text :text="honorData.pokedexLevel"
-							css="position: absolute; left: 42.6%; top: 70%; font-size:9rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 皮肤数 -->
-						<l-painter-text :text="honorData.skinCount"
-							css="position: absolute; left: 50.3%; top: 70%; font-size:9rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 游戏天数 -->
-						<l-painter-text v-if="honorData.type == 1 || honorData.type == 2" :text="honorData.gameDays"
-							css="position: absolute; left: 26.95%;  top: 82.7%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 峡谷对战局数 -->
-						<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
-							:text="honorData.riftMatchCount"
-							css="position: absolute; left: 42.96%;  top: 82.7%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 大乱斗对战局数 -->
-						<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
-							:text="honorData.aramMatchCount"
-							css="position: absolute; left: 50.65%;  top: 82.7%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
-						<!-- 亲密度 -->
-						<l-painter-text v-if="honorData.type == 3 || honorData.type == 4" :text="honorData.intimacy"
-							css="position: absolute; left: 46.4%;  top: 86.8%; font-size:10rpx; color: #71B1D3;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
+							<!-- 性别图标 -->
+							<l-painter-image :src="`/static/image/other/game/wangzhe/${honorData.gender}.png`"
+								:css="`position: absolute; left: ${honorData.type == 3 ? '217.5px' : '202.5px'}; top: 87.0px; width: 11.8px; height: 11.7px;`"></l-painter-image>
 
-						<!-- 水印 -->
-						<l-painter-image v-if="$isVip()" src="/static/image/other/shuiying.png"
-							:css="`position: absolute; left: 2.5%; bottom: 5%; width: 145.38rpx;height:42.76rpx`"></l-painter-image>
-					</l-painter-view>
-				</l-painter>
+							<!-- 昵称渐变图片 -->
+							<l-painter-image v-if="nicknameImage" :src="nicknameImage"
+								:css="`position: absolute; left: ${honorData.type == 3 ? '230.3px' : '215.3px'}; top: ${$system == 'iOS' ? '83px' : '85.6px'}; width: ${honorData.nickname.length * 14.9}px;`"></l-painter-image>
+							<!-- 收到花束 -->
+							<l-painter-text :text="honorData.receivedFlowers"
+								css="position: absolute; left: 358.5px; top: 131.4px; font-size: 9px; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
+							<!-- 热度数 -->
+							<l-painter-text :text="honorData.popularityCount"
+								css="position: absolute; left: 386.3px; top: 131.4px; font-size: 9px; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
+							<!-- 点赞数 -->
+							<l-painter-text :text="honorData.likeCount"
+								css="position: absolute; left: 414.0px; top: 131.4px; font-size: 9px; color: #DAF2FF;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
+							<!-- 荣誉一 -->
+							<l-painter-text :text="honorData.honor1"
+								css="position: absolute; left: 247.5px; top: 145.6px; font-size: 9px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 荣誉二 -->
+							<l-painter-text :text="honorData.honor2"
+								css="position: absolute; left: 465.6px; top: 173.6px; font-size: 8px; color: #71B1D3;transform: scale(0.85),translateX(-50%);"></l-painter-text>
+							<!-- 巅峰万强 -->
+							<l-painter-text v-if="honorData.type == 4" :text="honorData.peakStrong"
+								css="position: absolute; left: 257.3px; top: 192.8px; font-size: 8px; color: #E9F5FB;transform: translateX(-50%);"></l-painter-text>
+							<!-- 对战场次 -->
+							<l-painter-text :text="honorData.matchCount"
+								css="position: absolute; left: 138.0px; top: 242.3px; font-size: 12px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 对战被赞 -->
+							<l-painter-text :text="honorData.matchLikeCount"
+								css="position: absolute; left: 199.5px; top: 242.3px; font-size: 12px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 图鉴等级 -->
+							<l-painter-text :text="honorData.pokedexLevel"
+								css="position: absolute; left: 319.5px; top: 238.8px; font-size:9px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 皮肤数 -->
+							<l-painter-text :text="honorData.skinCount"
+								css="position: absolute; left: 377.3px; top: 238.8px; font-size:9px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 游戏天数 -->
+							<l-painter-text v-if="honorData.type == 1 || honorData.type == 2" :text="honorData.gameDays"
+								css="position: absolute; left: 202.1px;  top: 282.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 峡谷对战局数 -->
+							<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
+								:text="honorData.riftMatchCount"
+								css="position: absolute; left: 322.2px;  top: 282.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 大乱斗对战局数 -->
+							<l-painter-text v-if="honorData.type == 1 || honorData.type == 2"
+								:text="honorData.aramMatchCount"
+								css="position: absolute; left: 379.9px;  top: 282.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);"></l-painter-text>
+							<!-- 亲密度 -->
+							<l-painter-text v-if="honorData.type == 3 || honorData.type == 4" :text="honorData.intimacy"
+								css="position: absolute; left: 348.0px;  top: 296.2px; font-size:10px; color: #71B1D3;transform: translateX(-50%);font-family: WangZheFont2;"></l-painter-text>
+
+							<!-- 水印 -->
+							<l-painter-image v-if="$isVip()" src="/static/image/other/shuiying.png"
+								:css="`position: absolute; left: 18.8px; bottom: 17.1px; width: 145.38px;height:42.76px`"></l-painter-image>
+						</l-painter-view>
+					</l-painter>
+				</view>
 			</view>
 		</view>
 
@@ -370,6 +379,8 @@ const tempData = reactive({});
 const newAvatars = ref([]);
 
 function handleChangeTheme(typeIndex) {
+	// 切换主题时，先清空旧海报，触发界面“加载中”提示
+	finalPosterPath.value = '';
 	honorData.type = typeIndex;
 	uni.setStorageSync('wangzheHonorData', honorData);
 }
@@ -439,6 +450,9 @@ function confirmEdit() {
 	uni.setStorageSync('wangzheHonorData', honorData);
 	editPopup.value.close();
 
+	// 数据修改后，清空旧海报触发“加载中”提示，等待重新生成
+	finalPosterPath.value = '';
+
 	// 如果昵称改变了，需要重新绘制原生的渐变文字
 	if (isNicknameChanged && isFontLoaded.value) {
 		drawGradientText();
@@ -555,6 +569,9 @@ const drawGradientText = () => {
 }
 
 .painter-container {
+	/* 强制画板缩放到设备屏幕宽度，避免物理 px 超出屏幕 */
+	padding: 8px;
+	zoom: calc(100vw / 798);
 	width: 100%;
 	max-width: 1000px;
 	/* 限制PC/iPad端的最大宽度 */