数据可视化大屏屏幕适配

Posted 2023-03-15 六月June June

效果

显示侧边栏时

隐藏侧边栏时

全屏时

原理

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
,

欢迎各位与我技术探讨，共同进步。后续有时间会分享源码