首页 前端知识 前端CSS/JS页面缩放,解决zoom导致Echarts鼠标定位偏移。

前端CSS/JS页面缩放,解决zoom导致Echarts鼠标定位偏移。

2024-03-17 00:03:18 前端知识 前端哥 397 773 我要收藏

有个需求要让不同分辨率都适配到1080P的效果,以15.6寸1080P笔记本为例,页面缩放默认一般是125%,要显示真正的1080P一般是调整浏览器缩放80%(Edge),也有部分浏览器默认时125%则缩放到100%。

那么能不能通过CSS实现?主流的处理方法是:

  body {
    zoom: 0.8;
  }

确实可以实现缩放效果,但是当页面中存在Echarts组件时,Echarts组件部分会出现鼠标定位偏移问题,一般有以下两种处理方案:

方案一、改用scale替代zoom

固定比例缩放,通过CSS实现:

  body {
    transform: scale(0.8);
    transform-origin: 0px 0px;
    width: 125%;
    height: 125%;
  }

计算比例缩放,需要JS实现:

  // body自动缩放
  function bodySize () {
    var size = window.screen.height / 1080;
    var size2 = 100 / size + '%';
    $('body').css('transform', 'scale(' + size + ')');
    $('body').css('transform-origin', '0 0');
    $('body').css('width', size2);
    $('body').css('height', size2);
  }

方案二、对Echarts组件进行处理

由于Echarts组件都是通过canvas渲染的,所以可以直接对canvas进行处理。如果页面存在其他canvas无需缩放,也可改用其他选择器。

固定比例缩放,通过CSS实现:

  body {
    zoom: 0.8;
  }

  canvas {
    zoom: 1.25;
    transform: scale(0.8);
    transform-origin: 0px 0px;
  }

计算比例缩放,需要JS实现:

  // body自动缩放
  function bodySize () {
    var size = window.screen.height / 1080;
    $('body').css('zoom', size);
    // 处理缩放导致canvas定位异常
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {zoom: ' + 1 / size + '}');
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform: scale(' + size + ')}');
    document.styleSheets[document.styleSheets.length - 1].insertRule('canvas {transform-origin: 0 0}');
  }

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3907.html
标签
评论
发布的文章

jQuery事件绑定

2024-04-13 09:04:31

Jquery——基础

2024-04-03 12:04:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!