王者荣耀
This commit is contained in:
parent
bbfe66093e
commit
4fcbc5b06f
2
main.js
2
main.js
|
|
@ -29,7 +29,7 @@ export function createApp() {
|
||||||
app.config.globalProperties.$system = plus.os.name;
|
app.config.globalProperties.$system = plus.os.name;
|
||||||
// #endif
|
// #endif
|
||||||
app.config.globalProperties.$systemInfo = systemInfo
|
app.config.globalProperties.$systemInfo = systemInfo
|
||||||
uni.setStorageSync('version', '1.0.6.sp7')
|
uni.setStorageSync('version', '1.0.6.sp9')
|
||||||
app.config.globalProperties.$version = uni.getStorageSync('version')
|
app.config.globalProperties.$version = uni.getStorageSync('version')
|
||||||
app.use(globalMethods);
|
app.use(globalMethods);
|
||||||
return {
|
return {
|
||||||
|
|
|
||||||
|
|
@ -3,18 +3,12 @@
|
||||||
<nav-bar title="王者主页" bgColor="#F5F5F5" isRightButton :rightButtonText="rightButtonText"
|
<nav-bar title="王者主页" bgColor="#F5F5F5" isRightButton :rightButtonText="rightButtonText"
|
||||||
@right-click="onRightClick">
|
@right-click="onRightClick">
|
||||||
</nav-bar>
|
</nav-bar>
|
||||||
<view>
|
<view style="padding: 8px;box-sizing: border-box;">
|
||||||
<view class="painter-container" @click="handlePreview">
|
<view class="painter-container" @click="handlePreview"
|
||||||
<!-- 真正的高清图片预览区域,使用原生图片可以自动自适应手机宽度且无任何裁剪 Bug -->
|
:style="`width:calc(100vw - 16px) ; height: ${posterContainerHeight}px; overflow: hidden; position: relative; transform: translateZ(0);`">
|
||||||
<image v-if="finalPosterPath" :src="finalPosterPath" mode="widthFix"
|
<!-- 运用 js 算出的无误差纯数字 scale 来实现高清画板的等比缩小,彻底兼容所有老旧内核,不再被截断 -->
|
||||||
style="width: 100%; display: block; border-radius: 12rpx;"></image>
|
<view
|
||||||
<view v-else
|
:style="`width: 750px; transform: scale(${posterScaleRatio}); transform-origin: left top; position: absolute; left: 0; top: 0;`">
|
||||||
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>
|
|
||||||
|
|
||||||
<!-- 海报生成底层引擎,移出屏幕可视区外专心用纯 px 生成高清无损图 -->
|
|
||||||
<view style="position: fixed; left: -9999px; top: -9999px;">
|
|
||||||
<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750px;`">
|
<l-painter isCanvasToTempFilePath @success="onPainterSuccess" :css="`width:750px;`">
|
||||||
<l-painter-view :css="`width: 750.0px; position: relative;`">
|
<l-painter-view :css="`width: 750.0px; position: relative;`">
|
||||||
<!-- 直接使用主背景图撑开父容器,移除不必要的 opacity: 0 占位图,避免在大屏渲染时产生黑块 -->
|
<!-- 直接使用主背景图撑开父容器,移除不必要的 opacity: 0 占位图,避免在大屏渲染时产生黑块 -->
|
||||||
|
|
@ -32,7 +26,6 @@
|
||||||
<!-- 性别图标 -->
|
<!-- 性别图标 -->
|
||||||
<l-painter-image :src="`/static/image/other/game/wangzhe/${honorData.gender}.png`"
|
<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>
|
: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="nicknameImage" :src="nicknameImage"
|
<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>
|
: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>
|
||||||
|
|
@ -242,6 +235,12 @@ const showPreview = ref(false); // 控制全屏预览
|
||||||
const isMountedReady = ref(false);
|
const isMountedReady = ref(false);
|
||||||
const isFontLoaded = ref(false);
|
const isFontLoaded = ref(false);
|
||||||
|
|
||||||
|
// 获取系统宽度计算海报缩放比例,代替容易失效的 css calc(),确保全端兼容防截断
|
||||||
|
const sysInfo = uni.getSystemInfoSync();
|
||||||
|
const windowWidth = sysInfo.windowWidth || 375;
|
||||||
|
const posterScaleRatio = windowWidth / 750;
|
||||||
|
const posterContainerHeight = 342 * posterScaleRatio;
|
||||||
|
|
||||||
// 页面表单数据字段
|
// 页面表单数据字段
|
||||||
const honorData = reactive({
|
const honorData = reactive({
|
||||||
type: 1, // 样式类型 1.2.3.4
|
type: 1, // 样式类型 1.2.3.4
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 192 KiB After Width: | Height: | Size: 56 KiB |
Loading…
Reference in New Issue