基于transform的scale属性,实现数据可视化大屏自适应缩放,保持比例不变,轻松应对不同分辨率

简介: 基于transform的scale属性,实现数据可视化大屏自适应缩放,保持比例不变,轻松应对不同分辨率
一、需求背景:

数据可视化大屏是一种将数据、信息和可视化效果集中展示在一块或多块大屏幕上的技术。通过各种图形、图表、数据可视化等方式,将复杂的数据和信息变得直观、易懂,让人们能够快速地了解数据和信息的含义。

应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使用,可视化图表来展示体现数据,让数据更加直观,数据特点更加突出。


根据不同的业务场景,做一个好的大屏需要考虑大屏布局、图表展现、交互动效、操作是否简单、是否能自适应等等因素。其中大屏是否能自适应也是一个比较重要的因素。


在做可视化大屏时,大屏的分辨率基本都是固定死的,因此我们只需要把页面按照设计稿尺寸写死即可,但是我们开发屏幕很小,这时候总要将浏览器进行缩小,这里给出一个通用方法,供大家使用,无需缩放浏览器。


二、需求分析:

本示例按照1920*1080的分辨率来写,也就是16:9的比例。你也可以替换成你自己的分辨率。效果是一样的。

做大屏项目时,需要适配不同屏幕,且在任意屏幕下保持16:9的比例,保持显示效果一致,屏幕比例不一致两边留白即可。

不同屏幕宽高比例(和设计稿16:9)相比会有两种情况:

  • 更宽:(Width / Height) > 16/9,以高度为基准,去适配宽度。
  • 更高:(Width / Height) < 16/9,以宽度为基准,去适配高度。


三、选择方案:

首先我们严格按照给定的UI设计稿的宽高尺寸画页面。然后我们再去计算一下放大或者缩小的倍数。


这时候要注意了,因为每块屏幕不一样,所以这个缩放的数值不是个固定的值,所以是个变量。这时候我们就要进入页面的时候计算出来这个缩放值。


利用transform的scale属性缩放,缩放整个页面。


我们还使用transform-origin属性将缩放的中心点设置为左上角,以确保大屏幕按比例缩放。


四、实现代码:

1、新建autoResizeScreenMixin.js

export default {
    data() {
        return {
            width: 1920,
            height: 1080,
        }
    },
    mounted() {
        this.autoResizeScreen();
        window.addEventListener('resize', this.autoResizeScreen);
    },
    methods: {
        autoResizeScreen() {
            let rect = this.$refs.AutoScalContainerRef.getBoundingClientRect()
            let DomRef = this.$refs.DomRef
            let clientWidth = rect.width
            let clientHeight = rect.height
            var width = this.width
            var height = this.height
            let left = 0
            let top = 0
            let scale = 0
            let ratio = width / height;
            if ((clientWidth / clientHeight) > ratio) {
                scale = clientHeight / height;
                top = 0;
                left = (clientWidth - width * scale) / 2;
            } else {
                scale = clientWidth / width;
                left = 0;
                top = (clientHeight - height * scale) / 2;
            }
            Object.assign(DomRef.style, {
                transform: `scale(${scale})`,
                left: `${left}px`,
                top: `${top}px`,
            });
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.autoResizeScreen);
    },
}

2、在app.vue的页面下使用

<template>
  <div id="app">
    <div class="auto-scal-container" ref="AutoScalContainerRef">
      <div ref="DomRef" class="auto-scal-container-inner">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import autoResizeScreenMixin from '@/utils/autoResizeScreenMixin ';
export default {
  mixins: [autoResizeScreenMixin]
}
</script>

3、在HomeView.vue页面写大屏代码布局

<template>
  <div class="custom-big-box">
    <div class="top">头部</div>
    <div class="bot">
      <div class="left">左侧</div>
      <div class="mid">
        <div class="midtop">卡片</div>
        <div class="midbot">地图</div>
      </div>
      <div class="right">右侧</div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.custom-big-box {
  width: 1920px;
  height: 1080px;
  font-size: 26px;
  color: #fff;
  text-align: center;
  line-height: 100px;
}

.top {
  width: 100%;
  height: 100px;
  background-color: #409EFF;
}

.bot {
  padding: 20px;
  padding-top: 0;
  display: flex;
  height: 980px;
  background-color: #DCDFE6;
}

.left {
  width: 400px;
  height: 960px;
  background-color: #67C23A;
}

.mid {
  width: 1080px;
  height: 960px;
}

.right {
  width: 400px;
  height: 960px;
  background-color: #E6A23C;
}

.midtop {
  height: 100px;
  width: 100%;
  background-color: #F56C6C;
}

.midbot {
  width: 100%;
  height: 860px;
  background-color: #909399;
}
</style>


五、效果预览:
  • 效果预览合适的分辨率:

  • 效果预览更宽:

  • 效果预览更高:

六、封装组件:

当然你也可以封装个组件来使用。

我这边上传了一个我封装好的组件示例。在顶部可以下载。

可以在一个项目里面,使用不同分辨率或比例的大屏页面。

这里我做了3中比例的示例演示:(16:9的,4:3的,不规则的)

通过传参width,height即可适应缩放。


代码里面创建了AutoScalContainer组件,建了3个示例页面,演示不同分辨率或比例的大屏页面的效果。


  • AboutView.vue是1920*1080的分辨率大屏页面(16:9)
  • HomeView.vue是8400*3150的分辨率大屏页面(不规则)
  • HelloWorld.vue是1024*768的分辨率大屏页面(4:3)


目录
相关文章
|
图形学
模型UV纹理设置工具
贴图可以赋予模型丰富的外观纹理和颜色信息,而法线贴图可以增加模型的细节和真实感。这两种纹理贴图技术相互配合,共同营造出逼真的三维场景。
184 0
模型UV纹理设置工具
|
1月前
|
数据可视化
在线可视化设计教你玩转圆角、阴影
在线可视化设计教你玩转圆角、阴影
32 1
|
2月前
|
存储 关系型数据库 Serverless
三维引擎系列(二):可视域与阴影率
Ganos是由阿里云数据库产品事业部与达摩院联合研发的新一代云原生位置智能引擎,集成于PolarDB、Lindorm、AnalyticDB和RDS PG等产品中。Ganos拥有多达十个核心引擎,涵盖几何、栅格、轨迹、表面网格等,为数据库提供全方位的时空数据分析能力。本文重点介绍Ganos三维引擎在PolarDB中的应用,特别是在可视域分析和阴影率分析方面的功能和技术优势。通过将计算下推到数据库内部,Ganos实现了高效的大规模三维数据处理和分析,显著提升了数字孪生应用场景中的计算效率。
28 1
|
6月前
|
编解码 数据可视化
R语言动态可视化:绘制历史全球平均温度的累积动态折线图动画gif视频图
R语言动态可视化:绘制历史全球平均温度的累积动态折线图动画gif视频图
|
6月前
|
传感器 人工智能 搜索推荐
用 ChatGPT 4.0 实现获取并保存 RealSense 相机的深度图像,处理colorizer,histogram equalization配置,解决深度图像颜色分布异常问题
用 ChatGPT 4.0 实现获取并保存 RealSense 相机的深度图像,处理colorizer,histogram equalization配置,解决深度图像颜色分布异常问题
101 0
用 ChatGPT 4.0 实现获取并保存 RealSense 相机的深度图像,处理colorizer,histogram equalization配置,解决深度图像颜色分布异常问题
|
6月前
|
数据采集 人工智能 计算机视觉
CLIP的升级版Alpha-CLIP:区域感知创新与精细控制
为了增强CLIP在图像理解和编辑方面的能力,上海交通大学、复旦大学、香港中文大学、上海人工智能实验室、澳门大学以及MThreads Inc.等知名机构共同合作推出了Alpha-CLIP。这一创新性的突破旨在克服CLIP的局限性,通过赋予其识别特定区域(由点、笔画或掩码定义)的能力。Alpha-CLIP不仅保留了CLIP的视觉识别能力,而且实现了对图像内容强调的精确控制,使其在各种下游任务中表现出色。
222 1
|
图形学
自定义模型缩放比例
完成缩放后,查看模型在场景中的效果,确保大小和比例符合您的需求。如果需要进一步调整,可以重复上述步骤进行微调。
104 0
|
存储 关系型数据库 Serverless
Ganos三维引擎系列(二):可视域与阴影率分析
本文介绍了基于阿里云多模态时空数据库Ganos三维引擎构建可视域分析与阴影率分析的应用方法。Ganos三维引擎支持三大类存储结构:表面网格模型、体网格模型与3D实景模型,其中表面网格模型用于存储带有语义的类BIM的精细化三维模型,体网格模型用于存储地质体等非匀质“场”类三维模型,3D实景模型用于存储倾斜摄影、精白模等用于渲染的三维模型,三种存储结构都提供了原生数据类型、空间索引、分析算子、导入导出工具、可视化支撑等功能,为数字孪生类应用提供闭环的存算显能力。
|
前端开发 数据可视化
text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏
text-overflow实现数据可视化大屏文本滚动自适应伸缩隐藏
89 1
|
JSON 前端开发 测试技术
Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
Echarts高级进阶教程(1):异步加载大量数据导致dataZoom组件拖动缩放时间轴卡顿的sampling降采样策略解决方案
797 1