scale和zoom的区别

1. zoom的缩放是相对于左上角的；而scale默认是居中缩放，可以通过transform-origin修改基准点
2. zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化。
3. 对文字的缩放规则不一致。zoom缩放依然受限于最小12像素中文大小限制；而scale就是纯粹的对图形进行比例控制，文字50%原来尺寸
4. 兼容性问题。firefox下不支持zoom；scale针对IE9+

由于zoom兼容性问题，我们采用scale进行缩放。

需求描述

有个组件S，需要在A页面显示本来的大小（用于截图发邮件），在B页面放大1.25倍（用于详情查看，需要放大一点）

在B页面还有锚点的交互，和滚动定位，可以定位到组件S的某个区域上。大概这样

transform: scale(1.25);
transform-origin: top;
或者
zoom: 1.25;

scale问题和解决

问题： scale放大，占据宽高不变，导致内容高度不够，锚点定位到最后，菜单上移消失问题
解决: 在组件S加载完之后，获取放大后的高，在html中设置该高度

   handleDomLoaded() {
      const sketchDom = document.getElementById('sketch')
      const { width, height } = sketchDom.getBoundingClientRect()
      this.heightStyle = { height: height + 'px'}
 }

如果不考虑兼容firfox，可以改用zoom，就没有上面的问题了

echarts 在缩放中模糊的问题

参考：缩放带来的echarts模糊

1、echarts.init(dom,null,{ renderer : 'svg' });
2、echarts.init(chart,null, { devicePixelRatio: 4 });

问题：在使用domtoimg插件截图的情况下：
使用方式一 { renderer : ‘svg’} 可以解决放大文字模糊的问题，但如果使用domtoimg插件截图，dom显示正常的情况下，截出的图片会出现文字放大、tooltip文字重叠的问题。

使用方式二不会出现放大问题，但截图结果比dom显示的文字要模糊，只能将devicePixelRatio设置调大来处理