一种边框自调整方法及装置与流程

1.本技术涉及数据处理技术领域，特别的，尤其涉及一种边框自调整方法及装置。


背景技术：

2.目前，浏览器上通常看到的边框如图1中两种形式，如图1所示，一种是简单的线条边框(1a)，另一种是虚线边框(1b)，其边框均可设置其颜色和粗细。而对于图2中的这种复杂边框来说，如图2所示，大多数采用的是中间元素(图片)作为背景来设置的，而若需要改变中间元素，则需要提供一张新的图片，无法根据中间元素的宽度来自动变化。


技术实现要素：

3.鉴于上述内容中的问题，本技术提供了一种边框自调整方法及装置，用以实现配合中间元素来自适应生成复杂边框。
4.为了实现上述目的，本技术提供了以下技术方案：
5.一种边框自调整方法，包括：
6.通过表单编辑器设置待调整边框图以及裁切位置；
7.根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框；
8.按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。
9.进一步的，所述通过表单编辑器设置待调整边框图以及裁切位置，包括：
10.使用层叠样式表中的预设属性来设置所述待调整边框图以及所述裁切位置。
11.进一步的，所述按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整，包括：
12.对四个所述角块进行设定，并添加对应的角图；
13.对四个所述边框进行设定，并设置对应的伸缩方式；
14.在所述中间元素块上面设置透明块，对中间元素进行设定，所述透明块的大小与中间元素的大小相同；
15.按照预设渲染方式将所述角图、所述边框以及所述中间元素进行渲染，实现所述待调整边框图的自调整。
16.一种边框自调整装置，包括：
17.第一处理单元，用于通过表单编辑器设置待调整边框图以及裁切位置；
18.第二处理单元，用于根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框；
19.第三处理单元，用于按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。
20.进一步的，所述第一处理单元用于：
21.使用层叠样式表中的预设属性来设置所述待调整边框图以及所述裁切位置。
22.进一步的，所述第三处理单元用于：
23.对四个所述角块进行设定，并添加对应的角图；
24.对四个所述边框进行设定，并设置对应的伸缩方式；
25.在所述中间元素块上面设置透明块，对中间元素进行设定，所述透明块的大小与中间元素的大小相同；
26.按照预设渲染方式将所述角图、所述边框以及所述中间元素进行渲染，实现所述待调整边框图的自调整。
27.一种存储介质，所述存储介质包括存储的程序，其中，在所述程序运行时控制所述存储介质所在的设备执行如上述所述的边框自调整方法。
28.一种电子设备，所述电子设备包括至少一个处理器、以及与所述处理器连接的至少一个存储器、总线；其中，所述处理器、所述存储器通过所述总线完成相互间的通信；所述处理器用于调用所述存储器中的程序指令，以执行如上述所述的边框自调整方法。
29.本技术所述的边框自调整方法及装置，首先通过表单编辑器设置待调整边框图以及裁切位置；然后根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框；最后按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。本技术可以对复杂边框进行可配置的设置，实现中间元素的自适应以及添加角图。
附图说明
30.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
31.图1为现有技术中边框示意图；
32.图2为现有技术中复杂边框的示意图；
33.图3为本技术实施例公开的一种边框自调整方法流程示意图；
34.图4为本技术实施例公开的边框裁切设置过程示意图；
35.图5为本技术实施例公开的边框裁切示意图；
36.图6为本技术实施例公开的边框自调整过程示意图；
37.图7为本技术实施例公开的一种边框自调整装置结构示意图；
38.图8为本技术实施例公开的一种电子设备的结构示意图。
具体实施方式
39.申请人在研究中发现，业务需求希望表单编辑器能够支持更好看的边框样式，同时由于用户的中间元素的大小是动态设置的，无法提前确定，因此，本技术提供一种边框自调整方法及装置，用以实现配合中间元素来自适应生成复杂边框。
40.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于
本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
41.请参见附图3，为本技术实施例提供的一种边框自调整方法流程示意图。如图3所示，本技术实施例提供了一种边框自调整方法，该方法包括如下步骤：
42.s301：通过表单编辑器设置待调整边框图以及裁切位置。
43.本步骤中，表单编辑器可以实现边框的自主调整，具体是支持4个角的图片设置(如图4所述的向日葵)，4个边的宽度和每条边是否循环来实现边框的调整。
44.本技术实施例中，上述通过表单编辑器设置待调整边框图以及裁切位置，包括：
45.使用层叠样式表中的预设属性来设置所述待调整边框图以及所述裁切位置。
46.s302：根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框。
47.通过本步骤，在进行表单编辑器设置时，需要预先存在5个图，分别是：边框图、四个角图，同时还要有4条裁切线位置，可以将边框图裁成九宫格对应成九个块，如图5所示，左上角、上边、右上角、左边、中间、右边、左下角、下边和右下角。同时，若有四条边在长度不够覆盖元素的情况下，需要把这条边采用变形拉伸的方式还是采用循环拼接的方式来让这条边的长度等于元素的对应边长。
48.s303：按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。
49.本技术实施例中，上述所述按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整，包括：
50.对四个所述角块进行设定，并添加对应的角图；
51.对四个所述边框进行设定，并设置对应的伸缩方式；
52.在所述中间元素块上面设置透明块，对中间元素进行设定，所述透明块的大小与中间元素的大小相同；
53.按照预设渲染方式将所述角图、所述边框以及所述中间元素进行渲染，实现所述待调整边框图的自调整。
54.通过上述设置，在浏览器展示端可以根据添加编辑元素的位置先把边框图裁切，然后根据覆盖方式确定是采用变形拉伸的方式还是采用循环拼接的方式来实现待调整边框图的调整，最后再将四个角图进行渲染上即可。
55.需要说明的是，整体的边框子调整方法流程如图6所示，首先准备一张边框图、设定四条裁切线(top，left，right，bottom)并设定四个角图以及设定四条边的拉伸方式(循环/拉伸)，然后将相关数据存储；用户在进行边框调整时，需要从存储数据中选择一个边框，获取对应的数据，设置边框图、设置边框图的裁切位置以及设置四个边的伸缩方式；最后在边框图上面设置一层透明块，，对中间元素进行设定，所述透明块的大小与中间元素的大小相同；再定位四个角，放置四个角图；最终按照预设渲染方式将所述角图、所述边框以及所述中间元素进行渲染，实现所述待调整边框图的自调整。
56.本技术实施例公开一种边框自调整方法，首先通过表单编辑器设置待调整边框图以及裁切位置；然后根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框；最后按照预
先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。本技术实施例可以对复杂边框进行可配置的设置，实现中间元素的自适应以及添加角图。
57.请参阅图7，基于上述实施例公开的一种边框自调整方法，本实施例对应公开了一种边框自调整装置，该装置包括：
58.第一处理单元71，用于通过表单编辑器设置待调整边框图以及裁切位置；
59.第二处理单元72，用于根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框；
60.第三处理单元73，用于按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。
61.进一步的，所述第一处理单元71用于：
62.使用层叠样式表中的预设属性来设置所述待调整边框图以及所述裁切位置。
63.进一步的，所述第三处理单元73用于：
64.对四个所述角块进行设定，并添加对应的角图；
65.对四个所述边框进行设定，并设置对应的伸缩方式；
66.在所述中间元素块上面设置透明块，对中间元素进行设定，所述透明块的大小与中间元素的大小相同；
67.按照预设渲染方式将所述角图、所述边框以及所述中间元素进行渲染，实现所述待调整边框图的自调整。
68.所述边框自调整装置包括处理器和存储器，上述第一处理单元、第二处理单元和第三处理单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
69.处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来达到实现配合中间元素来自适应生成复杂边框。
70.本技术实施例提供了一种存储介质，其上存储有程序，该程序被处理器执行时实现所述边框自调整方法。
71.本技术实施例提供了一种处理器，所述处理器用于运行程序，其中，所述程序运行时执行所述边框自调整方法。
72.本技术实施例提供了一种电子设备，如图8所示，该电子设备80包括至少一个处理器801、以及与所述处理器连接的至少一个存储器802、总线803；其中，所述处理器801、所述存储器802通过所述总线803完成相互间的通信；处理器801用于调用所述存储器802中的程序指令，以执行上述的所述边框自调整方法。
73.本文中的电子设备可以是服务器、pc、pad、手机等。
74.本技术还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序：
75.通过表单编辑器设置待调整边框图以及裁切位置；
76.根据所述裁切位置对所述待调整边框图进行裁切，将所述待调整边框图裁成九宫格对应的九个裁剪块，包括一个中间元素块、四个角块和四个边框；
77.按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整。
78.进一步的，所述通过表单编辑器设置待调整边框图以及裁切位置，包括：
79.使用层叠样式表中的预设属性来设置所述待调整边框图以及所述裁切位置。
80.进一步的，所述按照预先设置的设定参数对所述九个裁剪块进行设定，以实现所述待调整边框图的自调整，包括：
81.对四个所述角块进行设定，并添加对应的角图；
82.对四个所述边框进行设定，并设置对应的伸缩方式；
83.在所述中间元素块上面设置透明块，对中间元素进行设定，所述透明块的大小与中间元素的大小相同；
84.按照预设渲染方式将所述角图、所述边框以及所述中间元素进行渲染，实现所述待调整边框图的自调整。
85.本技术是根据本技术实施例的方法、设备(系统)、计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
86.在一个典型的配置中，设备包括一个或多个处理器(cpu)、存储器和总线。设备还可以包括输入/输出接口、网络接口等。
87.存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(ram)和/或非易失性内存等形式，如只读存储器(rom)或闪存(flash ram)，存储器包括至少一个存储芯片。存储器是计算机可读介质的示例。
88.计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(pram)、静态随机存取存储器(sram)、动态随机存取存储器(dram)、其他类型的随机存取存储器(ram)、只读存储器(rom)、电可擦除可编程只读存储器(eeprom)、快闪记忆体或其他内存技术、只读光盘只读存储器(cd
‑
rom)、数字多功能光盘(dvd)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
89.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
90.本领域技术人员应明白，本技术的实施例可提供为方法、系统或计算机程序产品。因此，本技术可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本技术可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
91.以上仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。