实现固定背景下文案定位与大小适配各种窗口大小的方法技术

本发明专利技术提供了一种实现固定背景下文案定位与大小适配各种窗口大小的方法，包括以下步骤：设置初始固定窗口下文案定位位置及字体大小；监听窗口

【技术实现步骤摘要】
实现固定背景下文案定位与大小适配各种窗口大小的方法


[0001]本专利技术属于应用能力
‑
智慧城市领域，尤其是涉及一种实现固定背景下文案定位与大小适配各种窗口大小的方法
。

技术介绍

[0002]在日常开发中，会遇到这样一种需求，固定背景图，背景图上方某处是项目名称，由于考虑到产品化以及配置话，这个项目名称为可配置，但是项目长度不定，所以不能让设计同事直接出带项目名称的图，这就要求前端根据固定窗口下的文案大小与位置来根据窗口变动，动态计算文案字体大小与定位位置，以保证文案永远在背景图指定位置
。

技术实现思路

[0003]有鉴于此，本专利技术旨在提出一种实现固定背景下文案定位与大小适配各种窗口大小的方法，以解决上述现有技术的不足
。
[0004]为达到上述目的，本专利技术的技术方案是这样实现的：
[0005]一种实现固定背景下文案定位与大小适配各种窗口大小的方法，包括业务系统，基于业务系统的文案定位与大小适配各种窗口大小的方法包括以下步骤：
[0006]S1、
设置初始固定窗口下文案定位位置及字体大小；
[0007]S2、
监听窗口
resize
事件；
[0008]S3、
当
resize
事件触发后，动态改变字体大小及定位位置；
[0009]S4、
实现最新的文案
。
[0010]进一步的，在步骤
S2
中，使用监听逻辑对窗口
resize
事件进行监听
。
[0011]进一步的，在步骤
S3
中，
resize
事件触发后，动态改变字体大小及定位位置，包括以下步骤：
[0012]S31、
按照变化后的尺寸与初始尺寸做比较，得出变化比例；
[0013]S32、
根据变化比例设置项目名称文案的字体大小及定位偏移位置
。
[0014]进一步的，所述
resize
事件是在浏览器窗口大小发生变化时触发
。
[0015]进一步的，所述业务系统包括初始设置模块
、
监听模块和配置模块，所述初始设置模块用于设置初始固定窗口下文案定位位置及字体大小；所述监听模块用于监听窗口
resize
事件；所述配置模块用于当
resize
事件触发后，动态改变字体大小及定位位置
。
[0016]相对于现有技术，本专利技术所述的实现固定背景下文案定位与大小适配各种窗口大小的方法具有以下优势：
[0017]本专利技术所述的实现固定背景下文案定位与大小适配各种窗口大小的方法，使用本方法后，可以在任意大小窗口中，可以任意配置项目名称，并且可以使得项目名称在初始设置的指定位置，本方法主要使用监听逻辑对窗口
resize
事件进行监听，监听窗口改变后，按照变化后的尺寸与初始尺寸做比较，得出变化比例，根据变化比例设置项目名称文案的字体大小及定位偏移位置，最终使得文案在任意窗口下都在指定位置
。
附图说明
[0018]构成本专利技术的一部分的附图用来提供对本专利技术的进一步理解，本专利技术的示意性实施例及其说明用于解释本专利技术，并不构成对本专利技术的不当限定
。
在附图中：
[0019]图1为本专利技术实施例所述的方法流程示意图
。
具体实施方式
[0020]需要说明的是，在不冲突的情况下，本专利技术中的实施例及实施例中的特征可以相互组合
。
[0021]在本专利技术的描述中，需要理解的是，术语“中心”、“纵向”、“横向”、“上”、“下”、“前”、“后”、“左”、“右”、“竖直”、“水平”、“顶”、“底”、“内”、“外”等指示的方位或位置关系为基于附图所示的方位或位置关系，仅是为了便于描述本专利技术和简化描述，而不是指示或暗示所指的装置或元件必须具有特定的方位
、
以特定的方位构造和操作，因此不能理解为对本专利技术的限制
。
此外，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量
。
由此，限定有“第一”、“第二”等的特征可以明示或者隐含地包括一个或者更多个该特征
。
在本专利技术的描述中，除非另有说明，“多个”的含义是两个或两个以上
。
[0022]在本专利技术的描述中，需要说明的是，除非另有明确的规定和限定，术语“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通
。
对于本领域的普通技术人员而言，可以通过具体情况理解上述术语在本专利技术中的具体含义
。
[0023]下面将参考附图并结合实施例来详细说明本专利技术
。
[0024]如图1所示，实现固定背景下文案定位与大小适配各种窗口大小的方法，包括业务系统，基于业务系统的文案定位与大小适配各种窗口大小的方法包括以下步骤：
[0025]S1、
设置初始固定窗口下文案定位位置及字体大小；
[0026]S2、
监听窗口
resize
事件；
[0027]S3、
当
resize
事件触发后，动态改变字体大小及定位位置；
[0028]S4、
实现最新的文案
。
[0029]本专利技术的优势：实现了文案与背景图分离场景下，文案在任意窗口下都在指定位置
。
[0030]在本专利技术一种优选的实施方式中，在步骤
S2
中，使用监听逻辑对窗口
resize
事件进行监听
。
[0031]在本专利技术一种优选的实施方式中，在步骤
S3
中，
resize
事件触发后，动态改变字体大小及定位位置，包括以下步骤：
[0032]S31、
按照变化后的尺寸与初始尺寸做比较，得出变化比例；
[0033]S32、
根据变化比例设置项目名称文案的字体大小及定位偏移位置
。
[0034]在本专利技术一种优选的实施方式中，所述
resize
事件是在浏览器窗口大小发生变化时触发
。
[0035]在本专利技术一种优选的实施方式中，所述业务系统包括初始设置模块
、
监听模块和
配置模块，所述初始设置模块用于设置初始固定窗口下文案定位位置及字体大小；所述监听模块用于监听窗口
resize
事件；所述配置模块用于当
resize
事件触发后，动态改变字体大小及定位位置
。
[0本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
实现固定背景下文案定位与大小适配各种窗口大小的方法，其特征在于：包括业务系统，基于业务系统的文案定位与大小适配各种窗口大小的方法包括以下步骤：
S1、
设置初始固定窗口下文案定位位置及字体大小；
S2、
监听窗口
resize
事件；
S3、
当
resize
事件触发后，动态改变字体大小及定位位置；
S4、
实现最新的文案
。2.
根据权利要求1所述的实现固定背景下文案定位与大小适配各种窗口大小的方法，其特征在于：在步骤
S2
中，使用监听逻辑对窗口
resize
事件进行监听
。3.
根据权利要求1所述的实现固定背景下文案定位与大小适配各种窗口大小的方法，其特征在于：在步骤
S3
中，
resize
事件触发后，动态改变字体大小及定位位置，包括以下步骤：
S31、
按照变化后的尺寸与初始尺寸做比较，得出变化比例；
S32、
根据变化比例设置项目名称文案的字体大小及定位偏移位置
。4.
根据权利要求1所述的实现固定背景下文案定位与大小适配各种窗口大小的方法，其特...

【专利技术属性】
技术研发人员：陈标，
申请(专利权)人：紫光云技术有限公司，
类型：发明
国别省市：