画布元素布局调整方法、装置、电子设备及存储介质制造方法及图纸

技术编号:39144299 阅读:9 留言:0更新日期:2023-10-23 14:56
本申请提供一种画布元素布局调整方法、装置、电子设备及存储介质,涉及网页设计技术领域,该方法包括:在画布界面中显示缩略界面;其中,所述缩略界面的尺寸与画布的尺寸具有比例关系;在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素;在所述映射元素被拖动的情况下,按照所述映射元素在所述缩略界面中的第一移动轨迹,在所述画布界面中显示所述目标元素的第二移动轨迹;在所述映射元素被释放的情况下,在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素。本申请能够实现较大尺寸网页画布中元素的快速移动,简化了元素的移动过程。简化了元素的移动过程。简化了元素的移动过程。

【技术实现步骤摘要】
画布元素布局调整方法、装置、电子设备及存储介质


[0001]本申请涉及网页设计
,尤其涉及一种画布元素布局调整方法、装置、电子设备及存储介质。

技术介绍

[0002]在传统的网页页面逻辑中,网页画布的尺寸较大,由于显示屏的尺寸是固定的,无法将完整的网页画布都显示在屏幕中,屏幕中显示部分网页画布。当用户移动网页画布中元素时,元素所要移动的目标位置并不在屏幕显示的当前部分网页画布中,需要用户长时间选中元素向着网页画布中的目标位置移动,无法快速的实现元素移动。
[0003]需要说明的是,在上述
技术介绍
部分公开的信息仅用于加强对本申请的背景的理解,因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

技术实现思路

[0004]本申请的目的在于提供一种画布元素布局调整方法、装置、电子设备及存储介质,能够实现较大尺寸网页画布中元素的快速移动。
[0005]本申请的其他特性和优点将通过下面的详细描述变得显然,或部分地通过本申请的实践而习得。
[0006]第一方面,提供一种画布元素布局调整方法,该方法包括:在画布界面中显示缩略界面;其中,所述缩略界面的尺寸与画布的尺寸具有比例关系;在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素;在所述映射元素被拖动的情况下,按照所述映射元素在所述缩略界面中的第一移动轨迹,在所述画布界面中显示所述目标元素的第二移动轨迹;在所述映射元素被释放的情况下,在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素。
[0007]结合第一方面,在某些可能的实现方式中,所述在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素,包括:在所述目标元素被选中的情况下,在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素。
[0008]结合第一方面和上述实现方式,在某些可能的实现方式中,所述在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素,包括:在所述目标元素从所述画布界面中被拖动至所述缩略界面中的情况下,在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素。
[0009]结合第一方面和上述实现方式,在某些可能的实现方式中,所述在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素,包括:根据所述比例关系缩小所述目标元素,得到所述映射元素;在所述缩略界面中显示所述映射元素。
[0010]结合第一方面和上述实现方式,在某些可能的实现方式中,所述在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素,包括:获取所述缩略界面中所述第一移动轨迹的末端所在的第二位置;根据所述比例关系扩大所述第二位置,得到
所述第二移动轨迹的末端在所述画布界面中的理论位置;在所述第一位置与所述理论位置相同的情况下,在所述第一位置显示所述目标元素;在所述第一位置与所述理论位置不相同的情况下,将所述理论位置确定为所述第一位置,并在所述第一位置显示所述目标元素。
[0011]结合第一方面和上述实现方式,在某些可能的实现方式中,所述根据所述比例关系扩大所述第二位置,得到所述第二移动轨迹的末端在所述画布界面中的理论位置,包括:获取所述缩略界面中所述第一移动轨迹的起始端所在的第三位置;确定所述第三位置与所述第二位置之间的距离;在所述距离大于预设值的情况下,根据所述比例关系扩大所述第二位置,得到所述理论位置。
[0012]结合第一方面和上述实现方式,在某些可能的实现方式中,所述在所述映射元素被释放的情况下,在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素之后,所述画布元素布局调整方法还包括:在所述缩略界面中显示所述画布中各个元素的布局。
[0013]第二方面,提供一种画布元素布局调整装置,上述画布元素布局调整装置包括:
[0014]界面显示模块,用于在画布界面中显示缩略界面;其中,所述缩略界面的尺寸与画布的尺寸具有比例关系;
[0015]元素显示模块,用于在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素;
[0016]轨迹同步模块,用于在所述映射元素被拖动的情况下,按照所述映射元素在所述缩略界面中第一移动轨迹,在所述画布界面中显示所述目标元素的第二移动轨迹;
[0017]界面更新模块,用于在所述映射元素被释放的情况下,在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素。
[0018]结合第二方面,在某些可能的实现方式中,所述元素显示模块包括:
[0019]第一显示单元,用于在所述目标元素被选中的情况下,在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素。
[0020]结合第二方面,在某些可能的实现方式中,所述元素显示模块还包括:
[0021]第二显示单元,用于在所述目标元素从所述画布界面中被拖动至所述缩略界面中的情况下,在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素。
[0022]结合第二方面和上述实现方式,在某些可能的实现方式中,所述元素显示模块还包括:
[0023]缩放子单元,用于根据所述比例关系缩小所述目标元素,得到所述映射元素;
[0024]显示子单元,用于在所述缩略界面中显示所述映射元素。
[0025]结合第二方面和上述实现方式,在某些可能的实现方式中,所述界面更新模块包括:
[0026]位置获取单元,用于获取所述缩略界面中所述第一移动轨迹的末端所在的第二位置;
[0027]位置计算单元,用于根据所述比例关系扩大所述第二位置,得到所述第二移动轨迹的末端在所述画布界面中的理论位置;
[0028]第一更新单元,用于在所述第一位置与所述理论位置相同的情况下,在所述第一位置显示所述目标元素;
[0029]第二更新单元,用于在所述第一位置与所述理论位置不相同的情况下,将所述理论位置确定为所述第一位置,并在所述第一位置显示所述目标元素。
[0030]结合第二方面和上述实现方式,在某些可能的实现方式中,所述位置计算单元包括:
[0031]位置获取子单元,用于获取所述缩略界面中所述第一移动轨迹的起始端所在的第三位置;
[0032]距离计算子单元,用于确定所述第三位置与所述第二位置之间的距离;
[0033]位置计算子单元,用于在所述距离大于预设值的情况下,根据所述比例关系扩大所述第二位置,得到所述理论位置。
[0034]结合第二方面和上述实现方式,在某些可能的实现方式中,所述画布元素布局调整装置还包括:
[0035]布局展示单元,用于在所述缩略界面中显示所述画布中各个元素的布局。
[0036]第三方面,提供一种电子设备,上述电子设备包括存储器、处理器以及存储在上述存储器中并可在上述处理器上运行的计算机程序,上述处理器执行上述计算机程序时实现如上述实施例中上述的画布元素布局调整方法。
[0037]第四方面,提供一种计算机可读存储介质,其上本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种画布元素布局调整方法,其特征在于,所述画布元素布局调整方法包括:在画布界面中显示缩略界面;其中,所述缩略界面的尺寸与画布的尺寸具有比例关系;在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素;在所述映射元素被拖动的情况下,按照所述映射元素在所述缩略界面中的第一移动轨迹,在所述画布界面中显示所述目标元素的第二移动轨迹;在所述映射元素被释放的情况下,在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素。2.如权利要求1所述的画布元素布局调整方法,其特征在于,所述在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素,包括:在所述目标元素被选中的情况下,在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素。3.如权利要求1所述的画布元素布局调整方法,其特征在于,所述在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素,包括:在所述目标元素从所述画布界面中被拖动至所述缩略界面中的情况下,在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素。4.如权利要求1至3任意一项所述的画布元素布局调整方法,其特征在于,所述在所述缩略界面中,显示所述画布界面中的目标元素对应的映射元素,包括:根据所述比例关系缩小所述目标元素,得到所述映射元素;在所述缩略界面中显示所述映射元素。5.如权利要求1至3任意一项所述的画布元素布局调整方法,其特征在于,所述在所述画布界面中所述第二移动轨迹的末端所在的第一位置,显示所述目标元素,包括:获取所述缩略界面中所述第一移动轨迹的末端所在的第二位置;根据所述比例关系扩大所述第二位置,得到所述第二移动轨迹的末端在所述画布界面中的理论位置;在所述第一位置与所述理论位置相同的情况下,在所述第一位置显示所述目标元素;在所述第一位置与所述理论位置不相同的情况下,...

【专利技术属性】
技术研发人员:康健
申请(专利权)人:三六零科技集团有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1