记录–页面使用 scale 缩放实践

  • 记录–页面使用 scale 缩放实践已关闭评论
  • 27 次浏览
  • A+
所属分类:Web前端
摘要

最近接到一个任务,需要把页面放大1.5倍显示。这里使用 css 里的 transform: scale(1.5) 来实现。


这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--页面使用 scale 缩放实践

最近接到一个任务,需要把页面放大1.5倍显示。这里使用 css 里的 transform: scale(1.5) 来实现。

document.body.setAttribute(     'style',     `transform: scale(1.5); transform-origin: left top; width: ${window.innerWidth / 1.5}px; height: ${window.innerHeight / 1.5}px;` );

缩放后元素大小

记录--页面使用 scale 缩放实践

width

记录--页面使用 scale 缩放实践

height

记录--页面使用 scale 缩放实践

通过以上数值比较,我们发现:

clientWidthclientHeightoffsetWidthoffsetHeightscrollWidthscrollHeightwindow.getComputedStyle 获取的值都是缩放前的;

getBoundingClientRect获取的值是缩放后的。

这里我们以 width 为例,我们先把 getBoundingClientRectwidth 换算成缩放前的值

894.75 / 1.5 (缩放倍数) = 596.5

我们发现换算后的值跟 getComputedStyle 获取到的值一致,是缩放前宽度的值;clientWidthoffsetWidth 的值会进行取整。

计算宽高的时候我们优先选择 getBoundingClientRectgetComputedStyle

scroll

我们再来看下 scrollHeight,我们把滚动条滚动到最底部

记录--页面使用 scale 缩放实践

 我们发现

clientHeight + scrollTop = scrollHeight

这里我们可以得出 scrollTopscrollLeftscrollHeightscrollWidth 也是缩放前的值。

因此在计算宽高的时候,我们优先选择 getComputedStyle,可以避免进行换算。

这里我们将其封装成方法,方便使用:

/** 获取元素大小 */ function getElementSize(el: Element) {     const style = window.getComputedStyle(el);     return {         width: parseFloat(style.width),         height: parseFloat(style.height),     }; }

坐标

getBoundingClientRect

记录--页面使用 scale 缩放实践

记录--页面使用 scale 缩放实践

getBoundingClientRect 获取到的宽高和坐标位置都是缩放后的(即实际显示值)。

MouseEvent

记录--页面使用 scale 缩放实践

MouseEvent 获取到的坐标系值也是缩放后的(即实际显示值)。

因此在和坐标位置有关的值进行计算时,推荐使用 getBoundingClientRect

这里有一点要注意的,我们使用坐标及getBoundingClientRect宽高计算出来的值,由于这些值是缩放后的,最终设置到元素上的时候需要除以放大倍数(这里是1.5倍),因为设置在元素上的值也会被缩放。例如:

element.style.left = `${e.clientX / 1.5}px`; element.style.width = `${element.getBoundingClientRect().width / 1.5}px`

获取 scale 的值

当我们使用坐标有关的值时避免不了进行换算,因此我们需要获取当前 scale 缩放倍数

function toNum(num: number) {     return Number.isNaN(num) ? 1 : num; }  function getScale(el: Element) {     const eleRect: DOMRect = el.getBoundingClientRect();     const computedStyle = window.getComputedStyle(el);     const eleOutWidth = parseFloat(computedStyle.width);     const eleOutHeight = parseFloat(computedStyle.height);      const scaleX = toNum(Math.round((eleRect.width / eleOutWidth) * 1000) / 1000);     const scaleY = toNum(Math.round((eleRect.height / eleOutHeight) * 1000) / 1000);      return {         scaleX,         scaleY,     }; }

这里我们封装了一个方法 getScale,传入当前元素的父元素,即可获取当前缩放倍数。例如:

getScale(document.body)

得到的值为:

{     scaleX: 1.5     scaleY: 1.5 }

我们得到当前水平缩放 1.5 倍,垂直缩放 1.5 倍。

总结

计算宽高的时候,优先选择 getComputedStyle

跟坐标位置有关的,使用 getBoundingClientRect,但是计算出的值需要除以 scale 放大倍数。

本文转载于:

https://juejin.cn/post/7320079052013158426

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--页面使用 scale 缩放实践