CN112734876A - 图形绘制方法、装置、电子设备及存储介质 - Google Patents

图形绘制方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
CN112734876A
CN112734876A CN202110024785.6A CN202110024785A CN112734876A CN 112734876 A CN112734876 A CN 112734876A CN 202110024785 A CN202110024785 A CN 202110024785A CN 112734876 A CN112734876 A CN 112734876A
Authority
CN
China
Prior art keywords
preset
field
graph
connection
field value
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110024785.6A
Other languages
English (en)
Inventor
刘岂宇
张世芳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Aspire Digital Technologies Shenzhen Co Ltd
Original Assignee
Aspire Digital Technologies Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Aspire Digital Technologies Shenzhen Co Ltd filed Critical Aspire Digital Technologies Shenzhen Co Ltd
Priority to CN202110024785.6A priority Critical patent/CN112734876A/zh
Publication of CN112734876A publication Critical patent/CN112734876A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06TIMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/002D [Two Dimensional] image generation

Abstract

本发明公开了一种图形绘制方法、装置、电子设备及存储介质,涉及计算机技术领域,其中图形绘制方法包括:获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构;对所述图形数据结构进行解析,得到预设画布、预设元件和预设连线;确定所述预设元件和所述预设连线之间的连接关系;根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构;根据所述虚拟图形结构渲染得到目标图形。上述图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。

Description

图形绘制方法、装置、电子设备及存储介质
技术领域
本发明涉及计算机技术领域,尤其是涉及一种图形绘制方法、装置、电子设备及存储介质。
背景技术
在图制作相关软件开发过程中,为适应对图绘制的需求,通常采用的处理方法基本上是下面几种:1、在可视化界面拖拽生成图形,然后导出图片;2、使用Canvas(一个绘制图形的容器)手动绘制。上述两种方法,在图形放大的时候会导致失真,且在Canvas里面绘制的图形不能被引擎抓取,导致绘图失败。
发明内容
本发明旨在至少解决现有技术中存在的技术问题之一。为此,本发明实施例提出一种图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。
本发明实施例还提出一种图形绘制装置。
本发明实施例还提出一种电子设备。
本发明实施例还提出一种计算机可读存储介质。
根据本发明的第一方面实施例的图形绘制方法,包括:
获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构;
对所述图形数据结构进行解析,得到预设画布、预设元件和预设连线;
确定所述预设元件和所述预设连线之间的连接关系;
根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构;
根据所述虚拟图形结构渲染得到目标图形。
根据本发明第一方面实施例的图形绘制方法,至少具有如下有益效果:首先,获取待绘制的图形数据模型,图形数据模型包括图形数据结构;其次,对图形数据结构进行解析,得到预设画布、预设元件和预设连线;然后确定预设元件和预设连线之间的连接关系;再根据连接关系整合预设画布、预设元件和预设连线,生成虚拟图形结构;最后,根据虚拟图形结构渲染得到目标图形,能够自动生成图形,确保图形质量,提升用户的使用体验感。
根据本发明的一些实施例,所述根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构,包括:获取所述预设连线的连线类型;根据所述连线类型对所述预设连线进行跨线弯曲处理;根据所述连接关系整合所述预设画布、所述预设元件和跨线弯曲处理后的所述预设连线,生成所述虚拟图形结构。
根据本发明的一些实施例,所述确定所述预设元件和所述预设连线之间的连接关系,包括:获取所述预设连线对应的第一字段和第二字段;获取所述预设元件对应的第一字段值与第二字段值;根据所述第一字段、所述第二字段、所述第一字段值和所述第二字段值确定所述预设元件和所述预设连线之间的连接关系。
根据本发明的一些实施例,所述根据所述第一字段、所述第二字段、所述第一字段值和所述第二字段值确定所述预设元件和所述预设连线之间的连接关系,包括:若所述第一字段的字段值与所述第一字段值一致,且所述第二字段的字段值与所述第二字段值一致,则确定所述预设元件和所述预设连线之间的连接关系。
根据本发明的一些实施例,所述方法还包括:若所述第一字段的字段值与所述第一字段值不一致,或所述第二字段的字段值与所述第二字段值不一致,则确定所述预设元件为独立元件。
根据本发明的一些实施例,所述方法还包括:若所述第一字段和所述第二字段获取失败,则确定所述预设元件为所述独立元件。
根据本发明的一些实施例,在所述获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构之后,还包括:若所述预设数据模型的格式正确,则执行所述对所述预设数据模型进行解析的步骤。
根据本发明的第二方面实施例的图形绘制装置,包括:
获取模块,用于获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构;
解析模块,用于对所述图形数据结构进行解析,得到预设画布、预设元件和预设连线;
确定模块,用于确定所述预设元件和所述预设连线之间的连接关系;
第一生成模块,用于根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构;
第二生成模块,用于根据所述虚拟图形结构渲染得到目标图形。
根据本发明第二方面实施例的图形绘制装置,至少具有如下有益效果:通过执行本发明第一方面实施例的图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。
根据本发明第三方面实施例的电子设备,包括:至少一个处理器,以及,与所述至少一个处理器通信连接的存储器;其中,所述存储器存储有指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器执行所述指令时实现第一方面所述的图形绘制方法。
根据本发明第三方面实施例的电子设备,至少具有如下有益效果:通过执行本发明第一方面实施例的图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。
根据本发明第四方面实施例的计算机可读存储介质,所述存储介质存储有计算机可执行指令,所述计算机可执行指令用于使计算机执行第一方面所述的图形绘制方法。
根据本发明第四方面实施例的计算机可读存储介质,至少具有如下有益效果:通过执行本发明第一方面实施例的图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。
本发明的附加方面和优点将在下面的描述中部分给出,部分将从下面的描述中变得明显,或通过本发明的实践了解到。
附图说明
本发明的上述和/或附加的方面和优点从结合下面附图对实施例的描述中将变得明显和容易理解,其中:
图1为本发明实施例的图形绘制方法的流程示意图;
图2为本发明实施例的虚拟图形结构的示意图;
图3为本发明实施例的预设元件和预设连线之间的连接关系的示意图;
图4为本发明实施例的图形绘制装置的结构示意图;
图5为本发明实施例的电子设备的功能模块图。
附图标记:
获取模块400、解析模块410、确定模块420、第一生成模块430、第二生成模块440、处理器500、存储器510、数据传输模块520、摄像头530、显示屏540。
具体实施方式
下面详细描述本发明的实施例,所述实施例的示例在附图中示出,其中自始至终相同或类似的标号表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施例是示例性的,仅用于解释本发明,而不能理解为对本发明的限制。
本发明的描述中,除非另有明确的限定,设置、安装、连接等词语应做广义理解,所属技术领域技术人员可以结合技术方案的具体内容合理确定上述词语在本发明中的具体含义。
首先,对本申请中涉及的若干名词进行解析:
1、XML:eXtensible Markup Language,是一种可扩展性标识语言,能够自己创造标识,标识所表示的内容。
2、DOM:全称是Document Object Model文档对象模型,DOM是解析XML文件的官方标准,它与平台和语言无关。DOM定义了一组与平台和语言无关的接口,以便程序和脚本能够动态访问和修改XML文档内容、结构及样式(它可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构)。XML创建了标识,而DOM的作用就是告诉程序如何操作和显示这些标识。
在图制作相关软件开发过程中,为适应对图绘制的需求,通常采用的处理方法基本上是下面几种:1、在可视化界面拖拽生成图形,然后导出图片;2、使用Canvas(一个绘制图形的容器)手动绘制。上述两种方法,在图形放大的时候会导致失真,且在Canvas里面绘制的图形不能被引擎抓取,导致绘图失败。
基于此,本发明实施例提出一种图形绘制方法、装置、电子设备及存储介质,能够自动生成图形,确保图形质量,提升用户的使用体验感。
参照图1,根据本发明第一方面实施例的图形绘制方法,包括:
步骤S100,获取待绘制的图形数据模型,图形数据模型包括图形数据结构。
其中,待绘制的图形数据模型可以是预先设置的、具有特定结构的数据模型;图形数据结构可以包括:画布(graph)、连线(edges)和元件(vertexs)。可选的,待绘制的图形数据模型可以根据需求设置,例如,待绘制的图形数据模型可分为画布(graph)数据模型、连线(edges)数据模型和元件(vertexs)数据模型三类,其中,画布数据模型可以包括画布的元素(例如元素el)、元件高度、元件宽度等参数;连线数据模型可以包括连线的连线类型、位置信息(例如连线的起终点,起点位置可以表示为来源ID,终点位置可以表示为去向ID)等参数;元件数据模型可以包括元件的坐标信息、边界半径、宽度、高度、背景颜色、字体颜色等参数,从而可以由画布数据模型、连线数据模型和元件数据模型共同构成待绘制的图形数据模型,由此得到的图形数据结构可以包括画布(graph)、连线(edges)和元件(vertexs)。
步骤S110,对图形数据结构进行解析,得到预设画布、预设元件和预设连线。
其中,预设画布可以是预先设置的画布;预设元件可以是预先设置的图形中的多个元件;预设连线可以预先设置的连接两两预设元件的连线。可选的,可以控制引擎器接收传入的图形数据模型,并对该图形数据模型的图形数据结构(包括:画布(graph)、连线(edges)和元件(vertexs))进行解析,例如,假设图形数据模型可分为画布数据模型、连线数据模型和元件数据模型三类,则可以通过解析画布数据模型的图形数据结构得到预设画布,具体的,可以解析画布数据模型的画布(graph),生成画布虚拟DOM,从而得到预设画布;通过解析连线数据模型的连线(edges)得到预设连线,预设连线可以有多条;通过解析元件数据模型的元件(vertexs)得到预设元件,预设元件可以是多个,由此得到预设画布、预设元件和预设连线。
步骤S120,确定预设元件和预设连线之间的连接关系。
可选的,在解析图形数据模型时,可以通过判断预设元件和预设连线之间是否存在连接关系,即判断是否能将多个预设元件作为相应的预设连线的起终点,从而可以确定预设元件和预设连线之间的连接关系。例如,可以循环解析连线数据模型和元件数据模型,可以判断多个预设元件和多个预设连线之间是否存在对应关系,若二者存在对应关系,则可以确定预设元件和预设连线之间存在连接关系;否则可以确定预设元件和预设连线之间不存在连接关系。
步骤S130,根据连接关系整合预设画布、预设元件和预设连线,生成虚拟图形结构。
其中,虚拟图形结构可以是虚拟的DOM树结构。可选的,假设生成的预设画布为画布虚拟DOM,当预设元件和预设连线之间存在连接关系时,可以将存在连接关系的预设元件和预设连线进行连接处理;当预设元件和预设连线之间不存在连接关系时,可以将该预设元件处理为独立的元件;从而可以将上述连接处理后的预设元件和预设连线、以及独立的元件与画布虚拟DOM进行整合,形成虚拟的DOM树,即生成虚拟图形结构。具体的,请参照图2,图2示出了本发明实施例的虚拟图形结构的示意图,其中,graph为预设画布,假设预设画布为画布虚拟DOM,vertex-1为第一个预设元件,vertex-2为第二个预设元件,edge-1为预设连线,假设vertex-1、vertex-2与edge-1之间存在连接关系,则可以将vertex-1和vertex-2进行连接处理,并将连接后的vertex-1、vertex-2和edge-1与画布虚拟DOM进行整合,形成如图2所示的虚拟图形结构。
步骤S140,根据虚拟图形结构渲染得到目标图形。
其中,目标图形可以是需要通过绘制得到的图形。可选的,假设虚拟图形结构为如图2所示的虚拟DOM树,则可以将该虚拟DOM树挂载在真实的元素上面,并自动渲染图形,生成目标图形。具体的,以挂载在浏览器页面为例,可以将虚拟DOM树挂载在浏览器上,浏览器会解析虚拟DOM,创建一个DOM树,每个节点对应一个标签,然后解析各个节点的样式及布局并嵌入对应的标签中,再将DOM树挂载再画布的元素el中,构建一个渲染树,最后当构建树创建完成后,浏览器可以根据渲染树直接把页面绘制出来,即得到目标图形,实现了对目标图形的层层布局。在一些具体的实施例中,可以根据需要自由选择矢量图或者点阵图渲染,例如,对于存在连接关系的预设元件和预设连线采用矢量图进行渲染,对于不存在连接关系的预设元件和预设连线采用点阵图进行渲染,以实现在多端进行运行使用。
上述图形绘制方法,首先,获取待绘制的图形数据模型,图形数据模型包括图形数据结构;其次,对图形数据结构进行解析,得到预设画布、预设元件和预设连线;然后确定预设元件和预设连线之间的连接关系;再根据连接关系整合预设画布、预设元件和预设连线,生成虚拟图形结构;最后,根据虚拟图形结构渲染得到目标图形,能够自动生成图形,确保图形质量,提升用户的使用体验感。
在本发明的一些实施例中,根据连接关系整合预设画布、预设元件和预设连线,生成虚拟图形结构,包括:
获取预设连线的连线类型。其中,连线类型可以包括:点状、实线、双线、虚线四种类型。可选的,不同的预设连线可以对应不同的连线类型,假设预设连线为edge-1,假设edge-1对应的连线类型为点状,则可以得到预设连线的连线类型为点状;假设预设连线为edge-2,假设edge-2对应的连线类型为实线状,则可以得到预设连线的连线类型为实线。
根据连线类型对预设连线进行跨线弯曲处理。其中,跨线弯曲处理可以是当两条或多条预设连线存在相交点时,为了更加清晰的看出连线关系,其中一条或多条预设连线出现弯曲线表示跨线。可选的,当预设连线的连线类型为点状时,可以确定该预设连线与其他预设连线不存在相交点,因此不需要对预设连线进行跨线弯曲处理;当预设连线的连线类型为实线、双线或虚线时,可以根据预设连线的位置信息判断是否多条预设连线之间是否可能存在相交点,例如,根据预设连线的起终点所在的位置,判断多条预设连线之间是否相交,若多条预设连线存在相交点,则需要对其中一条或多条预设连线出现弯曲线表示跨线,即对预设连线进行跨线弯曲处理,得到跨线弯曲处理后的预设连线。
根据连接关系整合预设画布、预设元件和跨线弯曲处理后的预设连线,生成虚拟图形结构。可选的,可以根据连接关系将预设画布、预设元件和跨线弯曲处理后的预设连线进行整合,以生成精确的虚拟图形结构,实现相交的预设连线之间的跨线弯曲。
在本发明的一些实施例中,确定预设元件和预设连线之间的连接关系,包括:
获取预设连线对应的第一字段和第二字段。其中,第一字段可以是预设连线在连线数据模型中的对应的一个字段;第二字段可以是预设连线在连线数据模型中对应的另一个字段;第一字段可以不等同于第二字段。可选的,假设预设连线为edge-1,则设edge-1对应的第一字段为source、第二字段为target,则可以分别得到第一字段source和第二字段target。
获取预设元件对应的第一字段值与第二字段值。其中,第一字段值可以是预设元件在元件数据模型中对应的一个字段值;第二字段值可以是预设元件在元件数据模型中对应的另一个字段值;第一字段值可以不等同于第二字段值。可选的,假设预设元件为vertex-1和vertex-2,则设vertex-1对应的第一字段值为α、设vertex-2对应的第二字段值为β,则可以分别得到第一字段值α和第二字段值β。
根据第一字段、第二字段、第一字段值和第二字段值确定预设元件和预设连线之间的连接关系。可选的,可以通过第一字段、第二字段、第一字段值与第二字段值判断预设元件和预设连线之间是否存在对应关系,例如,判断第一字段与第一字段值是否一一对应,判断第二字段与第二字段值是否一一对应,若对应关系存在,则可以确定预设元件和预设连线之间存在连接关系;若对应关系不存在,或对应关系不完整,则可以确定预设元件和预设连线之间不存在连接关系。通过预设连线对应的第一字段和第二字段和预设元件对应的第一字段值与第二字段值来确定预设元件和预设连线之间的连接关系,可以自动、准确地得到目标图形中各个预设元件与预设连线之间的连接关系,确保生成的目标图形质量。
在本发明的一些实施例中,根据第一字段、第二字段、第一字段值和第二字段值确定预设元件和预设连线之间的连接关系,包括:
若第一字段的字段值与第一字段值一致,且第二字段的字段值与第二字段值一致,则确定预设元件和预设连线之间的连接关系。其中,第一字段的字段值可以是第一字段对应的数值;第二字段的字段值可以是第二字段对应的数值。可选的,假设第一字段为source、第二字段为target,假设第一字段值为α、第二字段值为β,若预设连线所在的连线数据模型中存在source和target,且source的字段值等于α、target的字段值等于β,则可以确定第一字段的字段值与第一字段值一致,且第二字段的字段值与第二字段值一致,由此可以判断预设元件与预设连线之间存在对应关系,从而可以确定预设元件和预设连线之间存在连接关系。如图3所示,图3示出了预设元件与预设连线之间的连接关系,其中vertex-1和vertex-2为两个预设元件,edge-1为预设连线,vertex-1、vertex-2和edge-1之间存在如图3所示的对应关系,因此可以确定vertex-1、vertex-2和edge-1之间存在连接关系,可以将vertex-1作为edge-1的起点,将vertex-2作为edge-1的终点,对edge-1进行连接处理。当且仅当第一字段的字段值与第一字段值一致、第二字段的字段值与第二字段值一致时,确定预设元件和预设连线之间存在连接关系,可以有效分析出各个预设元件和预设连线之间的关系,以生成高质量的目标图形。
在本发明的一些实施例中,根据第一字段、第二字段、第一字段值和第二字段值确定预设元件和预设连线之间的连接关系,还包括:
若第一字段的字段值与第一字段值不一致,或第二字段的字段值与第二字段值不一致,则确定预设元件为独立元件。其中,独立元件可以是与其他预设元件都不存在连接关系的预设元件。可选的,假设第一字段为source、第二字段为target,假设第一字段值为α、第二字段值为β,若source的字段值不等于α、target的字段值等于β,或source的字段值等于α、而target的字段值不等于β,或source的字段值不等于α且target的字段值不等于β,则可以确定第一字段的字段值与第一字段值不一致,且第二字段的字段值与第二字段值不一致,即预设元件与预设连线之间的对应关系不完整,无法完整判断连线edge-1的起终点,可以确定预设元件与预设连线之间不存在连接关系,因此可以确定预设元件为独立元件。当第一字段的字段值与第一字段值不一致,或第二字段的字段值与第二字段值不一致时,确定预设元件和预设连线之间的对应关系不完整,二者之间不存在连接关系,可以将不存在连接关系的预设元件确定为独立元件,由此可以有效分析出各个预设元件和预设连线之间的关系,以生成高质量的目标图形。
在本发明的一些实施例中,根据第一字段、第二字段、第一字段值和第二字段值确定预设元件和预设连线之间的连接关系,还包括:
若第一字段和第二字段获取失败,则确定预设元件为独立元件。可选的,假设第一字段为source,第二字段为target,若预设连线所在的连线数据模型中不存在source和target,则会导致第一字段和第二字段获取失败。当第一字段和第二字段获取失败时,可以确定预设元件与预设连线之间不存在对应关系,即预设元件与预设连线之间不存在连接关系,所以可以将预设元件确定为独立元件。若第一字段和第二字段获取失败,可以确定预设元件为独立元件,从而可以有效分析出各个预设元件和预设连线之间的关系,提升了用户的使用体验感。
在本发明的一些实施例中,在获取待绘制的图形数据模型,图形数据模型包括图形数据结构之后,还包括:
若预设数据模型的格式正确,则执行对预设数据模型进行解析的步骤。可选的,在控制引擎器接收传入的图形数据模型之后,可以对图像数据模型的格式进行分析,判断图形数据模型的格式是否正确,当图形模式的格式正确时,可以对图像数据模型中的图像数据结构进行解析,即执行对预设数据模型进行解析的步骤;当图形数据模型的格式错误时,可以生成异常提示,以提醒用户图形数据模型的格式错误,从而可以及时针对异常情况修正图形数据模型,确保生成的目标图形的质量。
下面以一个具体的实施例详细描述本发明实施例的图形绘制方法的过程。需要理解的是,下面描述仅是示例性说明,而不是对本发明的具体限制。
图形绘制方法,执行以下步骤:
第一步,制作图形数据模型。
图形数据模型可分为画布(graph)数据模型、连线(edges)数据模型和元件(vertexs)数据模型三大类。其中,画布数据模型可以包括画布的元素(例如元素el)、元件高度、元件宽度等参数;连线数据模型可以包括连线的唯一key(关键字,用于解析连线数据模型)、连线类型、位置信息(例如连线的起终点,起点位置可以表示为来源ID,终点位置可以表示为去向ID)、颜色等参数;元件数据模型可以包括元件的唯一key(用于解析元件数据模型)、坐标信息(如x坐标和y坐标)、宽度、高度、边界半径、背景颜色、字体颜色等参数,可以由上述画布数据模型、连线数据模型和元件数据模型构成图形数据模型。
第二步,获取并解析图形数据模型。
可以控制引擎器接收传入的图形数据模型,并对图形数据模型进行解析,具体的,可以是分别对图形数据模型中的画布数据模型、连线数据模型和元件数据模型进行解析。例如,可以解析画布数据模型,生成画布虚拟DOM;可以循环元件数据模型和连线数据模型,计算元件与连线之间是否存在连接关系。
第三步,判断元件与连线之间的连接关系。
在循环解析元件数据模型和连线数据模型时,可以解析得到以下两种情况:(1)元件与连线之间存在连接关系。当发现连线数据模型存在source和target两个字段,且这两个字段的字段值可以在元件数据模型中找到时,则表明该连线与元件存在如图3所示的对应关系,即元件与连线之间存在连接关系。当确定元件与连线之间存在连接关系后,可以根据解析得到的连线的连线类型,判断两条或多条连线之间是否存在相交点,例如,若连线的连线类型为点状,则不存在相交点;若连线的连线类型为实线、双线或虚线,则需要根据连线的来源id和去向id(即位置信息)判断两条或多条连线之间是否可能存在相交点,若确定存在相交点,则需要对该两条或多条连线的相交部分进行跨线弯曲处理,即将其中一条或多条连线出现弯曲线表示跨线,从而可以更加清晰的呈现出连线关系;若确定不存在相交点,则无需对该两条或多条连线的相交部分进行跨线弯曲处理,得到跨线弯曲后的连线;(2)元件与连线之间不存在连接关系:当连线数据模型不存在source和target两个字段,或者这两个字段在元件数据模型无法找到相应的字段值时,则可以判定该预设元件为独立的元件。
第四步,将解析得到的画布虚拟DOM、元件、连线、元件与连线之间的连接关系、跨线弯曲处理后的连线、独立的元件进行整合,并形成虚拟的DOM树。例如,假设将画布虚拟DOM(即图2中的graph)、元件vertex-1和vertex-2、连线edge-1、元件vertex-1和vertex-2和连线edge-1之间存在的连接关系进行整合,生成如图2所示的虚拟的DOM树结构。
第五步,将虚拟DOM树挂载在真实的元素上面,自动渲染图形。
具体的,以将虚拟DOM树挂在在浏览器页面为例,首先,浏览器会解析虚拟DOM树,创建一个DOM树,每个节点对应一个标签;其次,可以解析各个节点的样式及布局并嵌入对应的标签中;然后将DOM树挂载再画布的元素el中,构建一个渲染树;最后,当构建树创建完成后,浏览器就可以根据渲染树,把浏览器的页面绘制出来,生成目标图形。其中,可以根据需要自由选择矢量图或者点阵图(canvas)渲染,例如对存在连接关系的元件和连线采用矢量图渲染,对不存在连接关系的独立的元件采用点阵图渲染,从而可以在多端运行使用。
上述图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。
参照图4,根据本发明第三方面实施例的图形绘制装置,包括:
获取模块400,用于获取待绘制的图形数据模型,图形数据模型包括图形数据结构;
解析模块410,用于对图形数据结构进行解析,得到预设画布、预设元件和预设连线;
确定模块420,用于确定预设元件和预设连线之间的连接关系;
第一生成模块430,用于根据连接关系整合预设画布、预设元件和预设连线,生成虚拟图形结构;
第二生成模块440,用于根据虚拟图形结构渲染得到目标图形。
上述图形绘制装置,通过执行本发明第一方面实施例的图形绘制方法,能够自动生成图形,确保图形质量,提升用户的使用体验感。
参照图5,本发明第三方面实施例还提供了一种电子设备功能模块图,包括:至少一个处理器500,以及与至少一个处理器500通信连接的存储器510;还可以包括数据传输模块520、摄像头530、显示屏540。
其中,处理器500通过调用存储器510中存储的计算机程序,用于执行第一方面实施例中的图形绘制方法。
存储器作为一种非暂态存储介质,可用于存储非暂态软件程序以及非暂态性计算机可执行程序,如本发明第一方面实施例中的图形绘制方法。处理器通过运行存储在存储器中的非暂态软件程序以及指令,从而实现上述第一方面实施例中的图形绘制方法。
存储器可以包括存储程序区和存储数据区,其中,存储程序区可存储操作系统、至少一个功能所需要的应用程序;存储数据区可存储执行上述第一方面实施例中的图形绘制方法。此外,存储器可以包括高速随机存取存储器,还可以包括非暂态存储器,例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施方式中,存储器可选包括相对于处理器远程设置的存储器,这些远程存储器可以通过网络连接至该终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
实现上述第一方面实施例中的图形绘制方法所需的非暂态软件程序以及指令存储在存储器中,当被一个或者多个处理器执行时,执行上述第一方面实施例中的图形绘制方法。
本发明第四方面实施例还提供了计算机可读存储介质,存储有计算机可执行指令,该计算机可执行指令用于:执行第一方面实施例中的图形绘制方法。
在一些实施例中,该存储介质存储有计算机可执行指令,该计算机可执行指令被一个或多个控制处理器执行,例如,被第三方面实施例的电子设备中的一个处理器执行,可使得上述一个或多个处理器执行上述第一方面实施例中的图形绘制方法。
上面结合附图对本发明实施例作了详细说明,但是本发明不限于上述实施例,在所属技术领域普通技术人员所具备的知识范围内,还可以在不脱离本发明宗旨的前提下作出各种变化。
以上所描述的装置实施例仅仅是示意性的,其中作为分离部件说明的单元可以是或者也可以不是物理上分开的,即可以位于一个地方,或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。
本领域普通技术人员可以理解,上文中所公开方法中的全部或某些步骤、系统可以被实施为软件、固件、硬件及其适当的组合。某些物理组件或所有物理组件可以被实施为由处理器,如中央处理器、数字信号处理器或微处理器执行的软件,或者被实施为硬件,或者被实施为集成电路,如专用集成电路。这样的软件可以分布在计算机可读介质上,计算机可读介质可以包括计算机存储介质(或非暂时性介质)和通信介质(或暂时性介质)。如本领域普通技术人员公知的,术语计算机存储介质包括在用于存储信息(诸如计算机可读指令、数据结构、程序模块或其他数据)的任何方法或技术中实施的易失性和非易失性、可移除和不可移除介质。计算机存储介质包括但不限于RAM、ROM、EEPROM、闪存或其他存储器技术、CD-ROM、数字多功能盘(DVD)或其他光盘存储、磁盒、磁带、磁盘存储或其他磁存储装置、或者可以用于存储期望的信息并且可以被计算机访问的任何其他的介质。此外,本领域普通技术人员公知的是,通信介质通常包含计算机可读指令、数据结构、程序模块或者诸如载波或其他传输机制之类的调制数据信号中的其他数据,并且可包括任何信息递送介质。
在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示意性实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。
尽管已经示出和描述了本发明的实施例,本领域的普通技术人员可以理解:在不脱离本发明的原理和宗旨的情况下可以对这些实施例进行多种变化、修改、替换和变型,本发明的范围由权利要求及其等同物限定。

Claims (10)

1.图形绘制方法,其特征在于,包括:
获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构;
对所述图形数据结构进行解析,得到预设画布、预设元件和预设连线;
确定所述预设元件和所述预设连线之间的连接关系;
根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构;
根据所述虚拟图形结构渲染得到目标图形。
2.根据权利要求1所述的方法,其特征在于,所述根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构,包括:
获取所述预设连线的连线类型;
根据所述连线类型对所述预设连线进行跨线弯曲处理;
根据所述连接关系整合所述预设画布、所述预设元件和跨线弯曲处理后的所述预设连线,生成所述虚拟图形结构。
3.根据权利要求1所述的方法,其特征在于,所述确定所述预设元件和所述预设连线之间的连接关系,包括:
获取所述预设连线对应的第一字段和第二字段;
获取所述预设元件对应的第一字段值与第二字段值;
根据所述第一字段、所述第二字段、所述第一字段值和所述第二字段值确定所述预设元件和所述预设连线之间的连接关系。
4.根据权利要求3所述的方法,其特征在于,所述根据所述第一字段、所述第二字段、所述第一字段值和所述第二字段值确定所述预设元件和所述预设连线之间的连接关系,包括:
若所述第一字段的字段值与所述第一字段值一致,且所述第二字段的字段值与所述第二字段值一致,则确定所述预设元件和所述预设连线之间的连接关系。
5.根据权利要求4所述的方法,其特征在于,所述方法还包括:
若所述第一字段的字段值与所述第一字段值不一致,或所述第二字段的字段值与所述第二字段值不一致,则确定所述预设元件为独立元件。
6.根据权利要求5所述的方法,其特征在于,所述方法还包括:
若所述第一字段和所述第二字段获取失败,则确定所述预设元件为所述独立元件。
7.根据权利要求1所述的方法,其特征在于,在所述获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构之后,还包括:
若所述预设数据模型的格式正确,则执行所述对所述预设数据模型进行解析的步骤。
8.图形绘制装置,其特征在于,包括:
获取模块,用于获取待绘制的图形数据模型,所述图形数据模型包括图形数据结构;
解析模块,用于对所述图形数据结构进行解析,得到预设画布、预设元件和预设连线;
确定模块,用于确定所述预设元件和所述预设连线之间的连接关系;
第一生成模块,用于根据所述连接关系整合所述预设画布、所述预设元件和所述预设连线,生成虚拟图形结构;
第二生成模块,用于根据所述虚拟图形结构渲染得到目标图形。
9.电子设备,其特征在于,包括:
至少一个处理器,以及,
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器执行所述指令时实现如权利要求1至7任一项所述的图形绘制方法。
10.计算机可读存储介质,其特征在于,所述存储介质存储有计算机可执行指令,所述计算机可执行指令用于使计算机执行如权利要求1至7任一项所述的图形绘制方法。
CN202110024785.6A 2021-01-08 2021-01-08 图形绘制方法、装置、电子设备及存储介质 Pending CN112734876A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110024785.6A CN112734876A (zh) 2021-01-08 2021-01-08 图形绘制方法、装置、电子设备及存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110024785.6A CN112734876A (zh) 2021-01-08 2021-01-08 图形绘制方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
CN112734876A true CN112734876A (zh) 2021-04-30

Family

ID=75589921

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110024785.6A Pending CN112734876A (zh) 2021-01-08 2021-01-08 图形绘制方法、装置、电子设备及存储介质

Country Status (1)

Country Link
CN (1) CN112734876A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115079916A (zh) * 2022-06-15 2022-09-20 广州市玄武无线科技股份有限公司 可视化集成编排画布绘制方法、系统、终端设备及介质

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102663002A (zh) * 2012-03-16 2012-09-12 掌中帷幄(北京)科技有限公司 结构化文档的渲染方法及系统
CN107609175A (zh) * 2017-09-28 2018-01-19 华为技术有限公司 Dom树生成方法以及相关设备
CN107783810A (zh) * 2012-11-20 2018-03-09 联想(北京)有限公司 显示控制方法和电子设备
CN108228188A (zh) * 2018-01-08 2018-06-29 武汉斗鱼网络科技有限公司 一种视图组件处理方法、电子设备及可读存储介质
CN110866320A (zh) * 2019-10-18 2020-03-06 珠海许继芝电网自动化有限公司 一种智能台区图形自动生成方法及系统
CN111949915A (zh) * 2020-08-18 2020-11-17 河南大学 一种遥感产品生产流程的可视化定制方法及系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102663002A (zh) * 2012-03-16 2012-09-12 掌中帷幄(北京)科技有限公司 结构化文档的渲染方法及系统
CN107783810A (zh) * 2012-11-20 2018-03-09 联想(北京)有限公司 显示控制方法和电子设备
CN107609175A (zh) * 2017-09-28 2018-01-19 华为技术有限公司 Dom树生成方法以及相关设备
CN108228188A (zh) * 2018-01-08 2018-06-29 武汉斗鱼网络科技有限公司 一种视图组件处理方法、电子设备及可读存储介质
CN110866320A (zh) * 2019-10-18 2020-03-06 珠海许继芝电网自动化有限公司 一种智能台区图形自动生成方法及系统
CN111949915A (zh) * 2020-08-18 2020-11-17 河南大学 一种遥感产品生产流程的可视化定制方法及系统

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
孙彻: "基于mxGraph的遥感产品生产在线流程定制的设计与实现", 中国优秀硕士学位论文全文数据库 工程科技Ⅱ辑, pages 028 - 171 *
薛娜: "基于mxGraph的计算机网络结构建模工具的研究与实现", 中国优秀硕士学位论文全文数据库 信息科技辑, pages 139 - 33 *

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN115079916A (zh) * 2022-06-15 2022-09-20 广州市玄武无线科技股份有限公司 可视化集成编排画布绘制方法、系统、终端设备及介质

Similar Documents

Publication Publication Date Title
US20220253588A1 (en) Page processing method and related apparatus
CN109254773B (zh) 骨架页面生成方法、装置、设备和存储介质
CN109254771B (zh) 一种监控页面生成方法和装置
CN112118286B (zh) 基于mdc多线程链路追踪方法、装置及计算机可读存储介质
CN111200545B (zh) 一种智能设备接入方法及装置
CN111367518B (zh) 页面布局方法、装置、计算设备及计算机存储介质
CN110765015A (zh) 一种对被测应用进行测试的方法和电子设备
CN113190781A (zh) 页面布局方法、装置、设备及存储介质
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN114218890A (zh) 页面渲染方法、装置、电子设备以及存储介质
CN111737618A (zh) 用于Web端的矢量图显示方法、装置和计算机设备
CN109871205B (zh) 界面代码调整方法、装置、计算机装置及存储介质
CN109389659A (zh) Ppt中数学公式的渲染方法、装置、存储介质及终端设备
GB2524047A (en) Improvements in and relating to rendering of graphics on a display device
CN112734876A (zh) 图形绘制方法、装置、电子设备及存储介质
CN111970570B (zh) 一种提示视频内容互动位置的方法及装置
CN107197354B (zh) 用户界面控制方法、装置和智能电视
CN112632425A (zh) 一种离线资源文件的生成方法、装置、设备及存储介质
CN112417340A (zh) 网页图片处理方法、计算机设备和存储介质
CN113934481A (zh) 一种通知信息的推送方法、智能终端及存储介质
CN109191379B (zh) 一种全景拼接的语义标注方法、系统、终端和存储介质
CN105260353A (zh) 一种移动终端的排版方法及装置
CN115756466A (zh) 视图检查方法及装置、电子设备及存储介质
CN108021567B (zh) 浏览器自适应自定义字体的方法及装置
CN111399836B (zh) 修改页面属性的方法及装置

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination