123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- const scale = {
- width: '1',
- height: '1',
- }
- const baseWidth = 1920
- const baseHeight = 1080
- const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
- export default {
- data() {
- return {
-
- drawTiming: null,
- }
- },
- computed: {
- isScale(){
- return this.$store.state.setting.isScale
- }
- },
- mounted () {
- if(!this.isScale){
- return
- }
- this.calcRate()
- window.addEventListener('resize', this.resize)
- },
- beforeDestroy () {
- window.removeEventListener('resize', this.resize)
- },
- methods: {
- calcRate () {
- const appRef = this.$refs["appRef"]
- if (!appRef) return
-
- const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
- if (appRef) {
- if (currentRate > baseProportion) {
-
- scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
- scale.height = (window.innerHeight / baseHeight).toFixed(5)
- appRef.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)
- appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
- }
- }
- },
- resize () {
- if(!this.isScale){
- return
- }
- clearTimeout(this.drawTiming)
- this.drawTiming = setTimeout(() => {
- this.calcRate()
- }, 200)
- }
- },
- }
|