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

这篇具有很好参考价值的文章主要介绍了记录--页面使用 scale 缩放实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

记录--页面使用 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 缩放实践文章来源地址https://www.toymoban.com/news/detail-776908.html

到了这里,关于记录--页面使用 scale 缩放实践的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 分享一个500页面给大家

    先看效果: 再看代码:

    2024年02月06日
    浏览(52)
  • uniapp 开发微信小程序使用echart的dataZoom属性缩放功能不生效!bug记录!

    在本项目中使用的是这个echart库 在项目中添加了dataZoom配置项但是不生效,突然想到微信小程序代码大小的限制,之前的echarts.js是定制的,有可能没有加dataZoom组件。故重新定制echarts.js。之前用的echarts版本是5.0.0,这次也是定制同样的版本,但是报错,按照之前的经验判断,

    2024年02月11日
    浏览(52)
  • js实现鼠标滚轮放大缩小页面指定区域(css3 scale)

    一、需求 鼠标滚轮在红色边框区域内向上滚动:绿色边框盒子里所有元素缩小。 鼠标滚轮在红色边框区域内向下滚动:绿色边框盒子里所有元素放大。 点击还原按钮:绿色盒子里所有元素还原为初始值。 二、相关知识点 1、CSS3 Transform属性应用于元素的2D或3D转换。这个属性允许

    2024年02月11日
    浏览(56)
  • 电子取证之服务器取证,本人第一次从pc取证到服务器,这里有一套例题分享给大家,所有解析我都尽可能全面具体,希望与各位同仁一起学习。(二次修改)

    话不多说,先上链接,这个包含一个2G的服务器镜像和题目,原题是弘连公司的,致谢,此处纯粹分享解法供大家学习。 第二次做题目,发现宝塔新版已经不支持,所以题目意义减少,还是欢迎手搓与小白来看看 链接: https://pan.baidu.com/s/1p8T7Fez_VlnSqdzvptARRw?pwd=ybww 提取码: ybww

    2024年02月07日
    浏览(48)
  • CSS 设置页面缩放

    为了设置页面缩放,可以使用以下 CSS 属性:   或者使用以下 CSS 属性:   请注意,缩放可能影响页面布局。因此,应谨慎使用该特性。 为特定设备(例如移动设备)设置不同的缩放,可以使用媒体查询。例如:   这意味着,当屏幕宽度不超过 480px 时,页面将以 60% 的比例

    2024年02月11日
    浏览(38)
  • 如何在iPhone或iPad中截取长页面,这里有详细步骤

    iOS有太多隐藏的功能,记住它们可能是一个挑战,但知道如何在iPhone或iPad上截屏整个页面是我从未忘记的。 你若是一名作家,你经常会发现自己需要截屏网站和文章中的大块文本,以便发送给某人或稍后阅读。虽然现在的手机有着令人羡慕的屏幕尺寸,但一想到必须单独截

    2024年01月16日
    浏览(37)
  • 缩放页面不影响布局的方法

    1.这里将以百度首页的导航栏作为类似参考    2.当我们对其放大时,出现了滚动条  3.当缩小页面时是这样的 4.当我们自己在写的时候,最初c的时候页面的布局看起来也很好,但一当缩放时就是出现 错位;正常的布局情况如下  当进行放大时会有下面这种情况  当进行缩小

    2024年02月08日
    浏览(26)
  • 材料论文阅读/中文记录:Scaling deep learning for materials discovery

    Merchant A, Batzner S, Schoenholz S S, et al. Scaling deep learning for materials discovery[J]. Nature, 2023: 1-6. 全文速览 这篇文章主要讲了一种名为 GNoME 的 材料发现框架 。该框架利用机器学习和高通量计算方法,通过预测材料的稳定性和性质,加速新材料的发现。文章介绍了GNoME的 工作原理和方

    2024年02月02日
    浏览(62)
  • Python Opencv实践 - 图像缩放

         

    2024年02月13日
    浏览(42)
  • 记录一次最近遇到的新网络诈骗经历,大家要提高警惕啊

    第一次接到诈骗电话,说是要求修改支付宝信息的,一开始说的确实是很迷惑人,一下子可能没法马上分辨出来,但是到后面说要加QQ操作什么什么的,那肯定就是有严重问题的,因为很多诈骗都是通过QQ来操作的,一听到这个就要警惕了。 他的诈骗流程是这样的: 先是说你

    2023年04月23日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包