CN115437625A - 页面缩放方法、容器组件、装置、设备和存储介质 - Google Patents
页面缩放方法、容器组件、装置、设备和存储介质 Download PDFInfo
- Publication number
- CN115437625A CN115437625A CN202211129150.3A CN202211129150A CN115437625A CN 115437625 A CN115437625 A CN 115437625A CN 202211129150 A CN202211129150 A CN 202211129150A CN 115437625 A CN115437625 A CN 115437625A
- Authority
- CN
- China
- Prior art keywords
- page
- scaling
- root node
- height
- width
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
Abstract
本申请涉及一种页面缩放方法、容器组件、装置、设备和存储介质,其中,该方法通过对页面的容器组件的根节点进行监听,其中,页面包含有多个显示区域,获取用户操作页面时输入的操作指令,并根据操作指令确定页面的缩放比例,在监听到根节点发生变更且停止变更的情况下,根据缩放比例对页面进行缩放处理,解决了相关技术中在缩放页面时,页面自适应缩放时显示异常,以及缩放时页面卡顿的问题,使页面不会频繁触发缩放事件,降低了cpu的负荷,避免对页面进行重复计算和渲染,提高了页面缩放的流畅度与处理页面缩放的效率。
Description
技术领域
本申请涉及可视化页面技术领域,特别是涉及页面缩放方法、容器组件、装置、设备和存储介质。
背景技术
在前端可视化的开发过程中,出于数据可视化的需要,经常会使用到可视化的屏幕页面。然而,每次开发一个新的页面,都需要对页面的每个模块进行自适应适配使之适应更多的分辨率,但是这样会造成开发人员工作量的增大,并且需要频繁地切换不同的机器进行调试,造成资源的浪费。为了使页面的兼容性更好,也需要添加更多的媒体样式进行适配。这些都会导致新页面开发的效率较低。为了解决这些问题,通常会采用页面自适应缩放技术,使页面自动适配不同环境与不同分辨率要求的浏览器窗口。
在相关技术中,通常是页面的各个模块使用包括百分比、flex弹性布局、rem/em、vh/wh等不同的缩放方法对页面进行自适应处理,这样会造成当浏览器窗口缩放到一定比例时,各个模块因为本身设置的自适应方案的不同,模块之间出现不同程度的错乱显示,影响页面的展示效果。此外,相关技术在缩放页面时存在页面卡顿的情况,导致页面缩放不够流畅。
目前针对相关技术中存在页面缩放时显示异常和卡顿的问题,尚未提出有效的解决方案。
发明内容
本申请实施例提供了一种页面缩放方法、容器组件、装置、设备和存储介质,以至少解决相关技术中存在页面缩放时显示异常和卡顿的问题。
第一方面,本申请实施例提供了一种页面缩放方法,包括:
对页面的容器组件的根节点进行监听,其中,所述页面包含有多个显示区域;
获取用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例;
在监听到所述根节点发生变更且停止变更的情况下,根据所述缩放比例对所述页面进行缩放处理。
在其中一些实施例中,在对所述页面的容器组件的根节点进行监听之前,所述方法还包括:
判断所述容器组件中是否存在所述根节点;
在判断到所述容器组件中存在所述根节点的情况下,获取所述根节点的属性,并对所述根节点进行定位,其中,所述根节点的属性包括所述页面当前的宽度与高度。
在其中一些实施例中,对所述页面的容器组件的根节点进行监听包括:
在所述根节点的属性每一次发生变化的情况下,生成对应的记录信息,其中,所述根节点的属性包括所述页面当前的宽度与高度;
在所述根节点的属性停止变化的情况下,对多条所述记录信息进行响应处理,得到所述页面停止变化后的宽度与高度。
在其中一些实施例中,获取所述用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例包括:
获取展示窗口的宽度,根据所述展示窗口的宽度与所述页面停止变化后的宽度,计算得到所述展示窗口与所述页面的宽度比;
获取所述展示窗口的高度,根据所述展示窗口的高度与所述页面停止变化后的高度,计算得到所述展示窗口与所述页面的高度比;
选取所述展示窗口与所述页面的宽度比与高度比中最小的数值作为所述缩放比例。
在其中一些实施例中,根据所述缩放比例对所述页面进行缩放处理包括:
获取所述页面的显示节点,并获取所述显示节点的样式信息;
根据所述样式信息计算所述显示节点的几何信息;
根据所述几何信息得到所述显示节点的绝对像素,根据所述绝对像素对所述页面进行绘制。
在其中一些实施例中,在根据所述缩放比例对所述页面进行缩放处理之后,所述方法还包括:
当用户关闭所述页面之后,释放所述页面的内存。
第二方面,本申请实施例提供了一种容器组件,包括:输入组件和动态容器组件;其中,所述输入组件用于获取页面内容和属性;所述动态容器组件用于作为全局巩固组件,所述动态容器组件被引入目标文件进行调用时,执行如上述第一方面所述的任一项的页面缩放方法。
第三方面,本申请实施例提供了一种页面缩放装置,包括:
监听模块,用于对页面的容器组件的根节点进行监听,其中所述页面包含有多个显示区域;
获取模块,用于获取所述用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例;
处理模块,用于在监听到所述根节点发生变更且停止变更的情况下,根据所述缩放比例对所述页面进行缩放处理。
第四方面,本申请实施例提供了一种计算机设备,包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如上述第一方面所述的任一项的页面缩放方法的步骤。
第五方面,本申请实施例提供了一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如上述第一方面所述的任一项的页面缩放方法的步骤。
相比于相关技术,本申请实施例提供的页面缩放方法、容器组件、装置、设备和存储介质,通过对页面的容器组件的根节点进行监听,其中,所述页面包含有多个显示区域,获取用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例,在监听到所述根节点发生变更且停止变更的情况下,根据所述缩放比例对所述页面进行缩放处理,解决了相关技术中存在页面缩放时显示异常和卡顿的问题,使得页面缩放时能够正常、流畅地显示,并提高了页面开发的效率。
本申请的一个或多个实施例的细节在一下附图和描述中提出,以使本申请的其他特征、目的和优点更加简明易懂。
附图说明
此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:
图1是本申请其中一个实施例中的页面缩放方法的终端的硬件结构框图;
图2是本申请其中一个实施例中的页面缩放方法的流程图;
图3是本申请其中一个实施例中动态容器组件的内部实现框架图;
图4是本申请其中一个实施例中容器组件使用的整体框图;
图5是本申请其中一个实施例中的页面缩放装置的结构框图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行描述和说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。基于本申请提供的实施例,本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例,都属于本申请保护的范围。
显而易见地,下面描述中的附图仅仅是本申请的一些示例或实施例,对于本领域的普通技术人员而言,在不付出创造性劳动的前提下,还可以根据这些附图将本申请应用于其他类似情景。此外,还可以理解的是,虽然这种开发过程中所作出的努力可能是复杂并且冗长的,然而对于与本申请公开的内容相关的本领域的普通技术人员而言,在本申请揭露的技术内容的基础上进行的一些设计,制造或者生产等变更只是常规的技术手段,不应当理解为本申请公开的内容不充分。
在本申请中提及“实施例”意味着,结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例,也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是,本申请所描述的实施例在不冲突的情况下,可以与其它实施例相结合。
除非另作定义,本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制,可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形,意图在于覆盖不排他的包含;例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元,而是可以还包括没有列出的步骤或单元,或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“多个”是指两个或两个以上。
在本实施例中提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。比如在终端上运行,图1是本实施例的校正参数生成方法的终端的硬件结构框图。如图1所示,终端可以包括一个或多个(图1中仅示出一个)处理器102和用于存储数据的存储器104,其中,处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置。上述终端还可以包括用于通信功能的传输设备106以及输入输出设备108。本领域普通技术人员可以理解,图1所示的结构仅为示意,其并不对上述终端的结构造成限制。例如,终端还可包括比图1中所示更多或者更少的组件,或者具有与图1所示出的不同配置。
存储器104可用于存储计算机程序,例如,应用软件的软件程序以及模块,如在本实施例中的校正参数生成方法对应的计算机程序,处理器102通过运行存储在存储器104内的计算机程序,从而执行各种功能应用以及数据处理,即实现上述的方法。存储器104可包括高速随机存储器,还可包括非易失性存储器,如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中,存储器104可进一步包括相对于处理器102远程设置的存储器,这些远程存储器可以通过网络连接至终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
传输设备106用于经由一个网络接收或者发送数据。上述的网络包括终端的通信供应商提供的无线网络。在一个实例中,传输设备106包括一个网络适配器(NetworkInterface Controller,简称为NIC),其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中,传输设备106可以为射频(Radio Frequency,简称为RF)模块,其用于通过无线方式与互联网进行通讯。
在本实施例中提供了一种页面缩放方法,图2是本实施例的页面缩放方法的流程图,如图2所示,该流程包括如下步骤:
步骤S201,对页面的容器组件的根节点进行监听,其中,页面包含有多个显示区域。
具体地,本申请的页面,指的是包括多个显示区域的可视化页面,每个显示区域对不同的数据进行可视化地信息展示、数据分析或监控预警。
另外,本申请针对不同的浏览器内核,使用与浏览器内核对应的监听函数进行监听,例如在监听基于webkit内核开发的Safari浏览器,Google浏览器、百度浏览器等浏览器页面的根节点时,采用webkit前缀的监听函数;在监听基于moz内核的火狐浏览器页面的根节点时,采用moz前缀的监听函数。这样可以保证组件对不同浏览器的兼容性,提高组件的适用性。
步骤S202,获取用户操作页面时输入的操作指令,并根据操作指令确定所述页面的缩放比例。
具体地,用户输入的操作指令,可以是通过用户直接在输入框输入期望的页面分辨率而生成,也可以是通过用户操作鼠标滚轮或者触屏对页面进行手动的缩放操作而生成。页面的容器组件会根据用户的操作指令获取页面当前的宽度与高度,并计算出页面的缩放比例。
步骤S203,在监听到所述根节点发生变更且停止变更的情况下,根据缩放比例对所述页面进行缩放处理。
本申请在对页面的根节点进行监听时,采用的是异步的监听函数。由于同步的监听函数每个操作指令都会触发一次调用,每次调用都需要从队列中取出对应的监听事件,执行事件,然后将该事件从队列中移除。如果频繁触发监听事件,队列中的元素就会被频繁移动,造成cpu负荷的增加,拖慢浏览器窗口的处理与渲染速度。而本申请采用异步的监听函数,在监听到所述根节点发生变更且停止变更的情况下,才对页面进行缩放处理,减少了处理的工作量,提高了监听的效率。
另外,在页面对操作指令进行响应时,增加了防抖函数,避免用户在缩放时不断地进行缩放计算,造成计算量的增加。在增加防抖函数后,只会在用户停止缩放后进行一次缩放比例的计算,提高了效率。
通过上述步骤S201至S203,通过对页面的容器组件的根节点进行监听,其中,页面包含有多个显示区域,获取用户操作所述页面时输入的操作指令,并根据操作指令确定所述页面的缩放比例,在监听到根节点发生变更且停止变更的情况下,根据缩放比例对所述页面进行缩放处理,解决了相关技术中在缩放页面时,页面自适应缩放时显示异常,以及缩放时页面卡顿的问题,使页面不会频繁触发缩放事件,降低了cpu的负荷,避免对页面进行重复计算和渲染,解决了相关技术中存在页面缩放时显示异常和卡顿的问题,使得页面缩放时能够正常、流畅地显示,并提高了页面开发的效率。
在其中一些实施例中,在对页面的容器组件的根节点进行监听之前还包括:判断容器组件中是否存在根节点;在判断到容器组件中存在根节点的情况下,获取根节点的属性,并对根节点进行定位,其中,根节点的属性包括页面当前的宽度与高度。
具体地,在对页面的容器组件进行初始化时,首先需要判断根节点是否存在,并根据根节点的存在状态做出提示。当根节点存在时,对根节点进行定位,同时通过异步回调函数来调取容器组件根节点当前的属性,包括根节点当前的宽度与高度。特别地,在保证先前执行的判断与属性获取完成后,系统才会执行回调函数,将根节点的存在状态和当前属性传递给组件的其他功能模块,以便进行后续的调用和处理。这样的调用方式可以避免组件后续的执行处理过程中由于执行逻辑和顺序的问题找不到根节点而报错,提高了组件运行的稳定性。
在其中一些实施例中,对页面的容器组件的根节点进行监听还包括:在根节点的属性每一次发生变化的情况下,生成对应的记录信息,其中,根节点的属性包括所述页面当前的宽度与高度;在根节点的属性停止变化的情况下,对多条记录信息进行响应处理,得到页面停止变化后的宽度与高度。
具体地,首先将容器组件的监听对象设置为根节点的属性,由于在本实施例中需要监听的根节点属性只有根节点的宽度和高度,不需要监听根节点所有属性的变化,因此需要设置一个属性名数组,该数组包含的属性名为根节点的宽度与高度,只有在该数组中包含的属性名发生变化时才会被监听到,其他名称的属性发生变化后会被组件忽略。相当于对根节点的宽度与高度进行精准的定向监听,提高了监听效率。
在对页面的容器组件的根节点进行监听时,根节点的属性每发生一次变化,就会生成一条变动记录,变动记录中包含了与变动相关的所有信息。将所有变化记录存储在数组中,当所有操作都结束时,根节点属性停止变化,系统一次性从变化数组中调取所有记录信息进行统一的响应处理,得到最终页面停止变化后的宽度与高度。相比于每次变化都从事件队列中取出变化事件,执行后在从队列中移除事件的同步监听方法,本申请的所有监听操作以及相应的响应处理都是在其他操作执行完成之后异步执行的,这样可以降低系统的处理负担,提高了监听处理的性能和效率。
在其中一些实施例中,获取用户操作页面时输入的操作指令,并根据操作指令确定页面的缩放比例还包括:获取展示窗口的宽度,根据展示窗口的宽度与页面停止变化后的宽度,计算得到展示窗口与页面的宽度比;获取展示窗口的高度,根据展示窗口的高度与页面停止变化后的高度,计算得到展示窗口与页面的高度比;选取展示窗口与页面的宽度比与高度比中最小的数值作为缩放比例。
其中,计算展示窗口与页面的宽度比和高度比的具体方法为:展示窗口与页面的宽度比=展示窗口宽度/页面停止变化后的宽度;展示窗口与页面的高度比=展示窗口宽度/页面停止变化后的高度。
计算出展示窗口与页面的宽度比和高度比后,对宽度比和高度比进行比较,并选择两者之间数值最小的作为缩放比例,这样可以保证缩放后页面仍然可以完整地在展示窗口中显示。其中,页面缩放后的宽度和高度的具体计算方法为:
页面缩放后的宽度=页面原始宽度*缩放比例;页面缩放后的高度=页面原始高度*缩放比例。
在其中一些实施例中,根据缩放比例对页面进行缩放处理还包括:获取页面的显示节点,并获取显示节点的样式信息;根据样式信息计算显示节点的几何信息;根据几何信息得到显示节点的绝对像素,根据绝对像素对页面进行绘制。
在对页面进行缩放处理时,首先要对页面的缩放中心进行设置。具体地,将页面的缩放中心设置在左上角,避免在缩放时造成展示窗口的左侧和顶部出现空白。在缩放中心设置完毕后,页面的缩放处理均以缩放中心为原点进行缩小或放大。
在页面变化完毕后,还需要对页面进行渲染。获取页面的显示节点和这些显示节点的样式信息,在计算样式信息时,先计算所有节点的全局样式信息,再计算每个节点的具体样式信息。根据样式信息确定需要改变的几何属性,并得到节点的几何信息,其中节点的几何信息包括各个节点的位置、尺寸等,根据节点的几何信息进行布局,包括为每个节点分配在展示窗口上出现的确切坐标,将样式信息转换为展示窗口中的相对大小等。将几何信息转换成展示窗口上的像素,即显示节点的绝对像素,根据绝对像素更改页面的外观,并对页面进行绘制,使缩放后的页面在展示窗口中进行显示。
在其中一些实施例中,在根据缩放比例对页面进行缩放处理之后还包括:当用户关闭页面之后,释放页面的内存。
具体地,当用户关闭页面之后,对组件进行收尾处理,包括将监听对象的内存进行释放,避免因为多次打开页面而未释放监听对象而造成的计算机内存泄漏与系统内存资源的浪费,防止出现页面加载或浏览器运行速度减慢甚至系统崩溃的现象。
本实施例还提供了一种容器组件,包括输入组件和动态容器组件,其中,输入组件用于获取页面内容和属性,动态容器组件用于作为全局巩固组件,动态容器组件被引入目标文件进行调用时,执行上述各实施例提供的任一项页面缩放方法。
特别地,本实施例中的容器组件会通过安装程序在外部暴露出来,以供开发者使用。具体地,开发者可以使用安装包管理器来下载和安装本组件,并且可以在自己工程的入口函数中引入并注册本组件。在开发者引入并注册完本组件后,可以将本组件直接作为根节点,在开发者期望开发的目标文件中进行全局的插槽使用。本组件可以对同一个页面的不同模块进行全局缩放,避免出现各个模块因为本身设置的自适应方案的不同,出现不同程度的错乱的问题,且开发者引入组件后,页面可以进行自适应的缩放,无需开发者手动调试,提高页面开发的效率。
在一个具体的实施例中,图3是本申请的动态容器组件的内部实现框架图,如图3所示,该组件代码的内部实现过程包括如下步骤:
步骤S301,获取监听的根节点,根据是否存在做出提示;
步骤S302,声明根节点变更之后的回调函数,并且对该函数进行防抖处理;
步骤S303,根节点使用异步函数mutation observer监听,并传入回调函数;
步骤S304,获取屏幕分辨率用于缩放比例的计算;
步骤S305,将组件暴露至外部供开发者使用。
在一个具体的实施例中,图4是容器组件使用的整体框图,如图4所示,该组件使用的整体过程如下步骤:
步骤S401,用户缩放页面时,触发组件监听事件;
步骤S402,组件代码内部实现,具体实现过程的步骤如图3所示;
步骤S403,通过install暴露组件;
步骤S404,开发者程序入口引入组件;
步骤S405,作为根节点插槽使用组件。
本实施例还提供了一种页面缩放装置,该装置用于实现上述实施例及优选实施方式,已经进行过说明的不再赘述。如以下所使用的,术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现,但是硬件,或者软件和硬件的组合的实现也是可能并被构想的。
在一些实施例中,图5是根据本申请实施例的页面缩放装置的结构框图,如图5所示,页面缩放装置包括:监听模块51、获取模块52和处理模块53;
监听模块,用于对页面的容器组件的根节点进行监听,其中页面包含有多个显示区域;
获取模块,用于获取用户操作页面时输入的操作指令,并根据操作指令确定页面的缩放比例;
处理模块,用于在监听到根节点发生变更且停止变更的情况下,根据缩放比例对页面进行缩放处理。
在其中一些实施例中,监听模块51、获取模块52和处理模块53还用于实现上述各实施例提供的页面缩放方法中的步骤,在这里不再赘述。
需要说明的是,上述各个模块可以是功能模块也可以是程序模块,既可以通过软件来实现,也可以通过硬件来实现。对于通过硬件来实现的模块而言,上述各个模块可以位于同一处理器中;或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。
在一个实施例中,提供了一种计算机设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,处理器执行计算机程序时实现上述各实施例提供的页面缩放方法中的步骤。
在一个实施例中,提供了一种计算机可读存储介质,其上存储有计算机程序,计算机程序被处理器执行时实现上述各个实施例提供的页面缩放方法中的步骤。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,该计算机程序可存储于一非易失性计算机可读取存储介质中,该计算机程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对发明专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。
Claims (10)
1.一种页面缩放方法,其特征在于,包括:
对页面的容器组件的根节点进行监听,其中,所述页面包含有多个显示区域;
获取用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例;
在监听到所述根节点发生变更且停止变更的情况下,根据所述缩放比例对所述页面进行缩放处理。
2.根据权利要求1所述的页面缩放方法,其特征在于,在对所述页面的容器组件的根节点进行监听之前,所述方法还包括:
判断所述容器组件中是否存在所述根节点;
在判断到所述容器组件中存在所述根节点的情况下,获取所述根节点的属性,并对所述根节点进行定位,其中,所述根节点的属性包括所述页面当前的宽度与高度。
3.根据权利要求1所述的页面缩放方法,其特征在于,对所述页面的容器组件的根节点进行监听包括:
在所述根节点的属性每一次发生变化的情况下,生成对应的记录信息,其中,所述根节点的属性包括所述页面当前的宽度与高度;
在所述根节点的属性停止变化的情况下,对多条所述记录信息进行响应处理,得到所述页面停止变化后的宽度与高度。
4.根据权利要求1所述的页面缩放方法,其特征在于,获取所述用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例包括:
获取展示窗口的宽度,根据所述展示窗口的宽度与所述页面停止变化后的宽度,计算得到所述展示窗口与所述页面的宽度比;
获取所述展示窗口的高度,根据所述展示窗口的高度与所述页面停止变化后的高度,计算得到所述展示窗口与所述页面的高度比;
选取所述展示窗口与所述页面的宽度比与高度比中最小的数值作为所述缩放比例。
5.根据权利要求1所述的页面缩放方法,其特征在于,根据所述缩放比例对所述页面进行缩放处理包括:
获取所述页面的显示节点,并获取所述显示节点的样式信息;
根据所述样式信息计算所述显示节点的几何信息;
根据所述几何信息得到所述显示节点的绝对像素,根据所述绝对像素对所述页面进行绘制。
6.根据权利要求1所述的页面缩放方法,其特征在于,在根据所述缩放比例对所述页面进行缩放处理之后,所述方法还包括:
当用户关闭所述页面之后,释放所述页面的内存。
7.一种容器组件,其特征在于,包括:输入组件和动态容器组件;其中,所述输入组件用于获取页面内容和属性;所述动态容器组件用于作为全局巩固组件,所述动态容器组件被引入目标文件进行调用时,执行权利要求1至6中任一项所述的页面缩放方法。
8.一种页面缩放装置,其特征在于,包括:
监听模块,用于对页面的容器组件的根节点进行监听,其中所述页面包含有多个显示区域;
获取模块,用于获取用户操作所述页面时输入的操作指令,并根据所述操作指令确定所述页面的缩放比例;
处理模块,用于在监听到所述根节点发生变更且停止变更的情况下,根据所述缩放比例对所述页面进行缩放处理。
9.一种计算机设备,包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至6中任一项所述页面缩放方法的步骤。
10.一种计算机可读存储介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1至6中任一项所述页面缩放方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211129150.3A CN115437625A (zh) | 2022-09-16 | 2022-09-16 | 页面缩放方法、容器组件、装置、设备和存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202211129150.3A CN115437625A (zh) | 2022-09-16 | 2022-09-16 | 页面缩放方法、容器组件、装置、设备和存储介质 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN115437625A true CN115437625A (zh) | 2022-12-06 |
Family
ID=84248194
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202211129150.3A Pending CN115437625A (zh) | 2022-09-16 | 2022-09-16 | 页面缩放方法、容器组件、装置、设备和存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115437625A (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117270855A (zh) * | 2023-11-22 | 2023-12-22 | 杭州比智科技有限公司 | 一种基于vue实现表格高度自适应的方法 |
-
2022
- 2022-09-16 CN CN202211129150.3A patent/CN115437625A/zh active Pending
Cited By (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN117270855A (zh) * | 2023-11-22 | 2023-12-22 | 杭州比智科技有限公司 | 一种基于vue实现表格高度自适应的方法 |
CN117270855B (zh) * | 2023-11-22 | 2024-01-30 | 杭州比智科技有限公司 | 一种基于vue实现表格高度自适应的方法 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN108388515B (zh) | 测试数据生成方法、装置、设备以及计算机可读存储介质 | |
CN110647320A (zh) | 项目框架的构建方法、装置、计算机设备和存储介质 | |
CN110659092A (zh) | 网页截图方法、装置、计算机设备和存储介质 | |
CN115437625A (zh) | 页面缩放方法、容器组件、装置、设备和存储介质 | |
CN110851987B (zh) | 基于加速比预测计算时长的方法、装置和存储介质 | |
CN103544271B (zh) | 一种浏览器中加载图片处理窗口的方法和装置 | |
CN114186077A (zh) | 一种知识图谱展示方法以及系统 | |
CN112613275A (zh) | 单据生成方法、装置、计算机设备和存储介质 | |
CN112732513B (zh) | 内存监控方法、装置、计算机可读存储介质和计算机设备 | |
CN115292201B (zh) | 函数调用栈解析和回溯方法与装置 | |
CN115543324B (zh) | 交互界面的生成方法、装置、设备及介质 | |
CN109408265B (zh) | 一种ios运行异常的保护方法、装置、终端设备及存储介质 | |
CN111459481A (zh) | 页面侧滑方法、装置、电子设备和存储介质 | |
CN113064801B (zh) | 数据埋点的方法、装置、可读存储介质及计算机设备 | |
CN111159796B (zh) | 建筑的梁的生成方法、装置、计算机设备和存储介质 | |
CN113885863A (zh) | 实现soa服务的方法、装置、电子设备和存储介质 | |
CN114117274A (zh) | 一种数据渲染的方法、装置、计算机设备以及存储介质 | |
CN116048600A (zh) | 小程序功能开发方法、装置、计算机设备和存储介质 | |
CN113778511A (zh) | 资源配置方法、装置、设备及存储介质 | |
CN113656009A (zh) | 一种宏处理方法、装置、电子设备及存储介质 | |
CN110046051B (zh) | 控制方法、装置、客户端及电子设备 | |
CN112163178A (zh) | 页面数据的显示方法和装置、存储介质、电子装置 | |
CN112000259A (zh) | 一种基于移动终端触摸事件控制摄像头的方法及装置 | |
CN111008012A (zh) | 一种原型设计方法、装置、电子产品及存储介质 | |
CN110990078B (zh) | 应用的初始化方法、装置、存储介质及移动终端 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination |