基于格栅布局的自适应视图渲染方法及创建方法与流程

1.本发明涉及自适应视图渲染技术领域。


背景技术：

2.随着移动终端的普及，为了在不同设备上进行显示，通常使用自适应布局解决不同设备上的兼容问题，但是要针对不同设备维护多个版本，从而增加架构设计的复杂度。另外，在自适应显示中还容易出现屏幕过小时内容过于拥挤、显示比例失真等问题，非常影响页面的显示体验和页面的可阅读性。
3.公开号为cn102223502a的中国发明公布文件中，公开了一种自适应页面生成装置，包括：页面解析处理模块、终端信息模块、文件选取模块以及业务输出模块；所述页面解析模块设置为解析电视机所请求的业务页面的组成元素，并调用所述文件选取模块生成待输出的页面框架；所述终端信息模块设置为保存、查询终端硬件信息和数字指纹信息；所述文件选取模块设置为依据所述电视机的硬件信息选取构建所述电视机请求的业务页面的文件；所述业务输出模块设置为生成所述业务页面，并输出给所述电视机。在上述相关技术中也存在一个版本只能对应一种类型、屏幕大小与设计相比屏幕过小时会显示内容拥挤、显示比例失真等问题。


技术实现要素：

4.本发明要解决上述相关技术中的问题。
5.针对上述存在的局限性，本发明提出了一种基于格栅布局的自适应视图渲染方法和创建方法。
6.一种基于格栅布局的自适应视图渲染方法，包括以下步骤：s101：获取浏览器窗口参数，所述浏览器窗口参数为：浏览器高度方向分辨率、浏览器宽度方向分辨率；s102：计算浏览器宽度方向分辨率相对于浏览器高度方向分辨率的比值；s103：当所述比值落入预设阈值的数值范围时，判断屏幕类型为第一类型，使用第一类型渲染方式；所述第一类型渲染方式基于调整格栅的尺寸实现组件容器的自适应排布；或，当所述比值不落入预设阈值的数值范围时，判断屏幕类型为第二类型，使用第二类型渲染方式；所述第二类型渲染方式基于调整组件容器所占的格栅数量实现组件容器的自适应排布。
7.进一步地：所述第一类型渲染方式为：s201：根据格栅参数计算格栅适应比例；s202：根据所述格栅适应比例调整格栅尺寸；s203：根据调整后的所述格栅尺寸调整组件容器尺寸；s204：根据调整后组件容器尺寸相对于调整前组件容器尺寸的比例，对组件元素
进行渲染；所述组件容器尺寸以格栅个数为单位。
8.进一步地：所述格栅为正方形，所述格栅参数包括：格栅像素数、横向格栅数量、纵向格栅数量；所述格栅像素数为格栅边长对应的像素数；所述横向格栅数量为沿视图横向的格栅列数；所述纵向格栅数量为沿视图纵向的格栅行数；计算所述格栅适应比例的方式为：横向格栅适应比例=浏览器宽度方向分辨率/（格栅像素数*横向格栅数量）；纵向格栅适应比例=浏览器高度方向分辨率/（格栅像素数*纵向格栅数量）；所述视图横向为浏览器宽度方向；所述视图纵向为浏览器高度方向。
9.进一步地：根据所述格栅适应比例调整格栅尺寸的方式为：首先比较横向格栅适应比例和纵向格栅适应比例，以变化量较小的值作为调整比例调整格栅尺寸；根据调整后的格栅尺寸调整组件容器尺寸的方式为：组件容器尺寸随着组件容器所占格栅尺寸的调整而调整，调整后如果视图中还有剩余空间，由组件容器按照预设的顺序进行瓜分。
10.进一步地：所述第二类型渲染方式为：包括步骤s301-s305，所述步骤s301-s305为：s301：计算浏览器容纳的总格栅数；s302：计算组件总预估面积，所述组件总预估面积为所有组件容器所占的格栅数之和；s303：比较所述浏览器容纳的总格栅数和所述组件总预估面积；当所述浏览器容纳的总格栅数大于等于述组件总预估面积时，进入步骤s304；当所述浏览器容纳的总格栅数小于所述组件总预估面积时，进入步骤s305；s304：使用空间排布方法对组件容器进行排列，获得至少一种行组合方式，计算每种行组合方式的空间利用率，根据空间利用率最高的行组合方式，完成视图中组件容器的所有行排列；在步骤s304的排列中，使用空间利用率最高的行组合方式，完成视图中组件容器的所有行排列时，如果存在超出视图排列的组件容器，则进入步骤s305；s305：按照调整步长，按照调整权重由高至低顺序依次调整组件容器尺寸；每调整一个调整权重的权重值对应组件的组件容器尺寸后，计算组件总预估面积，直至浏览器容纳的总格栅数大于等于所述组件总预估面积，进入步骤s304。
11.进一步地：使用空间排布方法对组件容器进行排列的方式为：按照预设的组件容器排列顺序从左至右从上至下将组件容器整理成一列，在一列中优先合并高度相同的组件容器组成行，获得至少一种行组合方式；所述调整步长为1~4个格栅；所述调整权重为：相对比例、无限制；所述相对比例取值范围为0%~∞。
12.进一步地：计算组件总预估面积公式为：
；式中，i为组件序号，i为非负整数；所述组件纵格栅数为所述组件容器纵向所占的格栅数量；所述组件横格栅数为所述组件容器横向所占的格栅数量；所述横向为浏览器宽度方向；所述纵向为浏览器高度方向。
13.进一步地：所述获取浏览器窗口参数的方式为：监听浏览器窗口的resize事件和load事件；在监听到上述事件时获取以下变量：窗口内部宽度、窗口内部高度；根据窗口内部宽度获取所述浏览器宽度方向分辨率，根据窗口内部高度获取所述浏览器高度方向分辨率。
14.一种基于格栅布局的自适应视图的创建方法，用于创建如上述的方法所渲染的视图；包括以下步骤：s401：建立视图，为视图配置视图属性；所述视图的尺寸以格栅为单位；s402：在视图中添加组件，使组件与视图形成映射关系，为组件配置组件属性；s403：设置组件容器位置和组件容器尺寸；所述组件容器尺寸以格栅为单位。
15.进一步地：设置组件容器位置和组件容器尺寸的方式为：在前端页面显示视图和组件容器，接收用户对组件容器位置的拖拽和对组件容器尺寸的缩放，显示预判的组件容器落点位置和组件容器尺寸的模拟，接收用户的确认，组件容器吸附在预判的组件容器落点位置和与组件容器尺寸匹配的至少一个格栅上，并实现自动对齐；所述组件容器尺寸包括：组件容器的横向尺寸、组件容器的纵向尺寸；所述组件容器的横向尺寸对应于其所占的格栅在浏览器宽度方向的列数，所述组件容器的纵向尺寸对应于其所占的格栅在浏览器高度方向的行数。
16.与相关技术相对比，本发明具有以下优点：本发明一个发明点的基于格栅布局的自适应视图渲染方法，通过比较浏览器宽度与高度的比例，将屏幕类型分为第一类型或第二类型，使用不同策略进行处理，从而实现组件容器的自适应排布，避免了因为屏幕类型不同，需要维护不同自适应页面版本的问题，同时也避免了为了适应屏幕尺寸改变视图显示大小从而造成视图中组件显示比例失调、组件内元素显示失真、内容显示过于拥挤影响可读性的问题。
17.本发明另一个发明点的基于格栅布局的自适应视图的创建方法，通过建立视图为视图配置属性，在视图中引入组件，使组件与视图形成映射关系，为组件配置属性，从而实现了以抽象化组件管理、组件灵活配置的方法创建视图，视图建模后可以灵活配置和修改，从而节省了视图开发的工作量，提高了视图对于不同应用场景的可扩展性。同时上述方式创建的视图用于基于格栅布局的自适应视图渲染方法，可以进一步提高自适应渲染的效果，进一步避免因屏幕尺寸变化过大造成的显示拥挤、比例失真等问题。
附图说明
18.图1为本发明一个实施例的基于格栅布局的自适应视图渲染方法的流程图；图2为本发明一个实施例的基于格栅布局的自适应视图渲染方法中第一类型渲染
方式的流程图；图3为本发明一个实施例的基于格栅布局的自适应视图渲染方法中第二类型渲染方式的流程图；图4为本发明一个实施例的基于格栅布局的自适应视图的创建方法的流程图；图5为本发明一个实施例的基于格栅布局的自适应视图渲染方法中组件瓜分剩余空间的示意图。
具体实施方式
19.为使本发明的目的、技术方案和优点更加清楚明了，下面对本发明进行进一步详细说明。但是应该理解，此处所描述仅仅用以解释本发明，并不用于限制本发明的范围。
20.除非另有定义，本文所使用的所有的技术术语和科学术语与属于本发明的技术领域的技术人员通常理解的含义相同，本文中在本发明的说明书中所使用的术语只是为了描述具体的实施例的目的，不是旨在限制本发明。本文中所涉及的表征手段均可参阅现有技术中的相关描述，本文中不再赘述。
21.为了进一步了解本发明，下面结合最佳实施例对本发明作进一步的详细说明。
22.实施例1如图1-3所示，一种基于格栅布局的自适应视图渲染方法，包括以下步骤：s101：获取浏览器窗口参数，所述浏览器窗口参数为：浏览器高度方向分辨率、浏览器宽度方向分辨率；s102：计算浏览器宽度方向分辨率相对于浏览器高度方向分辨率的比值；s103：当所述比值落入预设阈值的数值范围时，判断屏幕类型为第一类型，使用第一类型渲染方式；所述第一类型渲染方式基于调整格栅的尺寸实现组件容器的自适应排布；或，当所述比值不落入预设阈值的数值范围时，判断屏幕类型为第二类型，使用第二类型渲染方式；所述第二类型渲染方式基于调整组件容器的所占的格栅实现组件容器的自适应排布。
23.所述落入包含数值范围端点，所述不落入指处在数值范围及端点之外。例如数值范围（2，3），则2≤x≤3，落入数值范围，x＞3和x＜2，不落入数值范围。
24.在步骤s103中，预设阈值的数值范围=设计比例（用户设计视图时使用的比例）
±
容错比例，所述设计比例和容错比例可以进行输入设置。例如，用户在画布上设计了一个1:1的视图，容错比例设定为10%，那么预设阈值的数值范围就是1：1加减10%，即，（0.9~1.1）：（0.9~1.1），超出上述范围区间即为超出预设阈值的数值范围，即不落入上述数值范围。上述数值仅为示例，本发明不限于上述设定的数值，可以根据用户需要进行设定。
25.所述浏览器窗口包括但不限于桌面电脑、笔记本电脑、平板电脑、移动设备、大型显示屏、车载电脑、医用设备、设备仪器、投影仪等的显示窗口。
26.css 栅格布局（grid）是一种全新的在 web 上创建二维布局的方法。本发明的视图基于格栅布局，视图的大小基于格栅的数量，例如24*16个格栅，组件容器大小采用格栅的聚集来赋值（即组件容器大小使用格栅数量表示），格栅在系统中作为一个可配置项-单位格（用户可配置单位格的像素），以1:1的标准正方形格栅作为最小面积单位，替代了像素
点的概念，实现长宽比例的定义，且由于计算方式是聚集，所以长宽均为整数，这将非常有利于用户分配视图空间；对于格栅，该发明将其定义为抽象的面积单位，所以格栅的大小、格栅间的间距均可以进行参数化配置，大屏幕可以调大格栅、小屏幕可以调小格栅，从而可以以简单方便的方式适配不同大小的屏幕。
27.在本发明中，组件是一个抽象概念，它是视觉元素和前端控件的集合（例如，文本组件有以下组成部分：标题、文本框），组件在程序中可以由不同的方案来实现，例如，在web中使用css、或者移动端系统可以使用swift等方式。组件容器（.container）可以用于承载组件，用于组件在视图中的布局和显示，组件容器在视图中具有具体的位置和尺寸大小。
28.本发明的视图设计中，视图大小以格栅为单位，组件容器大小也以格栅为单位，便于用户进行设计。
29.判断屏幕类型时，使用了css媒体查询（mediaqueries）功能，基于css媒体查询功能，可以为不同设备屏幕尺寸和特性提供不同布局和样式，css媒体查询模块允许添加媒体查询表达式用于指定媒体类型，根据不同的媒体类型选择相应的表达式。可以使用媒体查询功能查询宽度（width）、高度（height）等参数。通过css媒体查询功能按预先设定的两种屏幕类型进行识别和判断，从而选择第一类型或第二类型的渲染处理方式。
30.浏览器窗口变化触发时，可以通过获取window.innerwidth、window.innerheight、windowwidth、windowheight四个变量，window.innerwidth表示表示浏览器窗口的内部宽度，即可视区域的宽度；window.innerheight表示表示浏览器窗口的内部高度，即可视区域的高度；浏览器窗口的内部宽度、内部高度即为视图实际显示的区域。因此本发明的方法中，浏览器宽度方向分辨率、浏览器高度方向分辨率优选使用window.innerwidth、window.innerheight来获得，但可以理解windowwidth、windowheight也可以用于获取所述浏览器高度方向分辨率、浏览器宽度方向分辨率，只是用于处理视图时，使用前者更加精确。具体地，通过基于javascript(js)开发的监听程序监听浏览器窗口的大小变化和缩放比例，该程序使用window.addeventlistener方法来监听浏览器窗口的resize和load事件，并在浏览器窗口变化触发时获取window.innerwidth、window.innerheight、windowwidth、windowheight四个变量。
31.本发明中基于css框架的栅格系统（grid system）实现栅格的配置；基于css3的flexbox布局，来灵活的对齐和组织网页中的元素。
32.在实际使用不同屏幕来显示画面时会遇到超出常规比例的屏幕（比如超宽的中心大屏幕、或者是旧式电脑的方形屏幕），会出现画面非常窄/宽或非常高/矮的情况，如果仍按照原先的设计去渲染，必然会造成图形的挤压、比例失调、显示溢出等问题。通过比较浏览器宽度与高度的比例，将屏幕类型分为第一类型或第二类型，使用不同策略进行处理，从而实现组件容器的自适应排布，避免了因为屏幕类型不同，需要维护不同自适应页面版本的问题，同时也避免了因为屏幕尺寸改变造成组件比例失调、组件内元素显示失真、过于拥挤的问题。
33.通过使用本发明的方法，可以使用一套前端程序应对屏幕分辨率和长宽比例差异较大的不同展示环境，且可以实现较低操作成本的视图设计，也可降低对视图设计人员的专业化编程要求。通过引入和映射“视图”、“组件”、“数据来源”等关键对象，将设计对象定义为“视图”，视图作为抽象的数据对象，可以承载任意展示需求，并将抽象元数据形成可拓
展维护的属性库存入关系型数据库，为视图可配置“主题、分辨率、边距”等属性，在视图建模后形成可不断修改的视图模版，可改造为适应任意场合的可视化展示窗体，包括但不限于车间作业看板、管理驾驶舱大屏幕、桌面端数据分析视图，从而提高了视图在不同应用场景下的可扩展性。
34.与相关技术相比，本发明具有以下优点：高可定制视图：通过抽象的视图对象和元数据管理，可以帮助设计者用无代码的方式通过一些关键参数完成不同场景下视图的设计，降低了视图开发门槛和开发成本，高效地为各种客户提供快速的数据可视化大屏或看板的短周期开发和交付能力，以便能更快更灵活的在业务活动中应用。
35.抽象化组件：通过抽象化组件库和参数配置，可帮助设计者完成各种风格、主题、内容的可视化设计，以更有效的应对快速变化的市场需求和技术革新，提供长期稳定有效的技术工具。
36.自动吸附、格栅聚集、自适应算法：帮助用户以更好的体验和更短的时间完成视图设计，并在前端以更好的效果适配各种尺寸大小的屏幕，这将解决现在许多非常规尺寸比例屏幕的显示效果的问题，打通这部分用户使用可视化数据来工作或开展业务的阻碍。
37.实施例2如图1-3所示，在实施例1的基础上，进一步地：所述第一类型渲染方式为：s201：根据格栅参数计算格栅适应比例；s202：根据所述格栅适应比例调整格栅尺寸；s203：根据调整后的所述格栅尺寸调整组件容器尺寸；s204：根据调整后组件容器尺寸相对于调整前组件容器尺寸的比例，对组件元素进行渲染；所述组件容器尺寸以格栅为单位。
38.进一步地：所述格栅为正方形，所述格栅参数包括：格栅像素数、横向格栅数量、纵向格栅数量；所述格栅像素数为格栅边长对应的像素数；所述横向格栅数量为沿视图横向的格栅列数；所述纵向格栅数量为沿视图纵向的格栅行数；计算所述格栅适应比例的方式为：横向格栅适应比例=浏览器宽度方向分辨率/（格栅像素数*横向格栅数量）；纵向格栅适应比例=浏览器高度方向分辨率/（格栅像素数*纵向格栅数量）；所述视图横向为浏览器宽度方向；所述视图纵向为浏览器高度方向。
39.进一步地：根据所述格栅适应比例调整格栅尺寸的方式为：首先比较横向格栅适应比例和纵向格栅适应比例，以变化量较小的值作为调整比例调整格栅尺寸；根据调整后的格栅尺寸调整组件容器尺寸的方式为：组件容器尺寸随着组件容器所占格栅尺寸的调整而调整，调整后如果视图中还有剩余空间，由组件容器按照预设的顺序进行瓜分。
40.当浏览器窗口尺寸较小，按照原有格栅尺寸设计的视图大小在浏览器中显示显得
过大的情况下，例如，横向格栅适应比例=1/2；纵向格栅适应比例=1/3，则依据横向格栅适应比例进行格栅尺寸调整的变化量较小，以横向格栅适应比例进行调整，此时，在横向方向上，经过格栅尺寸调整，组件容器尺寸随着所占格栅尺寸减小而减小，从而可以被容纳，但在纵向方向上，由于调整的比例没有达到纵向尺寸应当调整的比例，会产生组件容器超出父容器（此处为视图）范围，此时压缩采用基于为组件配置flex-shrink及分配压缩的格栅数来实现，例如压缩的格栅数按照从下到上从右到左的顺序进行分配。可以理解，本发明不限于上述示例，只要能实现合理分配压缩量，使组件容器完全在视图中得到容纳即可另一种方式是采用变化量较大的纵向格栅适应比例进行调整，此时，在纵向方向上，经过格栅尺寸调整，组件容器尺寸随着所占格栅尺寸减小而减小，从而所有组件可以被容纳，由于横向的调整比例大于横向应当调整的比例，因此横向上会产生剩余的空间，此时组件容器会瓜分这部分控件中多出的空间，瓜分按照预设的顺序（例如：从下至上、从右至左等）。瓜分可以基于为组件配置flex-grow及瓜分的份数来实现。flex-grow可以使组件按照预设份数瓜分父容器（此处为视图）的剩余空间。瓜分按照预设的如从下至上、从右至左等顺序进行瓜分。
41.当浏览器窗口尺寸较大，按照原有格栅尺寸设计的视图大小在浏览器中显示显得过小的情况下，例如，横向格栅适应比例=2；纵向格栅适应比例=3，则依据横向格栅适应比例进行格栅尺寸调整的变化量较小，采用横向格栅适应比例对格栅的大小进行调整，同时组件的大小随着所占格栅大小的增大而随之增大，调整完成后，纵向方向上会产生剩余的空间，此时组件容器会瓜分这部分多出的空间，瓜分按照预设的顺序（例如：从下至上、从右至左等）。瓜分可以基于为组件配置flex-grow及瓜分的份数来实现。flex-grow可以使组件按照预设份数瓜分父容器（此处为视图）的剩余空间。如图5所示，（a）为纵向上产生剩余空间的示意图，（b）为容器将剩余空间瓜分后的示意图。瓜分可以按照预设的顺序，如从下至上、从右至左等顺序进行瓜分。例如，当预设的瓜分方式为从下至上，从右至左的顺序，在瓜分纵向空间时，按照组件行位置由下至上的顺序对空间进行瓜分，由最下方一行先进行瓜分，依次向上方一行顺序进行。同理，当横向方向有剩余空间时，按照组件列位置由右至左的顺序对空间进行瓜分。上述顺序也可以设置为由上至下、由左至右等，本发明不限于上述方式，只要可以合理分配剩余空间的方式即可。
42.可以理解，另一种方式中，可以采用变化量较大的纵向格栅适应比例进行调整，再使用压缩方法压缩组件容器的横向尺寸的方式使所有组件容器被视图所容纳。此处不再赘述。
43.本发明不限于上述方式，只要可以实现调整格栅大小后，对空间剩余或空间不足的问题，再进行容器组件的相应调整的方式即可，例如可以使用auto-fit、auto-fill等方式。
44.可以理解，以上仅为示例，本发明不限于使用flex-grow、flex-shrink、auto-fit、auto-fill等方法，可以根据具体程序来选择使用具体的方法。
45.进一步地：所述第二类型渲染方式为：包括步骤s301-s305，所述步骤s301-s305为：s301：计算浏览器容纳的总格栅数；s302：计算组件总预估面积，所述组件总预估面积为所有组件容器所占的格栅数
之和；s303：比较所述浏览器容纳的总格栅数和所述组件总预估面积；当所述浏览器容纳的总格栅数大于等于述组件总预估面积时，进入步骤s304；当所述浏览器容纳的总格栅数小于所述组件总预估面积时，进入步骤s305；s304：使用空间排布方法对组件容器进行排列，获得至少一种行组合方式，计算每种行组合方式的空间利用率，根据空间利用率最高的行组合方式，完成视图中组件容器的所有行排列；在步骤s304的排列中，使用空间利用率最高的行组合方式，完成视图中组件容器的所有行排列时，如果存在超出视图排列的组件容器，则进入步骤s305；s305：按照调整步长，按照调整权重由高至低顺序依次调整组件容器尺寸；每调整一个调整权重的权重值对应组件的组件容器尺寸后，计算组件总预估面积，直至浏览器容纳的总格栅数大于等于所述组件总预估面积，进入步骤s304。
46.所述组件容器尺寸包括组件容器的横向尺寸和纵向尺寸。
47.在步骤s305中具体调整的方式为：按照调整权重由高至低顺序和预设步长，依次调整组件容器的尺寸；每调整一个调整权重的权重值对应组件的组件容器尺寸后，计算组件总预估面积，比较所述浏览器容纳的总格栅数和所述组件总预估面积，如果浏览器容纳的总格栅数小于述组件总预估面积，则调整下一个排序的调整权重对应的组件的组件容器尺寸，如果调整完所有调整权重对应的组件的组件容器尺寸，则重新从调整权重最大值开始调整，直至浏览器容纳的总格栅数大于等于述组件总预估面积，进入步骤s304。
48.行利用率=该行组件的宽度总和/当前窗口宽度；例如：窗口宽30，待放置在该行的有3个高度相同的组件宽度分别为10、10、15，当前窗口显然无法同时容纳3个组件，通过计算行利用率，决定是10+10的组合还是10+15的组合，显然，10+15组合利用率高，因此选择10+15的组件组合放置在该行。
49.由于窗口具有一定宽度，在组合高度相同的组件容器时，存在不能将所有容器组件放在一行，可以有多种组合的情形。所有行的所有组合形成的排列组合，为至少一种行组合方式。通过计算行利用率，在上述至少一种行组合方式中选取行利用率最高的行组合方式，进行组件容器的排布，从而可以优化空间利用率。
50.在步骤s304的排列中，使用空间利用率最高的行组合方式，完成视图中组件容器的所有行排列时，超出视图排列的组件容器的情况主要是由于行利用率无法达到100%，因而出现部分组件容器超出视图的情况。因此在这种情况下进入s305进行调整后，能够在比较少的调整次数后快速的实现视图对所有组件容器的容纳，结束调整。
51.进一步地：使用空间排布方法对组件容器进行排列的方式为：按照预设的组件容器排列顺序从左至右从上至下将组件容器整理成一列，在一列中优先合并高度相同的组件容器组成行，获得至少一种行组合方式；所述调整步长为1~4个格栅；调整步长的含义为从组件序号i=1开始，每次调整组件容器的长、宽的格栅数。当步长为1时，效果较好。所述调整步长也可以接收输入进行设置，不限于上述数值。
52.所述调整权重为：相对比例、无限制；所述相对比例取值范围为0%~∞。
53.使用空间排布方法对组件进行排列的方式中，按照预设的组件容器排列顺序从左至右从上至下整理成一列，在一列中，优先合并排列高度相同的组件容器组成行，获得至少一种（一种或多种）行组合方式。即，先按照上述顺序，将所有组件整理为一列，然后将高度相同的组件合并为一组，根据窗口宽度和行利用率，确定行利用率最优的行组合方式。按照所述行组合方式将组件进行组合，显示在一行。组成行后，行之间的排列顺序，可以由该行第一个组件整理成一列时的排列序号大小决定。在排列为一行的组件中，也按照组件整理成一列时的排列序号大小顺序进行排列，从而最大限度保证原设计的排列顺序。根据用户的需要，也可以设置上述排列的顺序，而不考虑原有顺序，从而排列顺序可以不限于上述方法。
54.在第二类渲染方式中，由于处理的是特殊显示比例的情况，按照上述方法处理后，视图中的组件不会完全按照原设计的排布顺序进行展示，而是为了尽量保证视图中的各个组件都能以正常的比例完全的展示内容，所以这里的处理方法会改变部分原有布局，但布局尽量按照用户当时设计的顺序，也就是从左到右从上到下。
55.所述预设顺序可以为从左至右，从上至下，不限于上述顺序，可以进行设定。
56.按照组件内容缩放允许的极限范围大小赋予调整权重，根据调整权重大小对组件容器进行排序：组件内容类型决定了其允许的极限范围大小，调整权重基于用户的选择确定，定义式：xmax/xmin/ymax/ymin=锁定纵横比/相对比例/无限制，由用户选择配置；比如横向文本组件，长度最大（xmax）可以设置为不限制，但高度最小（ymin）可以设置为100%，即ymin只能为当前数值，如果设定ymin=10%，则ymin在10%~100%范围内可调，如果设定ymin=200%，则ymin在100%~200%范围内可调。相对比例用户未设定的值，可以使用默认值。
57.一般而言，限制越小权重越大，故无限制权重＞相对比例权重＞锁定纵横比权重。用户可以对权重进行设置，例如设置，无限制权重=101分、相对比例权重为1~100分，锁定纵横比为0.5分等，用户可以根据需要进行设定，只要使几种类型的分值符合无限制权重＞相对比例权重＞锁定纵横比权重即可。
58.或由系统进行自动映射，将xmax、xmin、ymax、ymin的数值，映射至1~100分，无限制权重=101分、锁定纵横比为0.5分等，只要使几种类型的分值符合无限制权重＞相对比例权重＞锁定纵横比权重即可。
59.映射使用归一化公式，例如，映射到数值范围（a，b）之间的公式为：*（b-a）+a式中，xmin、xmax为允许取值范围的上下限，x’为映射后的分值。
60.使用上述权重对组件容器尺寸进行调整时，以所有组件xmax、ymax为一组、xmin、ymin为一组，在需要放大组件时使用xmax、ymax组计算的权重，在需要缩小组件时使用xmin、ymin组计算的权重，因此此处在步骤s305中，使用xmin、ymin组计算的权重，因此，组件权重值=xmin计算的权重值+ymin计算的权重值；在步骤s305中，进行调整时，先按权重值由大到小将组件进行排序，按照排序为组件（组件组）分配序号i=1~imax，imax为不相同的权重值总个数，i=1对应权重最大组，i=imax对应权重最小组；先调整权重分值最大一组的组件，即，i=1的组件；按照预设的调整步长进行调整，调整后，i=i+1；重新计算组件总预估面积、进行比较，如果当所述浏览器容纳的总格栅数大于等于述组件总预估面积时，进入步骤s304；否则继续调整，继续调整时，调整权重值排名下一位的组件（序号i=2的组件），重复
上述步骤直至进入步骤s304，或遍历完所有组件，则重新从权重值最大一组组件开始新一轮调整（令i=1），重复上述步骤直至进入步骤s304。同一个调整权重，对应的可以是一个或多个组件，遍历调整权重时，调整的是权重值相同的一个组件或一组组件。
61.上述过程，可以简述为对调整权重按由高至低进行遍历，每次调整当前的调整权重对应的一个或一组组件的尺寸，然后计算并进行判断，如果能够容纳则结束，如果不能容纳，遍历至下一个权重的组件进行调整，直至调整后进入步骤s304，如果一轮调整仍然不能容纳，则进入下一轮遍历，直至调整后进入步骤s304。
62.进一步地：调整至某个组件的最大比例时，不再对该组件进行调整。
63.在调整过程中，如果达到组件预设的极限比例，则不再对该组件容器尺寸进行调整。
64.进一步地：计算组件总预估面积公式为：式中，i为组件序号，i为非负整数；所述组件纵格栅数为所述组件容器纵向所占的格栅数量；所述组件横格栅数为所述组件容器横向所占的格栅数量；所述横向为浏览器宽度方向；所述纵向为浏览器高度方向。
65.进一步地：所述获取浏览器窗口参数的方式为：监听浏览器窗口的resize事件和load事件；在监听到上述事件时获取以下变量：窗口内部宽度、窗口内部高度；根据窗口内部宽度获取所述浏览器宽度方向分辨率，根据窗口内部高度获取所述浏览器高度方向分辨率。
66.本发明是一种结合了浏览器端仪表盘界面无代码设计和网页页面动态渲染及自适应渲染的技术，利用仪表盘设计工具完成仪表盘的设计和仪表盘自适应规则的定义，前端根据仪表盘界面的设计约束、规则定义、识别当前界面窗口数据，按算法计算界面渲染参数以达到随窗口而动的动态渲染效果通过使用本发明的方法，可以用一套视图的设计在从移动端到大屏幕等特殊比例的显示设备上实现较为协调的展示效果，相关技术中同样场景下仍会造成界面组件的比例失调的问题，相关技术中大多基于前端代码层面来解决界面自适应的问题，本发明结合了组件元数据、组件配置、前端自适应这三个层面来解决界面的自适应问题，因而能够获得更好的自适应效果。而且相对于基于前端代码的方式，本发明的方法有很强的灵活性，易于用户进行配置和调整，提高了视图的可维护性和可扩展性。
67.实施例3如图4所示，一种基于格栅布局的自适应视图的创建方法，用于创建如上述的方法所渲染的视图；包括以下步骤：s401：建立视图，为视图配置视图属性；所述视图的尺寸以格栅为单位；s402：在视图中添加组件，使组件与视图形成映射关系，为组件配置组件属性；s403：设置组件容器位置和组件容器尺寸；所述组件容器尺寸以格栅为单位。
68.在保存组件数据时，组件的高度和宽度不使用像素作为单位来赋值，而是采用了
格栅的聚集来赋值，组件属性中会记录组件高度和宽度分别对应几个格栅，格栅在系统中作为一个可配置项-单位格（用户可配置单位格的像素），以1:1的标准正方形作为最小面积单位，替代了像素点的概念，实现长宽比例的定义，且由于计算方式是聚集，所以长宽均为整数，这将非常有利于用户分配视图空间；对于格栅，本发明将其定义为抽象的面积单位，所以格栅的大小、格栅间的间距均可以进行参数化配置，大屏幕可以调大格栅、小屏幕可以调小格栅。
69.所述视图属性包括：主题、分辨率、边距等；所述视图属性从预先存入关系数据库的属性库中获取；所述组件属性为可视化图表、文字显示框、图标、报警窗口、消息提示、gis地图、3d效果等；所述组件属性从预先存入关系数据库的属性库中获取。
70.通过视图设计可视化组件与“视图”对象形成实例化映射关系，对视图来说无需与组件的展示内容进行耦合，视图只是容纳一个个大小不一的二维图形的容器，在设计视图时可进行任意引用。
71.组件库维持高可拓展型，可以随着前端技术进步和主流样式和设计规范的演变而演化，使该发明具备长期使用的价值，不会因为短期技术的更替而被淘汰。
72.对组件而言，用户可通过javascript(js)开发的前端表单程序定义组件的元数据，从而让组件发挥出极强的可塑性，比如对组件赋予“背景”属性，关联图片数据，用户就可以为任意组件添加或更换不同的图片背景，包括动态图片；为组件赋予“颜色”属性，就可以通过srgb等标准参数为组件添加蒙版效果；为图标类组件赋予“图表类型”属性，就可以将柱状图、折线图、堆积图、仪表盘、饼图等图形关联到组件上，通过设计时做出选择，可向用户展示任意类型的图表，并由用户自行切换。
73.实施例4如图4所示，在实施例3的基础上，进一步地：设置组件容器位置和组件容器尺寸的方式为：在前端页面显示视图和组件容器，接收用户对组件容器位置的拖拽和对组件容器尺寸的缩放，显示预判的组件容器落点位置和组件容器尺寸的模拟，接收用户的确认，组件容器吸附在预判的组件容器落点位置和与组件容器尺寸匹配的至少一个格栅上，并实现自动对齐；所述组件容器尺寸包括：组件容器的横向尺寸、组件容器的纵向尺寸；所述组件容器的横向尺寸对应于其所占的格栅在浏览器宽度方向的列数，所述组件容器的纵向尺寸对应于其所占的格栅在浏览器高度方向的行数。
74.组件容器吸附时所映射的格栅，可以用于确定该组件的组件容器的显示位置，和对应的宽度（横向）和高度（纵向）尺寸。
75.在本发明的实施例中，本发明的基于格栅布局的自适应视图渲染方法和创建方法可以用于车间作业看板、管理驾驶舱大屏幕、桌面端数据分析视图的创建和渲染，可以理解，上述方法不限于上述应用，还可以用于适用于本发明构思的一切应用场景中。
76.以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换或改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种基于格栅布局的自适应视图渲染方法，其特征在于：包括以下步骤：s101：获取浏览器窗口参数，所述浏览器窗口参数为：浏览器高度方向分辨率、浏览器宽度方向分辨率；s102：计算浏览器宽度方向分辨率相对于浏览器高度方向分辨率的比值；s103：当所述比值落入预设阈值的数值范围时，判断屏幕类型为第一类型，使用第一类型渲染方式；所述第一类型渲染方式基于调整格栅尺寸实现组件容器的自适应排布；或，当所述比值不落入预设阈值的数值范围时，判断屏幕类型为第二类型，使用第二类型渲染方式；所述第二类型渲染方式基于调整组件容器的所占的格栅数量实现组件容器的自适应排布。2.如权利要求1所述的方法，其特征在于：所述第一类型渲染方式为：s201：根据格栅参数计算格栅适应比例；s202：根据所述格栅适应比例调整格栅尺寸；s203：根据调整后的所述格栅尺寸调整组件容器尺寸；s204：根据调整后组件容器尺寸相对于调整前组件容器尺寸的比例，对组件元素进行渲染；所述组件容器尺寸以格栅为单位。3.如权利要求2所述的方法，其特征在于：所述格栅为正方形，所述格栅参数包括：格栅像素数、横向格栅数量、纵向格栅数量；所述格栅像素数为格栅边长对应的像素数；所述横向格栅数量为沿视图横向的格栅列数；所述纵向格栅数量为沿视图纵向的格栅行数；计算所述格栅适应比例的方式为：横向格栅适应比例=浏览器宽度方向分辨率/（格栅像素数*横向格栅数量）；纵向格栅适应比例=浏览器高度方向分辨率/（格栅像素数*纵向格栅数量）；所述视图横向为浏览器宽度方向；所述视图纵向为浏览器高度方向。4.如权利要求2所述的方法，其特征在于：根据所述格栅适应比例调整格栅尺寸的方式为：首先比较横向格栅适应比例和纵向格栅适应比例，以变化量较小的值作为调整比例调整格栅尺寸；根据调整后的格栅尺寸调整组件容器尺寸的方式为：组件容器尺寸随着组件容器所占格栅尺寸的调整而调整，调整后如果视图中还有剩余空间，由组件容器按照预设的顺序进行瓜分。5.如权利要求1所述的方法，其特征在于：所述第二类型渲染方式包括步骤s301-s305，所述步骤s301-s305为：s301：计算浏览器容纳的总格栅数；s302：计算组件总预估面积，所述组件总预估面积为所有组件容器所占的格栅数之和；s303：比较所述浏览器容纳的总格栅数和所述组件总预估面积；当所述浏览器容纳的总格栅数大于等于述组件总预估面积时，进入步骤s304；
当所述浏览器容纳的总格栅数小于所述组件总预估面积时，进入步骤s305；s304：使用空间排布方法对组件容器进行排列，获得至少一种行组合方式，计算每种行组合方式的空间利用率，根据空间利用率最高的行组合方式，完成视图中组件容器的所有行排列；在步骤s304的排列中，使用空间利用率最高的行组合方式，完成视图中组件容器的所有行排列时，如果存在超出视图排列的组件容器，则进入步骤s305；s305：按照调整步长，按照调整权重由高至低顺序依次调整组件容器尺寸；每调整一个调整权重的权重值对应组件的组件容器尺寸后，计算组件总预估面积，直至浏览器容纳的总格栅数大于等于所述组件总预估面积，进入步骤s304。6.如权利要求5所述的方法，其特征在于：使用空间排布方法对组件容器进行排列的方式为：按照预设的组件容器排列顺序从左至右从上至下将组件容器整理成一列，在一列中优先合并高度相同的组件容器组成行，获得至少一种行组合方式；所述调整步长为1~4个格栅；所述调整权重为：相对比例、无限制；所述相对比例取值范围为0%~∞。7.如权利要求5所述的方法，其特征在于：计算组件总预估面积公式为：；式中，i为组件序号，i为非负整数；所述组件纵格栅数为所述组件容器纵向所占的格栅数量；所述组件横格栅数为所述组件容器横向所占的格栅数量；所述横向为浏览器宽度方向；所述纵向为浏览器高度方向。8.如权利要求1所述的方法，其特征在于：所述获取浏览器窗口参数的方式为：监听浏览器窗口的resize事件和load事件；在监听到上述事件时获取以下变量：窗口内部宽度、窗口内部高度；根据窗口内部宽度获取所述浏览器宽度方向分辨率，根据窗口内部高度获取所述浏览器高度方向分辨率。9.一种基于格栅布局的自适应视图的创建方法，其特征在于：用于创建如权利要求1-8任意一项所述的方法渲染的自适应视图；包括以下步骤：s401：建立视图，为视图配置视图属性；所述视图的尺寸以格栅为单位；s402：在视图中添加组件，使组件与视图形成映射关系，为组件配置组件属性；s403：设置组件容器位置和组件容器尺寸；所述组件容器尺寸以格栅为单位。10.如权利要求9所述的方法，其特征在于：设置组件容器位置和组件容器尺寸的方式为：在前端页面显示视图和组件容器，接收用户对组件容器位置的拖拽和对组件容器尺寸的缩放，显示预判的组件容器落点位置和组件容器尺寸的模拟，接收用户的确认，组件容器吸附在预判的组件容器落点位置和与组件容器尺寸匹配的至少一个格栅上，并实现自动对齐；所述组件容器尺寸包括：组件容器的横向尺寸、组件容器的纵向尺寸；
所述组件容器的横向尺寸对应于其所占的格栅在浏览器宽度方向的列数，所述组件容器的纵向尺寸对应于其所占的格栅在浏览器高度方向的行数。

技术总结
一种基于格栅布局的自适应视图渲染方法，包括：S101：获取浏览器窗口参数；S102：计算浏览器宽度方向分辨率相对于浏览器高度方向分辨率的比值；S103：当比值落入预设阈值的数值范围时，使用第一类型渲染方式；或，当比值不落入预设阈值的数值范围时，使用第二类型渲染方式。一种基于格栅布局的自适应视图的创建方法，包括：S401：建立视图，为视图配置视图属性；视图的尺寸以格栅为单位；S402：在视图中添加组件，使组件与视图形成映射关系，为组件配置组件属性；S403：设置组件容器位置和组件容器尺寸；组件容器尺寸以格栅为单位。使用本发明的方法，可以降低视图开发门槛和开发成本、并且仅以一个版本就可在前端以更好的效果适配各种尺寸大小的屏幕。各种尺寸大小的屏幕。各种尺寸大小的屏幕。


技术研发人员：王世玉 陈轶欧
受保护的技术使用者：北京冠群信息技术股份有限公司
技术研发日：2023.08.10
技术公布日：2023/9/9