数字孪生UI适配方案

一颗烂土豆
157 阅读4分钟

UI缩放与适配解决方案

普遍共识

一：横向、纵向不可出现滚动条
一：可全屏（就是F11全屏模式）
一：不论在多大的屏幕中显示，页面不可变形，最好是肉眼看不出任何问题

image.png

目前解决方案

  1. css3的 scale进行适配（本文使用）。
  2. rem适配
  3. flex适配。
  4. 百分比适配。

<u-scale> 是本人在验证多种方式最终封装的Vue组件，该组件在生产环境得到了充分验证，并在虚幻引擎、及unity等C端应用中表现良好。

特点

  • 针对性强： 明确针对数字孪生和高保真可视化应用，它在处理复杂的3D模型和大规模数据可视化方面进行了特别优化。
  • 性能优化：通过节流和防抖机制， 减少了不必要的重绘，这在处理大量动态内容时尤为关键。相比之下，其他框架可能更多依赖于标准的CSS媒体查询和JavaScript事件监听。
  • CSS3D支持：对于需要高性能3D渲染的应用， 的CSS3D变换支持可以带来显著的性能提升和渲染质量改善。

安装与使用

  1. 安装：通过 npm 安装 <u-scale> 插件。

    npm install u-scale

  2. 全局注册：在 Vue 应用中导入并注册插件。

    import { createApp } from 'vue';
import App from './App.vue';
import { useUscale } from 'u-scale';

const app = createApp(App);
app.use(useUscale, {
  target: '#app', // 目标元素
  size: [1920, 1080], // 默认视口尺寸
  type: 'auto',  // 如何调整缩放 ('width', 'height', 或 'auto')
  css3d: true, // 是否使用 CSS 3D 变换
  ratio: 1920 / 1080, // 预设视口比例
  wait: 100 // 更新缩放的节流间隔
});
app.mount('#app');

  3. 组件使用 使用 <u-scale> 组件实现响应式屏幕适配。

    <template>
  <u-scale :origin="'left'" :top="0" :left="0" :pointerEvents="'auto'" :unit="'%'" :wait="100">
    <!-- 子组件或内容 -->
  </u-scale>
</template>

组件属性详述

属性类型必填项默认值描述
scaleNumber否1缩放因子。允许你独立于全局配置调整元素的大小。
originString否'left'对齐方式。定义元素相对于其父容器的初始位置，可选值包括 'left', 'right', 'center', 'bottom-L', 'bottom-R'。
topNumber否0定义元素顶部与父容器边缘的距离。注意：不能同时设置 top 和 bottom。
leftNumber否0定义元素左侧与父容器边缘的距离。注意：不能同时设置 left 和 right。
rightNumber否null定义元素右侧与父容器边缘的距离。注意：不能同时设置 left 和 right。
bottomNumber否null定义元素底部与父容器边缘的距离。注意：不能同时设置 top 和 bottom。
pointerEventsString否'auto'鼠标事件模式。可设为 'auto' 或 'none'。设置为 'none' 可使元素不接收鼠标事件。
unitString否'px'布局单位。可以选择 'px'（像素）或 '%'（百分比）。百分比单位适用于响应式设计。
waitNumber否50节流更新间隔。定义窗口大小变化时，两次缩放更新间的最小时间间隔，单位为毫秒。
noScaleBoolean否false禁用缩放。设置为 true 时，元素将不会根据窗口大小变化而缩放。
widthNumber否null当 noScale 设为 true 时，可以显式设置元素的宽度。
heightNumber否null当 noScale 设为 true 时，可以显式设置元素的高度。

在实际应用中，根据具体需求，可能需要根据上下文确定哪些字段是必需的。例如，在需要精确定位的场景下，top 或 bottom 和 left 或 right 至少需要一个被设置。而在不需要缩放的场景下，noScale 和相应的 width 和 height 就会成为必要的配置项。

注意事项

  • 未指定 scale 属性时，将使用全局配置的值。
  • 内容应使用百分比或相对单位，以确保正确响应。
  • 复杂布局可能需要额外的 CSS 规则以保证元素正确缩放。

使用示例

<template>
  <div id="app">
    <u-scale :origin="'center'" :top="50" :left="50" :unit="'%'">
      <div class="content">响应式内容</div>
    </u-scale>
  </div>
</template>

<script>
import { uScale } from 'u-scale';

export default {
  components: {
    uScale,
  },
};
</script>

<style scoped>
.content {
  width: 80%;
  height: 80%;
  background-color: lightblue;
}
</style>

最佳实践

  • 使用相对单位：为了确保元素能够响应缩放，推荐使用百分比单位 (%) 或者视窗单位 (vw, vh)。
  • 考虑性能：虽然 CSS3D 变换提供了更好的渲染效果，但在某些设备上可能会导致性能问题。因此，建议在性能测试后根据实际需要开启或关闭 css3d 属性。
  • 测试不同设备：由于 <u-scale> 被设计为跨平台兼容，确保在多种设备和浏览器上进行充分测试，以验证其响应式表现。
avatar
文章
阅读
粉丝