针对组件的绘制方法、装置、电子设备及存储介质与流程

    技术2025-03-28  43


    本发明涉及计算机,尤其涉及一种针对组件的绘制方法、装置、电子设备及存储介质。


    背景技术:

    1、为了实现用户对页面中各类组件的拖拽交互能力,引入低码、无码技术方案。现有的低码、无码技术方案,需要在实际运行时的代码中开发一套组件,在低码的设计器中,再开发一套组件的代码,用以实现组件的选中和拖拽能力。如此,利用大量代码开发两套组件实现组件的选中和拖拽能力需要大量的人力和时间,从而降低了研发效率,并且,设计时的实现严重依赖运行时各组件的特定结构和需求实现,软件系统迭代升级时,容易因为双方繁杂的功能点造成数据、接口不一致,从而引发质量问题。


    技术实现思路

    1、本发明提供一种针对组件的绘制方法、装置、电子设备及存储介质,用以解决现有技术中编写大量代码实现组件的拖拽交互能力,降低研发效率和研发质量的缺陷,实现利用元数据描述简化对组件的拖拽交互功能的开发,提高开发效率和开发质量。

    2、本发明提供一种针对组件的绘制方法,包括如下步骤:

    3、确定至少一个待选组件对应的第一元数据描述;

    4、对各所述待选组件对应的第一元数据描述进行解析处理,得到与开发页面相匹配的待选组件的树形对象结构;所述开发页面为用户选中所述待选组件和/或拖拽所述待选组件的页面;所述树形对象结构用于表征所述待选组件之间的层级关系;所述树形对象结构包括各所述待选组件的第二元数据描述;

    5、基于所述第二元数据描述,确定各所述待选组件的边界和各所述待选组件的交互锚点;所述边界用于用户选中所述待选组件并拖拽所述待选组件;所述交互锚点用于所述用户在所述开发页面中对所述待选组件进行编辑操作,所述编辑操作包括以下至少一项:删除、添加、合并、缩放;

    6、响应于用户对所述待选组件的选中操作指令,在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点。

    7、根据本发明提供的一种针对组件的绘制方法,所述对各所述待选组件对应的第一元数据描述进行解析处理,得到与开发页面相匹配的待选组件的树形对象结构,包括:对各所述待选组件对应的第一元数据描述进行解析处理,得到各所述待选组件与所述开发页面相匹配的第二元数据描述;对各所述待选组件的第二元数据描述进行编号,得到编号后的第二元数据描述;将编号后的第二元数据描述,以树形结构存储在所述开发页面对应的浏览器中的运行环境中,得到所述与开发页面相匹配的待选组件的树形对象结构。

    8、根据本发明提供的一种针对组件的绘制方法,所述基于所述第二元数据描述,确定各所述待选组件的边界和各所述待选组件的交互锚点,包括:在所述待选组件在所述浏览器中渲染时,确定所述待选组件对应的尺寸信息和所述待选组件对应的位置信息;基于所述尺寸信息、所述位置信息和所述浏览器的坐标系,确定所述待选组件的边界;基于所述待选组件的边界,确定各所述待选组件的交互锚点。

    9、根据本发明提供的一种针对组件的绘制方法,所述确定至少一个待选组件对应的第一元数据描述,包括:从至少一个待选组件中提取各所述待选组件对应的第三元数据描述;在各所述第三元数据描述中增加对应的所述待选组件可接受拖入的组件信息,得到各所述待选组件对应的第一元数据描述。

    10、根据本发明提供的一种针对组件的绘制方法,所述在各所述第三元数据描述中增加对应的所述待选组件可接受拖入组件的组件信息,得到各所述待选组件对应的第一元数据描述,包括:获取所述开发页面的需求表;基于所述需求表,确定各所述待选组件对应的可接受拖入组件;将所述可接受拖入组件的组件信息增加到所述第三元数据描述中,得到各所述待选组件对应的第一元数据描述。

    11、根据本发明提供的一种针对组件的绘制方法,所述在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点,包括:确定所述浏览器识别到所述用户选中的待选组件;组合所述用户选中的待选组件和所述用户选中的待选组件对应的第一元数据描述,在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点。

    12、根据本发明提供的一种针对组件的绘制方法,所述在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点之后,所述方法还包括:响应于所述用户对所述交互锚点的操作,对所述待选组件进行编辑,在所述开发页面中显示所述用户编辑之后的页面组件布局。

    13、本发明还提供一种针对组件的绘制装置,包括如下模块:

    14、第一确定模块,用于确定至少一个待选组件对应的第一元数据描述;

    15、解析模块,用于对各所述待选组件对应的第一元数据描述进行解析处理,得到与开发页面相匹配的待选组件的树形对象结构所述开发页面为用户选中所述待选组件和/或拖拽所述待选组件的页面;所述树形对象结构用于表征所述待选组件之间的层级关系;所述树形对象结构包括各所述待选组件的第二元数据描述;

    16、边界和各所述待选组件的交互锚点;所述边界用于用户选中所述待选组件并拖拽所述待选组件;所述交互锚点用于所述用户在所述开发页面中对所述待选组件进行编辑操作,所述编辑操作包括以下至少一项:删除、添加、合并、缩放;

    17、显示模块,用于响应于用户对所述待选组件的选中操作指令,在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点。

    18、本发明还提供一种电子设备,包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序,所述处理器执行所述计算机程序时实现如上述任一种所述针对组件的绘制方法。

    19、本发明还提供一种非暂态计算机可读存储介质,其上存储有计算机程序,该计算机程序被处理器执行时实现如上述任一种所述针对组件的绘制方法。

    20、本发明还提供一种计算机程序产品,包括计算机程序,所述计算机程序被处理器执行时实现如上述任一种所述针对组件的绘制方法。

    21、本发明提供的针对组件的绘制方法、装置、电子设备及存储介质,通过确定各待选组件对应的第一元数据描述;对各待选组件对应的第一数据描述进行解析处理,得到与开发页面相匹配的待选组件的树形对象结构;根据树形对象结构中待选组件的第二元数据描述,确定各待选组件的边界和各待选组件的交互锚点;在用户选中待选组件后,在开发页面上绘制用户选中的待选组件的边界和交互锚点。如此,只需通过对待选组件对应的元数据描述进行解析处理,就可以得到使用户拖拽的组件的边界和交互锚点来供用户操作,简化了开发流程,提高了开发效率,并且,通过元数据描述实现的组件拖拽交互能力,设计时画布上展示的组件不需要依赖运行时的组件,两者相互独立,提升了软件系统的可维护性。



    技术特征:

    1.一种针对组件的绘制方法,其特征在于,包括:

    2.根据权利要求1所述的针对组件的绘制方法,其特征在于,所述对各所述待选组件对应的第一元数据描述进行解析处理,得到与开发页面相匹配的待选组件的树形对象结构,包括:

    3.根据权利要求2所述的针对组件的绘制方法,其特征在于,所述基于所述第二元数据描述,确定各所述待选组件的边界和各所述待选组件的交互锚点,包括:

    4.根据权利要求1至3任一项所述的针对组件的绘制方法,其特征在于,所述确定至少一个待选组件对应的第一元数据描述,包括:

    5.根据权利要求4所述的针对组件的绘制方法,其特征在于,所述在各所述第三元数据描述中增加对应的所述待选组件可接受拖入组件的组件信息,得到各所述待选组件对应的第一元数据描述,包括:

    6.根据权利要求2所述的针对组件的绘制方法,其特征在于,所述在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点,包括:

    7.根据权利要求1至3任一项所述的针对组件的绘制方法,其特征在于,所述在所述开发页面上绘制所述用户选中的待选组件的边界和交互锚点之后,所述方法还包括:

    8.一种针对组件的绘制装置,其特征在于,包括:

    9.一种电子设备,包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序,其特征在于,所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述针对组件的绘制方法。

    10.一种非暂态计算机可读存储介质,其上存储有计算机程序,其特征在于,所述计算机程序被处理器执行时实现如权利要求1至7任一项所述针对组件的绘制方法。


    技术总结
    本发明涉及计算机技术领域,提供一种针对组件的绘制方法、装置、电子设备及存储介质,该方法包括:确定至少一个待选组件对应的第一元数据描述;对各待选组件对应的第一元数据描述进行解析处理,得到与开发页面相匹配的待选组件的树形对象结构;基于第二元数据描述,确定各待选组件的边界和各待选组件的交互锚点;响应于用户对待选组件的选中操作指令,在开发页面上绘制用户选中的待选组件的边界和交互锚点。本发明实现利用元数据描述简化对组件的拖拽交互功能的开发,提高开发效率和开发质量。

    技术研发人员:梁龙飞
    受保护的技术使用者:北京仁科互动网络技术有限公司
    技术研发日:
    技术公布日:2024/10/24
    转载请注明原文地址:https://symbian.8miu.com/read-28275.html

    最新回复(0)