一种设计区域中单元格的调整方法、装置及电子设备与流程

    专利2025-03-27  39


    本技术涉及用户界面设计,特别是涉及一种设计区域中单元格的调整方法、装置及电子设备。


    背景技术:

    1、相关技术中,ui(user interface,用户界面)设计程序可以在画布中显示多个矩形的单元格,每一单元格可以容纳待设计的ui界面所需的功能控件,使得设计人员能够更加方便地对待设计的ui界面进行布局。

    2、然而,相关技术中,设计人员无法对各个单元格进行灵活地调整,以实现不同的ui界面设计需求,因此,给ui界面的设计过程带来了不利的影响。


    技术实现思路

    1、本技术实施例的目的在于提供一种设计区域中单元格的调整方法、装置及电子设备,以实现对设计区域中的单元格进行灵活调整。具体技术方案如下:

    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、可选地,所述设计区域的竖直边上显示有水平分割标记,所述水平分割标记用于指示:所显示的单元格所属的行区域中单元格的水平边的位置;所述设计区域的水平边上显示有竖直分割标记,所述竖直分割标记用于指示:所显示的单元格所属的列区域中单元格的竖直边的位置;所述方法还包括:

    32、针对任一水平分割标记,当该水平分割标记所指示的位置处不存在水平边时,从所述显示界面内删除该水平分割标记;

    33、和/或,

    34、针对任一竖直分割标记,当该竖直分割标记所指示的位置处不存在竖直边时,从所述显示界面内删除该竖直分割标记。

    35、可选地,所述显示界面内还设置有单元格调整功能区,所述单元格调整功能区中显示有至少一个调整功能控件,任一调整功能控件用于响应用户的操作以触发调整指令。

    36、可选地,所述显示界面内还设置有业务功能区,所述业务功能区中显示有至少一个业务功能控件,所述方法还包括:

    37、当接收到针对任一业务功能控件的布局指令时,将该业务功能控件添加至所述布局指令在所述设计区域中所指示的单元格中,以生成包含业务功能控件的用户界面。

    38、在本技术实施例的另一方面,还提供了一种设计区域中单元格的调整装置,所述装置包括:

    39、显示模块,用于在显示界面内的设计区域中显示用于容纳业务功能控件的单元格;

    40、第一指令接收模块,用于接收针对所显示的一个第一单元格的第一调整指令;

    41、第一调整模块,用于若所述第一调整指令指示对所述第一单元格进行拆分,则根据所述第一调整指令所指示的拆分后的单元格布局,在所述第一单元格内显示单元格划分线,以将所述第一单元格拆分为多个单元格;

    42、其中,在所述单元格划分线为水平线时,所述单元格划分线的位置为:基于所述拆分后的单元格布局包含的行数,以及所述第一单元格所属的第一行区域中其他单元格的水平边的位置确定的;任一单元格所属的行区域为:该单元格的上下两个边所属的线之间的区域;

    43、在所述单元格划分线为竖直线时,所述单元格划分线的位置为:基于所述拆分后的单元格布局包含的列数,以及所述第一单元格所属的第一列区域中其他单元格的竖直边的位置确定的;任一单元格所属的列区域为:该单元格的左右两个边所属的线之间的区域。

    44、可选地,第一调整模块,具体用于当所述拆分后的单元格布局包含多行时,根据所述第一行区域中显示的其他水平线的位置,确定以所述设计区域的左右两个边中的点为端点的水平线,作为第一水平区域划分线;基于所确定的第一水平区域划分线,在所述第一单元格中显示水平线;

    45、和/或,

    46、当所述拆分后的单元格布局包含多列时,根据所述第一列区域中显示的其他竖直线的位置,确定以所述设计区域的上下两个边中的点为端点的竖直线,作为第一竖直区域划分线;基于所确定的第一竖直区域划分线,在所述第一单元格中显示竖直线。

    47、可选地,第一调整模块,具体用于若所述第一行区域中显示的其他水平线的第一数目,大于所述拆分后的单元格布局包含的水平线的第二数目,从确定出的第一水平区域划分线中选择所述第二数目个水平区域划分线,并显示所述第二数目个水平区域划分线在所述第一单元格内的部分;

    48、若所述第一行区域中显示的其他水平线的第一数目,小于所述拆分后的单元格布局包含的水平线的第二数目,显示确定出的第一水平区域划分线在所述第一单元格内的部分,并在所述第一单元格内显示第三数目个水平线;其中,所述第三数目为所述第二数目与所述第一数目的差值;

    49、和/或,

    50、所述基于所确定的第一竖直区域划分线,在所述第一单元格中显示竖直线,包括:

    51、若所述第一列区域中显示的其他竖直线的第四数目,大于所述拆分后的单元格布局包含的竖直线的第五数目,从确定出的第一竖直区域划分线中选择第五数目个竖直区域划分线,并显示所述第五数目个竖直区域划分线在所述第一单元格内的部分;

    52、若所述第一列区域中显示的其他竖直线的第四数目,小于所述拆分后的单元格布局包含的竖直线的第五数目,显示确定出的第一竖直区域划分线在所述第一单元格内的部分,并在所述第一单元格内显示第六数目个竖直线;其中,所述第六数目为所述第五数目与所述第四数目的差值。

    53、可选地,所述装置还包括:

    54、第二调整指令接收模块,用于接收针对所显示的多个相邻的第二单元格的第二调整指令;

    55、第二调整模块,用于若所述第二调整指令指示将各第二单元格调整为指定单元格布局,则针对每一第二单元格,根据该第二单元格所属的第二行区域中显示的水平线,以及该第二单元格所属的第二列区域中显示的竖直线,对该第二单元格进行拆分,得到多个第三单元格。

    56、可选地,所述装置还包括:

    57、第三调整模块,用于若拆分得到的各第三单元格不符合所述指定单元格布局,则根据所述指定单元格布局,对拆分得到的各第三单元格中的部分单元格进行拆分和/或合并,以使得到的多个单元格符合所述指定单元格布局。

    58、可选地,所述装置还包括:

    59、行增加模块,用于若所述第一调整指令指示针对所述第一单元格增加至少一行单元格,根据所述第一单元格的上下边的位置,确定以所述设计区域的左右两个边中的点为端点的水平线,作为第二水平区域划分线;在所述设计区域内显示所述第二水平区域划分线;

    60、列增加模块,用于若所述第一调整指令指示针对所述第一单元格增加至少一列单元格,根据所述第一单元格的左右边的位置,确定以所述设计区域的上下两个边中的点为端点的竖直线,作为第二竖直区域划分线;在所述设计区域内显示所述第二竖直区域划分线;

    61、行删除模块,用于若所述第一调整指令指示针对所述第一单元格删除一行单元格,在所述设计区域内,删除所述第一单元格所属的行区域与相邻的行区域之间的水平线;

    62、列删除模块,若所述第一调整指令指示针对所述第一单元格删除一列单元格,在所述设计区域内,删除所述第一单元格所属的列区域与相邻的列区域之间的竖直线。

    63、可选地,所述装置还包括:

    64、合并模块,用于若所述第二调整指令指示将各第二单元格合并,在所述设计区域内,删除各第二单元格中每两个相邻单元格的共用边。

    65、可选地,所述设计区域的竖直边上显示有水平分割标记,所述水平分割标记用于指示:所显示的单元格所属的行区域中单元格的水平边的位置;所述设计区域的水平边上显示有竖直分割标记,所述竖直分割标记用于指示:所显示的单元格所属的列区域中单元格的竖直边的位置;所述装置还包括:

    66、标记删除模块,用于针对任一水平分割标记,当该水平分割标记所指示的位置处不存在水平边时,从所述显示界面内删除该水平分割标记;

    67、和/或,

    68、针对任一竖直分割标记,当该竖直分割标记所指示的位置处不存在竖直边时,从所述显示界面内删除该竖直分割标记。

    69、可选地,所述显示界面内还设置有单元格调整功能区,所述单元格调整功能区中显示有至少一个调整功能控件,任一调整功能控件用于响应用户的操作以触发调整指令。

    70、可选地,所述显示界面内还设置有业务功能区,所述业务功能区中显示有至少一个业务功能控件,所述装置还包括:

    71、控件添加模块,用于当接收到针对任一业务功能控件的布局指令时,将该业务功能控件添加至所述布局指令在所述设计区域中所指示的单元格中,以生成包含业务功能控件的用户界面。

    72、本技术实施例还提供了一种电子设备,包括:

    73、存储器,用于存放计算机程序;

    74、处理器,用于执行存储器上所存放的程序时,实现上述任一所述的设计区域中单元格的调整方法。

    75、本技术实施例还提供了一种计算机可读存储介质,所述计算机可读存储介质内存储有计算机程序,所述计算机程序被处理器执行时实现上述任一所述的设计区域中单元格的调整方法。

    76、本技术实施例还提供了一种包含指令的计算机程序产品,当其在计算机上运行时,使得计算机执行上述任一所述的设计区域中单元格的调整方法。

    77、本技术实施例有益效果:

    78、通过本方案,可以在第一调整指令指示对第一单元格进行拆分的情况下,根据第一调整指令所指示的拆分后的单元格布局,在第一单元格内显示单元格划分线,以将第一单元格拆分为多个单元格,实现了对单元格进行灵活地拆分,并且,由于水平的单元格划分线的位置是基于拆分后的单元格布局包含的行数,以及第一单元格所属的第一行区域中其他单元格的水平边的位置确定的,竖直的单元格划分线的位置是基于拆分后的单元格布局包含的列数,以及第一单元格所属的第一列区域中其他单元格的竖直边的位置确定的,从而单元格划分线拆分第一单元格得到多个单元格之后,所得到的多个单元格的水平边能够与其他相关联的单元格的水平边连通,竖直边也能够与其他相关联的单元格的竖直边连通,使得整个设计区域中的单元格布局保持整齐,便于后续对单元格进行合并。

    79、当然,实施本技术的任一产品或方法并不一定需要同时达到以上所述的所有优点。


    技术特征:

    1.一种设计区域中单元格的调整方法,其特征在于,所述方法包括:

    2.根据权利要求1所述的方法,其特征在于,所述根据所述第一调整指令所指示的拆分后的单元格布局,在所述第一单元格内显示单元格划分线,包括:

    3.根据权利要求2所述的方法,其特征在于,所述基于所确定的第一水平区域划分线,在所述第一单元格中显示水平线,包括:

    4.根据权利要求1所述的方法,其特征在于,所述方法还包括:

    5.根据权利要求4所述的方法,其特征在于,所述方法还包括:

    6.根据权利要求1所述的方法,其特征在于,所述方法还包括:

    7.根据权利要求4所述的方法,其特征在于,所述方法还包括:

    8.根据权利要求1所述的方法,其特征在于,所述设计区域的竖直边上显示有水平分割标记,所述水平分割标记用于指示:所显示的单元格所属的行区域中单元格的水平边的位置;所述设计区域的水平边上显示有竖直分割标记,所述竖直分割标记用于指示:所显示的单元格所属的列区域中单元格的竖直边的位置;所述方法还包括:

    9.根据权利要求1-8任一项所述的方法,其特征在于,所述显示界面内还设置有单元格调整功能区,所述单元格调整功能区中显示有至少一个调整功能控件,任一调整功能控件用于响应用户的操作以触发调整指令。

    10.根据权利要求1-8任一项所述的方法,其特征在于,所述显示界面内还设置有业务功能区,所述业务功能区中显示有至少一个业务功能控件,所述方法还包括:

    11.一种设计区域中单元格的调整装置,其特征在于,所述装置包括:

    12.一种电子设备,其特征在于,包括:

    13.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质内存储有计算机程序,所述计算机程序被处理器执行时实现权利要求1-10任一所述的方法。


    技术总结
    本申请实施例提供了一种设计区域中单元格的调整方法、装置及电子设备,涉及用户界面设计领域,该方法包括:在显示界面内的设计区域中显示用于容纳业务功能控件的单元格;当接收到针对所显示的一个第一单元格的调整指令时,若调整指令指示对第一单元格进行拆分,则根据调整指令所指示的拆分后的单元格布局,在第一单元格内显示单元格划分线,以将第一单元格拆分为多个单元格;单元格划分线的位置为:基于第一单元格所属的第一行区域中其他单元格的水平边的位置确定的;和/或基于第一单元格所属的第一列区域中其他单元格的竖直边的位置确定的,通过本方案可以对设计区域中的单元格进行灵活调整。

    技术研发人员:胡博伟,胡景翔,奚元庆
    受保护的技术使用者:杭州海康机器人股份有限公司
    技术研发日:
    技术公布日:2024/4/29
    转载请注明原文地址:https://wp.8miu.com/read-84602.html

    最新回复(0)