63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
|
import { ref } from 'vue'
|
|||
|
|
|
|||
|
|
export default function useDraw() {
|
|||
|
|
// * 指向最外层容器
|
|||
|
|
const appRef = ref()
|
|||
|
|
// * 定时函数
|
|||
|
|
const timer = ref(0)
|
|||
|
|
// * 默认缩放值
|
|||
|
|
const scale = {
|
|||
|
|
width: '1',
|
|||
|
|
height: '1',
|
|||
|
|
}
|
|||
|
|
// * 设计稿尺寸（px）
|
|||
|
|
const baseWidth = 1920
|
|||
|
|
const baseHeight = 1080
|
|||
|
|
|
|||
|
|
// * 需保持的比例（默认1.77778）
|
|||
|
|
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
|
|||
|
|
const calcRate = () => {
|
|||
|
|
// 当前宽高比
|
|||
|
|
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
|
|||
|
|
if (appRef.value) {
|
|||
|
|
if (currentRate > baseProportion) {
|
|||
|
|
// 表示更宽
|
|||
|
|
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
|
|||
|
|
scale.height = (window.innerHeight / baseHeight).toFixed(5)
|
|||
|
|
appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
// 表示更高
|
|||
|
|
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)
|
|||
|
|
scale.width = (window.innerWidth / baseWidth).toFixed(5)
|
|||
|
|
console.log(scale.height, scale.width);
|
|||
|
|
appRef.value.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const resize = () => {
|
|||
|
|
clearTimeout(timer.value)
|
|||
|
|
timer.value = setTimeout(() => {
|
|||
|
|
calcRate()
|
|||
|
|
}, 200)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 改变窗口大小重新绘制
|
|||
|
|
const windowDraw = () => {
|
|||
|
|
window.addEventListener('resize', resize)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 改变窗口大小重新绘制
|
|||
|
|
const unWindowDraw = () => {
|
|||
|
|
window.removeEventListener('resize', resize)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
appRef,
|
|||
|
|
calcRate,
|
|||
|
|
windowDraw,
|
|||
|
|
unWindowDraw
|
|||
|
|
}
|
|||
|
|
}
|