一种可视化图像的更新方法、装置、电子装置和存储介质

技术领域

本申请涉及计算机技术领域，特别是涉及可视化图像的更新方法、装置、电子装置和存储介质。

背景技术

术语解释：

可伸缩矢量图形(Scalable Vector Graphics，简称为SVG)技术用来定义用于网络的基于矢量的图形，它使用XML格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有所损失，是万维网联盟的标准，与诸如DOM和XSL之类的W3C标准是一个整体。

随着数字经济的发展，数据作为一种重要的资产，已经变得越来越重要。其中，作为数据分析和数据利用的重要一环，数据可视化变得越来越重要。其中对于web端的数据可视化开发者而言，一些和业务紧紧相关的，需要高度定制的图表工作逐渐增多，需要有一套高效的数据可视化开发方法。

目前市面上可视化图像的更新方法主要包括：d3(data driven document)，即数据驱动文档，是一种基于SVG技术的矢量图形库，其显著的特点在于，熟悉h5、SVG技术的开发人员可以迅速上手，脱胎于jquery时代的函数链式调用的使用方式，具有灵活度较高的定制能力，主要提供了一系列的函数库。

目前的技术方案中，d3开发模式更新可视化图像时，存在计算量大、使性能上很容易陷入瓶颈的问题。

发明内容

本申请实施例提供了一种可视化图像的更新方法、装置、电子装置和存储介质，以至少解决相关技术中d3开发模式更新可视化图像时存在计算量大的问题。

第一方面，本申请实施例提供了一种可视化图像的更新方法，包括：获取可视化图像以及可视化图像的对象树，其中，可视化图像包括层级关系由下至上的绘制基类、容器类和舞台类交互对象，对象树依据交互对象的层级关系生成；

获取操作可视化图像中的交互对象所产生的交互操作信息，并将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态；

根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

在其中一些实施例中，在重绘被标记为第一状态的所有的交互对象后包括：将对象树中重绘的交互对象的状态标记为第二状态。

在其中一些实施例中，交互操作信息包括：交互对象的属性，和/或交互对象的参数信息。

在其中一些实施例中，重绘被标记为第一状态的所有的交互对象包括：

从绘制基类一层开始判断是否标记为第一状态，若是，标记为第一状态的绘制基类被重新绘制，并依据可视化图像的层级关系重新绘制被标记为第一状态的上级交互对象；判断标记为第一状态的舞台类是否被重新绘制，若是，结束重新绘制过程。

在其中一些实施例中，将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态包括：判断在被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同，若不相同，则将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态。

在其中一些实施例中，根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像包括：按照设定周期判断在被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同，若不相同，则根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

在其中一些实施例中，操作交互对象所产生的交互操作信息通过OSC技术缓存。

第二方面，本申请实施例提供了一种可视化图像的更新装置，装置包括：获取模块，用于获取可视化图像以及可视化图像的对象树，其中，可视化图像包括层级关系由下至上的绘制基类、容器类和舞台类交互对象，对象树依据交互对象的层级关系生成；

标记模块，用于获取操作可视化图像中的交互对象所产生的交互操作信息，并将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态；

重绘模块，用于根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

第三方面，本申请实施例提供了一种电子装置，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现如上述第一方面的一种可视化图像的更新方法。

第四方面，本申请实施例提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述第一方面的一种可视化图像的更新方法。

相比于相关技术，本申请实施例提供的可视化图像的更新方法、装置、电子装置和存储介质，通过获取可视化图像的对象树，将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态，根据交互操作信息，重绘被标记为第一状态的所有的交互对象，解决可视化图像的更新时，计算量大的问题，减少重新绘制可视化图像的性能消耗。

本申请的一个或多个实施例的细节在以下附图和描述中提出，以使本申请的其他特征、目的和优点更加简明易懂。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的一种可视化图像的更新方法的终端的硬件结构框图；

图2是根据本申请实施例的一种可视化图像的更新方法的流程图；

图3是根据本申请优选实施例的一种可视化图像的更新方法的流程图；

图4是根据本申请实施例的一种可视化图像的更新装置的结构框图；

图5是根据本申请优选实施例的可视化图像可交互对象的继承关系图；

图6是根据本申请优选实施例的需要绘制的可视化图像；

图7是根据本申请优选实施例的对象树图；

图8是根据本申请优选实施例的脏值树图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。本申请所涉及的“连接”、“相连”、“耦接”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电气的连接，不管是直接的还是间接的。本申请所涉及的“多个”是指大于或者等于两个。“和/或”描述关联对象的关联关系，表示可以存在三种关系，例如，“A和/或B”可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。本申请所涉及的术语“第一”、“第二”、“第三”等仅仅是区别类似的对象，不代表针对对象的特定排序。

术语解释：

脏值：一个布尔值，有true和false两种状态，标记可视化图像中的可操作对象是否需要更新，若是true，表示可视化图像中的可操作对象需要更新。

OSC：off screen canvas技术的简写，是web canvas技术的使用中，利用未加入可视部分的画布(也就是离屏画布)来缓存绘制内容，通过最终绘制一次成图的技术，可以减少绘制的性能消耗。

本实施例提供的方法实施例可以在终端、计算机或者类似的运算装置中执行。以运行在终端上为例，图1是本发明实施例的可视化图像的更新方法的终端的硬件结构框图。如图1所示，包括处理器11以及存储有计算机程序指令的存储器12。

具体地，上述处理器11可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器12可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器12可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器12可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器12可在数据处理装置的内部或外部。在特定实施例中，存储器12是非易失性(Non-Volatile)存储器。在特定实施例中，存储器12包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器12可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器11所执行的可能的计算机程序指令。

处理器11通过读取并执行存储器12中存储的计算机程序指令，以实现上述实施例中的任意一种可视化图像的跟新方法。

在其中一些实施例中，终端还可包括通信接口13和总线10。其中，如图1所示，处理器11、存储器12、通信接口13通过总线10连接并完成相互间的通信。

通信接口13用于实现本申请实施例中各模块、装置、单元和/或设备之间的通信。通信接口13还可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线10包括硬件、软件或两者，将终端的部件彼此耦接在一起。总线10包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(ControlBus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线10可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(FrontSide Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线10可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

本实施例提供了一种可视化图像的更新方法，图2是根据本申请实施例的可视化图像的更新方法的流程图，如图2所示，该流程包括如下步骤：

步骤S201，获取可视化图像以及可视化图像的对象树，其中，可视化图像包括层级关系由下至上的绘制基类、容器类和舞台类交互对象，对象树依据交互对象的层级关系生成。

步骤S202，获取操作可视化图像中的交互对象所产生的交互操作信息，并将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态。

在其中一些实施例中，交互操作信息包括：交互对象的属性，和/或交互对象的参数信息。将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态包括：判断在被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同，若不相同，则将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态，若相同，说明被操作的交互对象已经被重新绘制，则将对象树中被操作的交互对象记为第二状态。通过上述方式，未被重新绘制的被操作的交互对象才会标记为第一状态，防止被操作的交互对象被二次绘制，节省了计算量。

在其中一个实施例中，操作交互对象所产生的交互操作信息通过OSC技术缓存。通过上述方式，利用未加入可视化图像的画布(离屏画布)来缓存交互操作信息，最后通过一次绘制成图的技术，可以减少重新绘制的性能消耗。

步骤S203，根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

在其中一些实施例中，重绘被标记为第一状态的所有的交互对象包括：

从绘制基类一层开始判断是否标记为第一状态，若是，标记为第一状态的绘制基类被重新绘制，并依据可视化图像的层级关系重新绘制被标记为第一状态的上级交互对象；在重绘被标记为第一状态的所有的交互对象后，将对象树中重绘的交互对象的状态标记为第二状态；判断标记为第一状态的舞台类是否被重新绘制，若是，结束重新绘制过程。

如果绘制基类层为第一状态，绘制基类的上级容器类和舞台类都会被标记为第一状态，从标记为第一状态的绘制基类重新绘制，然后重新绘制基类的上级容器类，最后重新绘制容器类的上级舞台类，当判断舞台类被重新绘制，整个绘制过程结束。如果绘制基类的层为第二状态，说明外部没有操作改变可交互对象，无需进行重新绘制过程。通过上述方式，从绘制基类开始逐级向上绘制，大量减少了重绘提升了性能。

在其中一些实施例中，根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像包括：按照设定周期判断在被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同，若不相同，则根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

现设置周期为每秒刷新60帧可视化图像，刷新每一帧可视化图像，当有外部操作改变可交互对象时，判断被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同，若不相同，则根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。通过上述方式，可以监听每一帧可视化图像，实现对每一帧有变化的可视化图像进行重新绘制。

通过上述步骤，解决可视化图像的更新时，存在计算量大、性能上很容易陷入瓶颈的问题。

下面通过优选实施例对本申请进行描述和说明。

现假设有一个外部操作，需要改变三角形triangle颜色和箭头arrow颜色，第一状态为true，第二状态为false为例展示可视化图像的更新过程，图3是根据本申请优选实施例的可视化图像的更新方法流程图，如图3所示，该流程包括如下步骤：

步骤S301，获取可视化图像以及可视化图像的对象树。

在其中一个实施例中，将可视化图像的对象按照类型做一个细分，通过如图5的继承关系，我们确定了三种基本的大类：stage(舞台类)、container(容器类)和shape(绘制基类)，stage直接呈现，container可以包裹其他的container和shape，shape不具备包裹能力。根据Stage、Container和Shape绑定的继承关系生成一棵对象树，其中，stage是container的父级，container是shape的父级。

假设需要绘制如图6所示的内容：舞台中存在三个板块，左上角的container1，包含了一个五角星star，左下角container2，包含了一个箭头arrow，右侧的container3，包含一个三角形triangle和一个圆形circle，依据stage、container和shape绑定的继承关系生成一棵对象树如图7所示。通过上述方式，生成可视化图像的对象树，为后续的可视化图像的更新做准备。

步骤S302，获取操作可视化图像中的交互对象所产生的交互操作信息，并将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态。

现假设获取的对象树如图7所示，现在有一个外部操作，改变三角形triangle颜色和箭头arrow颜色，当判断有外部操作需要改变三角形和箭头的颜色时，三角形和箭头所在的一层的脏值状态标定为true，并开始向上查询是否有父级，发现有父级container3并将container3层的脏值状态标定为true，container3层向上查询是否有父级，发现有父级stage并将stage层的脏值状态标定为true，stage层向上查询是否有父级，发现stage层没有父级，结束标记流程，通过上述标记流程，triangle、container3、stage的脏值状态都为true，运用相同的方法，当有外部操作修改箭头的颜色时，进行标记后arrow、container2和stage的脏值状态标记为true。通过上述方式，被操作的可交互对象和被操作的可交互对象的父级被标记为true，为后续重绘脏值状态为true的可交互对象提供了准备。

在其中一个实施例中，交互操作信息包括，交互对象的属性，和/或交互对象的参数信息，交互对象的属性包括形状和颜色等，交互操作信息包括矩形的宽高、圆心的半径和圆的半径大小等，交互操作信息通过OSC技术缓存。通过上述方式，利用未加入可视化图像的画布(离屏画布)来缓存交互操作信息，最后通过一次绘制成图的技术，可以减少重新绘制的性能消耗。

步骤S303，根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

每一帧刷新去查询对象树的脏值状态情况并生成脏值树，脏值树的每一层都只有一个数组，里面包含了所有需要重绘的内容，假设现在有一个外部操作，改变三角形triangle颜色和箭头arrow颜色，根据图7对象树生成的脏值树如图8所示。从绘制基类层开始重新绘制，首先根据外部操作改变三角形triangle颜色和箭头arrow颜色，绘制完成后将triangle和arrow的脏值状态标记为false，然后将箭头绘制到container2，将三角形和未变动的圆形绘制到container3，container2和container3层绘制完成后将脏值状态标记为false，最后将未变动的container1和修改完成的container2、container3绘制到舞台上，舞台脏值状态标记为false，一次由外部操作形成的可视化图像更新的流程结束。通过上述方式，没有改动的可交互对象，可以用脏值状态区分出来，从而减少绘制工作的计算量，提升重新绘制的性能。

本实施例还提供了一种可视化图像的更新装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”、“单元”、“子单元”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

图4是根据本申请实施例的一种可视化图像的更新装置的结构框图，如图4所示，该装置包括：

获取模块41，用于获取可视化图像以及可视化图像的对象树，其中，可视化图像包括层级关系由下至上的绘制基类、容器类和舞台类交互对象，对象树依据交互对象的层级关系生成。

标记模块42，连接至获取模块41，用于获取操作可视化图像中的交互对象所产生的交互操作信息，并将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态。

重绘模块43，连接至标记模块42，用于根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

在其中一些实施例中，上述的交互操作信息包括，交互对象的属性，和/或交互对象的参数信息，交互操作信息通过OSC技术缓存。

在其中一些实施例中，标记模块42用于：判断在被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同；若不相同，则将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态。

在其中一些实施例中，重绘模块43包括：绘制单元，用于从绘制基类一层开始判断是否标记为第一状态，若是，标记为第一状态的绘制基类被重新绘制，并依据可视化图像的层级关系重新绘制被标记为第一状态的上级交互对象；判断标记为第一状态的舞台类是否被重新绘制，若是，结束重新绘制过程。状态改变单元，连接至绘制单元，用于在重绘被标记为第一状态的所有的交互对象后，将对象树中重绘的交互对象的状态标记为第二状态。

在其中一些实施例中，重绘模块43用于：按照设定周期判断在被操作前后对象树中被操作的交互对象的属性和/或参数信息是否相同，若不相同，则根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

需要说明的是，上述各个模块可以是功能模块也可以是程序模块，既可以通过软件来实现，也可以通过硬件来实现。对于通过硬件来实现的模块而言，上述各个模块可以位于同一处理器中；或者上述各个模块还可以按照任意组合的形式分别位于不同的处理器中。

本实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输设备以及输入输出设备，其中，该传输设备和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，获取可视化图像以及可视化图像的对象树，其中，可视化图像包括层级关系由下至上的绘制基类、容器类和舞台类交互对象，对象树依据交互对象的层级关系生成；

S2，获取操作可视化图像中的交互对象所产生的交互操作信息，并将对象树中被操作的交互对象以及与被操作的交互对象具有继承关系的上级交互对象的状态标记为第一状态；

S3，根据交互操作信息，重绘被标记为第一状态的所有的交互对象，得到更新后的可视化图像。

需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

另外，结合上述实施例中的一种可视化图像的更新方法，本申请实施例可提供一种存储介质来实现。该存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种可视化图像的更新方法。

本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。