数据可视化大屏屏幕适配

效果

显示侧边栏时

隐藏侧边栏时

全屏时

原理

transform 根据父盒子尺寸与原图尺寸的比例缩放

代码

伸缩盒子组件ScaleBox

<template>
  <div class="scale_wrap" ref="scaleBoxRef">
    <div
      class="ScreenAdapter"
      :style="{
        width: canvasWidth + 'px',
        height: canvasHeight + 'px',
        ...style,
      }"
    >
      <slot />
    </div>
  </div>
</template>
<script>
// 监听盒子的尺寸变化
import ResizeObserver from 'resize-observer-polyfill'
export default {
  name: '',
  // 接收父组件传来的参数  （设计图尺寸）
  props: {
    width: {
      type: String,
      default: '1920',
    },
    height: {
      type: String,
      default: '1080',
    },
  },
  data() {
    return {
      // 整体等比例缩放
      style: {
        transform: 'scale(1,1) translate(-50%, -50%)',
      },
    }
  },
  // 画布实际宽高
  computed: {
    canvasWidth(){
      return this.width
    },
    canvasHeight(){
      return this.height
    },
  },
  mounted() {
    this.setScale()
    const robserver = new ResizeObserver(() => {
      console.log('robserver')
      this.setScale()
    })
    robserver.observe(this.$refs.scaleBoxRef)

  },
  methods: {
    // 设置比例
    setScale() {
      const { clientWidth, clientHeight } = this.$refs.scaleBoxRef
      // 相对于画布原始宽高的缩放比例
      const scaleX = clientWidth / this.canvasWidth
      const scaleY = clientHeight / this.canvasHeight
      this.style.transform = `scale(${scaleX}, ${scaleY}) translate(-50%, -50%)`
    },
  },
}
</script>
<style lang="less" scoped>
.scale_wrap {
  width: 100%;
  height: 100%;//父组件没高时100%不起作用需要给父组件手动给一个高
  position: relative;
  // background-color: rgba(1, 4, 41);
  .ScreenAdapter {
    transform-origin: 0 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transition: 0.3s;
  }
}
</style>

伸缩盒子的使用

.big {
  width: 100%;
  height: 100%;
  background-image: url('~@/assets/big/bg.png');
}

全屏相关代码

<!-- 退出进入全屏icon -->
<a-popover :content="isFullscreen ? '退出全屏' : '进入全屏'">
  <a @click="getFullCreen" style="font-size: 20px; color: #fff" class="icon_togglefull">
    <a-icon :type="isFullscreen ? 'fullscreen-exit' : 'fullscreen'" />
  </a>
</a-popover>

// 全屏模式
getFullCreen() {
  if (!screenfull.isEnabled) {
    this.$message.warning('you browser can not work')
    return false
  }
  const element = document.getElementById('control')
  if (this.isFullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
  } else {
    if (element.requestFullscreen) {
      element.requestFullscreen()
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen()
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen()
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen()
    }
  }
  this.isFullscreen = !this.isFullscreen
},