起因
最近開(kāi)發(fā)一個(gè)信息管理大屏，屏幕盡寸為2560*1080。
公司內(nèi)部的有一些項(xiàng)目上對(duì)于大屏是直接定死寬度與高度的，這樣在開(kāi)發(fā)時(shí)，特別是針對(duì)這種特大屏，開(kāi)發(fā)人員很難有整體感受。還有一些是進(jìn)行了適配的處理，但是是針對(duì)于當(dāng)前的項(xiàng)目進(jìn)行處理的，并且還沒(méi)有沉淀出工具可以直接復(fù)用。
適配方案
利用rem進(jìn)行布局，最著名的就是淘寶的flexable布局。其核心的原理，就是更改更路徑下的 font-size,然后，使用的大小全部從px轉(zhuǎn)換為rem，這需要開(kāi)發(fā)人員進(jìn)行計(jì)算，還可以利用css預(yù)處理語(yǔ)言中（項(xiàng)目中使用是scss）的高級(jí)功能來(lái)實(shí)現(xiàn)px2rem。但是整體上來(lái)說(shuō)，還是比較復(fù)雜的。
利用百分比，同樣這里開(kāi)發(fā)人員也就是需要進(jìn)行計(jì)算的。
第三種，利用scale進(jìn)行縮放處理，也就是本組件所使用的方式。
注意點(diǎn)
但是對(duì)于中間的區(qū)域 ，我們通過(guò)是使用加載模型，或者地圖相關(guān)，此處是不能直接使用scale進(jìn)行區(qū)域縮放的，只處理對(duì)寬高進(jìn)行比例計(jì)算，它會(huì)自動(dòng)適配。
核心技術(shù)
scale
scale是css3中的屬性。一般情況下默認(rèn)縮放中心點(diǎn)，是圖形的中心點(diǎn)，但是在使用translate(-50%,-50%)時(shí)，需要將默認(rèn)縮放中心點(diǎn)變?yōu)樽笊辖恰?/p>
transform:scale(0.5);
transform-origin:0 0;
css變量
css變量是可以由開(kāi)發(fā)者進(jìn)行自定義，必須要以 -- 開(kāi)頭的，然后利用var()函數(shù)在其它c(diǎn)ss屬性中使用，它是對(duì)大寫(xiě)小敏感的。
element{
--color:red;
}
div{
color:var(--color)
}
如何利用js來(lái)操作css變量？
方式一：直接內(nèi)聯(lián)到元素中
document.body.style.setProperty(--color, 'red')
方式二：創(chuàng)建style 再來(lái)插入
const styleEl = documente.createElement('style')
styleEl.innerHTML = `
:root{
--color:red;
}
`
document.body.append(styleEl)
水平垂直居中
因?yàn)樯婕暗蕉鄬?所以可以采用定位的方式
<div class="parent">
<div class="son"></div>
</div>
<style>
.parent{
position:relative;
width:100%;
height:100vh;
}
.son{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
組件使用
class="ssfc-screen"
prop-name="ssfc-screen-scale"
adpter-class="adpter-area"
:width="width"
:height="height"
:resize-listenter="resizeListenter"
>
<cesium-main slot="main"></cesium-main>
<div>
<div v-show="ifShow">
<top-bar></top-bar>
<!-- 左側(cè)面板-->
<left></left>
<!-- 右側(cè)側(cè)面板-->
<right></right>
<!-- 底部 -->
<bottom></bottom>
<!-- ./staticData/imgs/allScreen.png -->
<!-- 模型上其余部分 -->
<remainingAreas class="reset-events"></remainingAreas>
</div>
<img
:src="picUrl"
alt=""
class="reset-events"
:class="ifShow ? 'imgFull' : 'imgPart'"
@click="
ifShow = !ifShow
getFullScreen()
"
/>
</div>
</AdpterScreen>
slot="main" 主區(qū)域不進(jìn)行縮放 其它區(qū)域進(jìn)行縮放
propName css變量名 注意不需要加 --
adpterClass 適配類(lèi) 可供彈框等使用
width height 設(shè)計(jì)稿寬高
resizeListenter risize事件監(jiān)聽(tīng)里面回調(diào)參數(shù)為當(dāng)前縮放值
源碼
<!--
* @Description
* @Autor 朱俊
* @Date 2022-04-13 17:19:05
* @LastEditors: wangs
* @LastEditTime: 2022-04-14 18:03:24
-->
<template>
<div class="big-screen-wrapper" ref="containerRef">
<div class="main-wrapper" ref="mainRef">
<slot name="main"></slot>
</div>
<div class="layer-wrapper" ref="layerRef">
<slot />
</div>
</div>
</template>
<script>
import ScaleLayout from './scaleLayout'
export default {
props: {
propName: {
type: String,
default: 'scale' + new Date().getTime()
},
width: {
type: Number,
default: 1920
},
height: {
type: Number,
default: 1080
},
adpterClass: {
type: String,
default: 'apter-area'
},
resizeListenter: {
type: Function,
default: () => {
return () => {}
}
}
},
data() {
return {}
},
mounted() {
this.$nextTick(() => {
const container = document.body
const mainEl = this.$refs['mainRef']
const layerEl = this.$refs['layerRef']
new ScaleLayout({
context: this,
propName: this.propName,
width: this.width,
height: this.height,
container,
mainEl,
layerEl,
adpterClass: this.adpterClass,
resizeListenter: this.resizeListenter
})
})
}
}
</script>
<style lang="scss" scoped>
.big-screen-wrapper {
width: 100%;
height: 100vh;
position: relative;
background: #000;
overflow: hidden;
.main-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.layer-wrapper {
position: absolute;
left: 50%;
top: 50%;
overflow: hidden;
pointer-events: none; // 圖層事件穿透
* {
// 其它事件恢復(fù)
pointer-events: auto;
}
}
}
</style>
/*
* @Description
* @Autor 朱俊
* @Date 2022-04-13 17:19:27
* @LastEditors 朱俊
* @LastEditTime 2022-04-14 23:05:19
*/
// 防抖
function debounce(fn, t) {
const delay = t || 500
let timer
return (...args) => {
if (timer) {
clearTimeout(timer)
}
const context = this
timer = setTimeout(() => {
timer = null
fn.apply(context, args)
}, delay)
}
}
class ScaleLayout {
constructor({
context,
width,
height,
container,
propName,
mainEl,
layerEl,
adpeterClass,
resizeListenter
}) {
this.styleEl = null
this.scale = 1 // 默認(rèn)初始縮放1
this.context = context
this.width = width // 設(shè)計(jì)稿寬度
this.height = height // 設(shè)計(jì)稿高度
this.container = container || document.body
this.propName = propName || 'scale'
this.mainEl = mainEl
this.layerEl = layerEl
this.adpeterClass = adpeterClass || 'adpter-area'
this.resizeListenter = resizeListenter || (() => {})
this.dealLayout()
this.setScale()
this.resizeListenter(this.scale)
this.listen()
}
// 處理布局
dealLayout() {
// 處理main區(qū)域
this.mainEl.style = `
width: calc(${this.width}px * var(--${this.propName}));
height: calc(${this.height}px * var(--${this.propName}));
`
// 處理圖層
this.layerEl.style = `
width: ${this.width}px;
height: ${this.height}px;
transform: scale(var(--${this.propName})) translate(-50%,-50%);
transform-origin:0 0;
`
// 動(dòng)態(tài)生成適配類(lèi)
this.styleEl = document.createElement('style')
this.styleEl.innerHTML = `
.${this.adpeterClass} {
transform: scale(var(--${this.propName}));
transform-origin:0 0;
}
`
this.container.append(this.styleEl)
}
// 頁(yè)面生命周期及瀏覽器大小監(jiān)聽(tīng)
listen() {
this.onresize = debounce(() => {
this.setScale()
this.resizeListenter(this.scale)
}, 500)
window.addEventListener('resize', this.onresize)
this.context.$on('hook:beforeDestroy', () => {
window.removeEventListener('resize', this.onresize)
this.styleEl && this.container.removeChild(this.styleEl)
})
}
// 設(shè)置縮放
dealScale() {
const ws = window.innerWidth / this.width
const hs = window.innerHeight / this.height
return ws < hs ? ws : hs
}
// 獲取scale值
getScale() {
return this.scale
}
// 設(shè)置scale
setScale() {
this.scale = this.dealScale()
this.container.style.setProperty(`--${this.propName}`, this.scale)
}
}
export default ScaleLayout
