CN115878935B - 一种图表的局部刷新方法、系统、装置、设备及介质 - Google Patents
一种图表的局部刷新方法、系统、装置、设备及介质 Download PDFInfo
- Publication number
- CN115878935B CN115878935B CN202310043066.8A CN202310043066A CN115878935B CN 115878935 B CN115878935 B CN 115878935B CN 202310043066 A CN202310043066 A CN 202310043066A CN 115878935 B CN115878935 B CN 115878935B
- Authority
- CN
- China
- Prior art keywords
- target
- chart
- canvas
- data
- user input
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 50
- 230000006870 function Effects 0.000 claims description 24
- 238000004590 computer program Methods 0.000 claims description 16
- 238000010586 diagram Methods 0.000 claims description 16
- 230000009466 transformation Effects 0.000 claims description 14
- 238000003860 storage Methods 0.000 claims description 12
- 238000013519 translation Methods 0.000 claims description 11
- 238000004891 communication Methods 0.000 description 8
- 238000012545 processing Methods 0.000 description 6
- 208000018747 cerebellar ataxia with neuropathy and bilateral vestibular areflexia syndrome Diseases 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 238000010276 construction Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000003993 interaction Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000010422 painting Methods 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 238000013473 artificial intelligence Methods 0.000 description 1
- 230000000903 blocking effect Effects 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000463 effect on translation Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000011521 glass Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000010801 machine learning Methods 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000004806 packaging method and process Methods 0.000 description 1
- 238000004091 panning Methods 0.000 description 1
- 239000004065 semiconductor Substances 0.000 description 1
- 230000001953 sensory effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本发明公开了一种图表的局部刷新方法、系统、装置、设备及介质。图表的局部刷新方法,包括:根据配置参数以及非图片格式的全局图表数据,显示目标局部图表;根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据;根据目标重绘数据刷新目标局部图表。本发明实施例的技术方案能够保证调用简单的前提下,降低图表的内存消耗以及网页的卡顿次数。
Description
技术领域
本发明涉及计算机技术领域,尤其涉及一种图表的局部刷新方法、系统、装置、设备及介质。
背景技术
随着计算机技术的发展,通过网页前端架构对图表的展示的应用越来越广泛。
在使用网页前端架构展示工作图表(比如大型铁路的运行图以及站场表示图等)时,由于显示图表的尺寸过大,会占用大量的内存空间。当内存占用达到一定的瓶颈之后会导致网页应用程序卡顿,严重的情况下甚至会导致浏览器直接崩溃。
发明内容
本发明提供了一种图表的局部刷新方法、系统、装置、设备及介质,能够保证调用简单的前提下,降低图表的内存消耗以及网页的卡顿次数。
根据本发明的一方面,提供了一种图表的局部刷新方法,包括:
根据配置参数以及非图片格式的全局图表数据,显示目标局部图表;
根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据;
根据目标重绘数据刷新目标局部图表。
可选的,在根据配置参数以及非图片格式的全局图表数据,显示目标局部图表之前,还可以包括:
在业务逻辑模块启用自定义画面模板中的目标画面模板时,获取目标画面模板;
其中,目标画面模板包括canvas绘制图表名称、时间轴以及画布。
可选的,根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,可以包括:
根据配置参数,确定初始偏移量、初始缩放比例、canvas尺寸以及canvas层;
根据目标画面模板、初始偏移量、初始缩放比例、canvas尺寸、canvas层以及非图片格式的全局图表数据,显示目标局部图表。
可选的,根据当前用户输入指令,生成事件刷新信号,可以包括:
在当前用户输入指令为平移指令时,确定位置偏移量数据;
根据位置偏移量数据以及画笔变形函数,确定变换坐标原点,并根据变换坐标原点,生成第一事件刷新信号。
可选的,根据当前用户输入指令,生成事件刷新信号,可以包括:
在当前用户输入指令为缩放指令时,确定缩放比例数据;
根据缩放比例数据以及画布缩放函数,对当前画布进行缩放,并在当前画布进行缩放的同时,生成第二事件刷新信号。
可选的,在根据目标重绘数据刷新目标局部图表之后,还可以包括:获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据;
根据目标调整数据,再次生成事件刷新信号。
根据本发明的另一方面,提供了一种图表的局部刷新系统,可以包括目标canvas组件以及业务逻辑模块,其中,
目标画布canvas组件,用于执行如本发明任一实施例中的图表的局部刷新方法;
业务逻辑模块,用于在接收目标canvas组件发送的事件刷新信号时,根据事件刷新信号,确定目标重绘数据,并将目标重绘数据发送至目标canvas组件。
根据本发明的另一方面,提供了一种图表的局部刷新装置,包括:
目标局部图表显示模块,用于根据配置参数以及非图片格式的全局图表数据,显示目标局部图表;
数据接收模块,用于根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据;
数据刷新模块,用于根据目标重绘数据刷新目标局部图表。
根据本发明的另一方面,提供了一种电子设备,所述电子设备包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的计算机程序,所述计算机程序被所述至少一个处理器执行,以使所述至少一个处理器能够执行本发明任一实施例所述的图表的局部刷新方法。
根据本发明的另一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使处理器执行时实现本发明任一实施例所述的图表的局部刷新方法。
本发明实施例的技术方案,通过根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,进而根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据,从而根据目标重绘数据刷新目标局部图表。本方案可以仅显示全局图表中的局部图表,无需消耗系统内存对图片格式的全局图表进行存储显示,并且根据当前用户输入指令以及业务逻辑模块,实现目标局部图表刷新,无需每次使用canvas时为了解析当前用户输入指令进行代码编写,降低了代码调用的复杂度,解决了现有技术中图表展示内存消耗大的问题,能够保证调用简单的前提下,降低图表的内存消耗以及网页的卡顿次数。
应当理解,本部分所描述的内容并非旨在标识本发明的实施例的关键或重要特征,也不用于限制本发明的范围。本发明的其它特征将通过以下的说明书而变得容易理解。
附图说明
为了更清楚地说明本发明实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本发明实施例一提供的一种图表的局部刷新方法的流程图;
图2为本发明实施例二提供的一种图表的局部刷新方法的流程图;
图3是本发明实施例二提供的一种目标画面模板的示意图;
图4为本发明实施例三提供的一种图表的局部刷新系统的示意图;
图5是本发明实施例三提供的一种实际canvas与虚拟canvas的对比图;
图6为本发明实施例四提供的一种图表的局部刷新装置的结构示意图;
图7示出了可以用来实施本发明的实施例的电子设备的结构示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案,下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分的实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本发明保护的范围。
需要说明的是,本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
实施例一
图1为本发明实施例一提供的一种图表的局部刷新方法的流程图,本实施例可适用于降低图表显示大量占用内存的情况,该方法可以由canvas组件来执行,该canvas组件可配置于电子设备中。如图1所示,该方法包括:
S110、根据配置参数以及非图片格式的全局图表数据,显示目标局部图表。
其中,配置参数可以是预先设置的,用于初始化canvas组件的参数。全局图表数据可以是绘制完整图表(全局图表)的数据。目标局部图表可以是显示屏中canvas展示出的图表,属于全局图表的一部分。
基于数据驱动的思想,只需要保证相关业务数据在内存中的完整性和实时性,界面显示不需要与数据完全一致,为了减少canvas内存的消耗,可以在存储器中存储非图片格式的全局图表数据,通过canvas对全局图表数据中的局部数据以图形进行展示,避免对全局图表以图片格式展示存储存在的内容占用大的问题,即可以通过封装一个canvas组件,仅展示所需的全局图表中的部分图表。
而原生canvas的功能较为单调,使用并不是很便捷,因此可以根据展示需求将多种功能封装于canvas组件中。例如,可以将拖拽、缩放以及画图模板封装于canvas组件,封装后的canvas组件相当于HTML5的canvas标签基础上封装出的一个高性能组件,能够减小实际绘制的canvas的尺寸大小,大大降低了内存消耗。封装后的canvas组件与原生canvas基本一致,调用简单,同时提供各种参数配置,方便适配多种不同的场景。封装后的canvas组件易于使用,旧有的程序也能以较小的成本更换为本canvas组件,本canvas组件具有良好的可靠性和扩展性,不依赖其他程序,可以独立进行开发和升级,升级过程中可保持向下兼容。
示例性的,大型铁路工作图表往往占用较大内存,通过本方案中封装后的canvas组件可以对铁路工作图表中所需关注的具体路段进行针对性的展示,无需将铁路工作图表进行全局展示,降低系统内存消耗。
在本发明实施例中,canvas组件可以先获取配置参数,从而根据配置参数进行初始化,初始化之后的canvas组件可以从非图片格式的全局图表数据中,确定显示目标局部图表所需的数据,进而根据显示目标局部图表所需的数据,显示目标局部图表。
由于最多可以呈现给用户一块显示屏大小的显示界面,而绘制的全局图表往往大于显示界面,导致canvas内存的消耗。因此本方案中仅绘制一块显示屏大小的画布即可,当图表平移或缩放时,通过刷新canvas展现图表的不同部分。
S120、根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据。
其中,当前用户输入指令可以是用户向canvas组件发送的调整显示内容的指令。可选的,用户可以通过鼠标按键、鼠标滚轮,以及Ctrl键加鼠标滚轮的组合形式等向canvas组件发送当前用户输入指令。事件刷新信号可以是canvas组件发送给业务逻辑模块的,表征canvas组件需要进行重绘的信号。目标重绘数据可以是业务逻辑模块发送至canvas组件的数据,用于对canvas组件显示的目标局部图表进行刷新。业务逻辑模块可以是具有canvas组件数据重绘逻辑的模块,用于对目标局部图表进行刷新。
在本发明实施例中,当canvas组件接收到用户发送的当前用户输入指令后,可以生成事件刷新信号,并将事件刷新信号发送至业务逻辑模块。当业务逻辑模块接收到事件刷新信号之后,可以对事件刷新信号进行解析,并根据解析结果以及重绘逻辑,确定与当前用户输入指令匹配的目标重绘数据,进一步将目标重绘数据发送至canvas组件。
S130、根据目标重绘数据刷新目标局部图表。
在本发明实施例中,canvas组件接收到业务逻辑模块发送的目标重绘数据之后,可以对当前目标局部图表进行刷新,从而在显示屏上显示与当前用户指令匹配的局部图表。
示例性的,假设当前用户指令为对当前目标局部图表放大两倍,则根据目标重绘数据的刷新,可以将显示屏中显示的当前目标局部图表放大两倍。
本发明实施例的技术方案,通过根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,进而根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据,从而根据目标重绘数据刷新目标局部图表。本方案可以仅显示全局图表中的局部图表,无需消耗系统内存对图片格式的全局图表进行存储显示,并且根据当前用户输入指令以及业务逻辑模块,实现目标局部图表刷新,无需每次使用canvas时为了解析当前用户输入指令进行代码编写,降低了代码调用的复杂度,解决了现有技术中图表展示内存消耗大的问题,能够保证调用简单的前提下,降低图表的内存消耗以及网页的卡顿次数。
实施例二
图2为本发明实施例二提供的一种图表的局部刷新方法的流程图,本实施例与上述实施例为基础给出了根据目标重绘数据刷新目标局部图表之后的相关步骤,具体的,在根据目标重绘数据刷新目标局部图表之后,还可以包括:获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据;根据目标调整数据,再次生成事件刷新信号。如图2所示,该方法包括:
S210、根据配置参数以及非图片格式的全局图表数据,显示目标局部图表。
在本发明的一个可选实施例中,在根据配置参数以及非图片格式的全局图表数据,显示目标局部图表之前,还可以包括:在业务逻辑模块启用自定义画面模板中的目标画面模板时,获取目标画面模板。
其中,自定义画面模板可以是预先封装于canvas组件的画面模板,可根据画布的显示需要进行设置。目标画面模板可以是自定义画面模板中的一种画面模板。目标画面模板可以包括canvas绘制图表名称、时间轴以及画布。canvas绘制图表名称可以是canvas组件中画布绘制图表的图表名称。
在本发明实施例中,通过canvas组件显示目标局部图表之前,可以将自定义画面模板封装于canvas组件中,当业务逻辑模块启用自定义画面模板中的目标画面模板时,canvas组件可以获取已封装的目标画面模板,进而按照目标画面模版,在目标画面模板的画布显示目标局部图表的同时,显示目标局部图表的图表名称以及时间轴,便于工作人员及时获取目标局部图表的相关数据。
示例性的,图3是本发明实施例二提供的一种目标画面模板的示意图,如图3所示,可以从canvas组件的画布中分割出三部分,在实际绘制图表的主画布左侧布局canvas绘制图表名称,并在实际绘制图表的主画布的顶部布局时间轴,canvas绘制图表名称、时间轴与主画布协同平移和缩放。
在本发明的一个可选实施例中,根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,可以包括:根据配置参数,确定初始偏移量、初始缩放比例、canvas尺寸以及canvas层;根据目标画面模板、初始偏移量、初始缩放比例、canvas尺寸、canvas层以及非图片格式的全局图表数据,显示目标局部图表。
其中,初始偏移量可以是canvas组件的画布与全局图表的相对位置确定的偏移量。初始缩放比例可以是预先设置的canvas组件的画布的缩放比例。canvas尺寸可以是画布的绘制大小。
在本发明实施例中,可以对配置参数进行解析,确定初始偏移量、初始缩放比例、canvas尺寸以及canvas层,进而根据目标画面模板显示canvas绘制图表名称以及时间轴,从而根据初始偏移量、初始缩放比例、canvas尺寸、canvas层以及非图片格式的全局图表数据,在画布显示目标局部图表。
S220、根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据。
在本发明的一个可选实施例中,根据当前用户输入指令,生成事件刷新信号,可以包括:在当前用户输入指令为平移指令时,确定位置偏移量数据;根据位置偏移量数据以及画笔变形函数,确定变换坐标原点,并根据变换坐标原点,生成第一事件刷新信号。
其中,平移指令可以用于对canvas组件的画布中显示的图表进行水平偏移。位置偏移量数据可以是由平移指令确定的,canvas组件的画布相对于全局图表的偏移量。画笔变形函数可以是canvas组件画笔的变形函数。变换坐标原点可以是根据位置偏移量数据确定的canvas组件画笔的坐标原点,即根据平移指令对目标局部图表平移后canvas组件画笔的坐标原点。第一事件刷新信号可以是canvas组件确定变换坐标原点之后,由canvas组件发送至业务逻辑模块的信号,用于使业务逻辑模块生成平移后的目标局部图表的目标重绘数据。
在本发明实施例中,当canvas组件接收到当前用户输入指令之后,可以对当前用户输入指令进行解析,若当前用户输入指令为平移指令,可以进一步确定与平移指令相匹配的位置偏移量数据,进而根据位置偏移量数据以及画笔变形函数,移动canvas组件的画笔的变换坐标原点。在canvas组件确定了变换坐标原点之后,可以根据变换坐标原点生成第一事件刷新信号,以使业务逻辑模块能够根据第一事件刷新信号,获取变换坐标原点,从而根据变换坐标原点生成目标重绘数据。
在本发明的一个可选实施例中,根据当前用户输入指令,生成事件刷新信号,可以包括:在当前用户输入指令为缩放指令时,确定缩放比例数据;根据缩放比例数据以及画布缩放函数,对当前画布进行缩放,并在当前画布进行缩放的同时,生成第二事件刷新信号。
其中,缩放比例数据是由缩放指令确定的canvas组件中画布的缩放比例。画布缩放函数可以是canvas组件中内置的用于对画布进行缩放的函数。第二事件刷新信号可以是canvas组件在完成当前画布的缩放之后,发送至业务逻辑模块的信号,用于使业务逻辑模块生成显示缩放后的目标局部图表的目标重绘数据。
在本发明实施例中,当canvas组件接收到当前用户输入指令之后,可以对当前用户输入指令进行解析,若当前用户输入指令为缩放指令,可以对缩放指令进行解析,确定与该缩放指令匹配的缩放比例数据,进一步获取canvas组件中内置的画布缩放函数,从而根据画布缩放函数以及缩放比例数据对当前画布进行缩放,并在当前画布进行缩放的同时,根据缩放比例数据,生成第二事件刷新信号,以使业务逻辑模块能够根据第二事件刷新信号,解析出缩放比例数据,进而根据缩放比例数据,确定显示缩放后的目标局部图表的目标重绘数据。
S230、根据目标重绘数据刷新目标局部图表。
S240、获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据。
其中,下一用户输入指令可以是根据当前用户输入指令对显示目标局部图表刷新后,再次获取到的用户输入指令。目标调整数据可以用于对刷新后的目标局部图表进行偏移或缩放。可选的,目标调整数据可以用于调整位置偏移量数据或位置偏移量数据。
在本发明实施例中,当根据当前用户输入指令对显示的目标局部图表刷新后,可以进一步检测是否接收到下一用户输入指令,当获取到当前用户输入指令的下一用户输入指令,可以对下一用户输入指令进行解析,并根据解析结果以及配置数据,生成针对初始偏移量或初始缩放比例的目标调整数据。
S250、根据目标调整数据,再次生成事件刷新信号。
在本发明实施例中,可以根据目标调整数据,再次生成事件刷新信号,并接收业务逻辑模块根据新的事件刷新信号反馈的目标重绘数据,从而使canvas组件显示的目标局部图表根据目标重绘数据再次刷新。
本发明实施例的技术方案,通过根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,进而根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据,从而根据目标重绘数据刷新目标局部图表,进一步获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据,从而根据目标调整数据,再次生成事件刷新信号。本方案可以仅显示全局图表中的局部图表,无需消耗系统内存对图片格式的全局图表进行存储显示,并且根据当前用户输入指令以及业务逻辑模块,实现目标局部图表刷新,无需每次使用canvas时为了解析当前用户输入指令进行代码编写,降低了代码调用的复杂度,解决了现有技术中图表展示内存消耗大的问题,能够保证调用简单的前提下,降低图表的内存消耗以及网页的卡顿次数。
实施例三
图4为本发明实施例三提供的一种图表的局部刷新系统的示意图,如图4所示,图表的局部刷新系统包括canvas组件以及业务逻辑模块,其中,canvas组件,用于执行本发明任一项中的图表的局部刷新方法;业务逻辑模块,用于在接收canvas组件发送的事件刷新信号时,根据事件刷新信号,确定目标重绘数据,并将目标重绘数据发送至canvas组件。
示例性的,图5是本发明实施例三提供的一种实际canvas与虚拟canvas的对比图。如图5所示,目标局部图表可在“实际canvas”显示,“实际canvas”对应实际画图的canvas组件的画布。全局图表需要在“虚拟canvas”才能完整显示,“实际canvas”的尺寸大小决定了内存消耗的大小,全局图表与目标局部图表的尺寸可以由用户设置,还可以给hpc-canvas增加滚动条,这个滚动条对应于“虚拟canvas”,可手动添加。由于HTML里没有单独的滚动条组件,所以可以利用两个嵌套的div来实现(以纵向滚动条为例,内部div宽度可以设置为1,高度设置为虚拟canvas的高度,外部div高度设置为“实际canvas”的高度。将滚动条的偏移量与虚拟canvas的偏移量offsetX和offsetY进行绑定即可,具体可将横向滚动条的偏移量与offsetX进行绑定,将纵向滚动条的偏移量与offsetY进行绑定)。offsetX表示“实际canvas”左边界与“虚拟canvas”左边界在水平方向的间距,和offsetY表示“实际canvas”上边界与“虚拟canvas”上边界在竖直方向的间距。
将封装后的canvas组件命名为hpc-canvas,用户对图表的操作由hpc-canvas组件内部处理,暴露给业务逻辑模块的就只有一个refreshCanvas刷新事件即事件刷新信号,业务逻辑模块只有在接收到事件刷新信号,对canvas组件执行一次重绘即可。hpc-canvas的配置参数由业务逻辑模块提供,包括canvas的尺寸、canvas层、初始偏移量、初始缩放比例等。“实际canvas”位置是固定的,而针对“虚拟canvas”位置是可变的,用户需要对其进行一些变换操作,主要分平移和缩放两种,以下是这两种操作的实现方案:
1)平移
在当前用户输入指令为平移指令(可以为鼠标滚轮、鼠标左键或右键按下并拖动、拖动滚动条)时,通过hpc-canvas进行平移操作,计算出“虚拟canvas”在此时的位置偏移量数据:offsetX和offsetY,然后调用画笔变形函数,进而移动canvas画笔的变换坐标原点,最后向业务逻辑模块抛出refreshCanvas事件,并执行业务绘图函数生成目标重绘数据,进而通过目标重绘数据对画布中的目标局部图表进行重绘,此时呈现出来的效果就相当于实现了实际canvas在虚拟canvas的平移。
2)缩放
在当前用户输入指令为缩放指令(鼠标滚轮、Ctrl+鼠标滚轮)时,计算出画布的缩放比例数据,然后调用画布缩放函数对画布进行缩放,并抛出refreshCanvas事件对目标局部图表进行重绘,实现对“虚拟canvas”的缩放。其实在实现过程中,缩放对平移是有影响的,当以鼠标位置为中心进行缩放时,canvas的偏移量也要随之进行调整。
在每次对目标局部图表进行变换操作前,需要先记录一下hpc-canvas的原始状态(初始偏移量以及初始缩放比例),并在下一次变换前恢复原始状态。因为在进行变换操作时所依赖的offsetX、offsetY、缩放比例都是对于原始状态而言的,需要用到canvas的两个函数:保存save()以及恢复restore()。需要注意的是这两个函数是对应的,保存的状态存储在一个长度为1的栈内,状态保存后仅能恢复一次。
本发明实施例提供的图表的局部刷新系统使用上述实施例中的图表的局部刷新方法,因此本发明实施例提供的图表的局部刷新系统也具备上述实施例中所描述的有益效果,此处不再赘述。
实施例四
图6为本发明实施例四提供的一种图表的局部刷新装置的结构示意图。如图6所示,该装置包括:目标局部图表显示模块410、数据接收模块420以及数据刷新模块430,其中,
目标局部图表显示模块410,用于根据配置参数以及非图片格式的全局图表数据,显示目标局部图表;
数据接收模块420,用于根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据;
数据刷新模块430,用于根据目标重绘数据刷新目标局部图表。
本发明实施例的技术方案,通过根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,进而根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据事件刷新信号反馈的目标重绘数据,从而根据目标重绘数据刷新目标局部图表。本方案可以仅显示全局图表中的局部图表,无需消耗系统内存对图片格式的全局图表进行存储显示,并且根据当前用户输入指令以及业务逻辑模块,实现目标局部图表刷新,无需每次使用canvas时为了解析当前用户输入指令进行代码编写,降低了代码调用的复杂度,解决了现有技术中图表展示内存消耗大的问题,能够保证调用简单的前提下,降低图表的内存消耗以及网页的卡顿次数。
可选的,图表的局部刷新装置还包括目标画面模板获取模块,用于在所述业务逻辑模块启用所述自定义画面模板中的目标画面模板时,获取所述目标画面模板;其中,所述目标画面模板包括canvas绘制图表名称、时间轴以及画布。
可选的,目标局部图表显示模块410,用于根据配置参数,确定初始偏移量、初始缩放比例、canvas尺寸以及canvas层;根据所述目标画面模板、所述初始偏移量、所述初始缩放比例、所述canvas尺寸、所述canvas层以及所述非图片格式的全局图表数据,显示所述目标局部图表。
可选的,数据接收模块420包括位置偏移量数据确定单元以及第一事件刷新信号生产单元,其中,位置偏移量数据确定单元,用于在当前用户输入指令为平移指令时,确定位置偏移量数据;第一事件刷新信号生产单元,用于根据位置偏移量数据以及画笔变形函数,确定变换坐标原点,并根据所述变换坐标原点,生成第一事件刷新信号。
可选的,数据接收模块420包括缩放比例数据确定单元以及第二事件刷新信号生成单元,其中,缩放比例数据确定单元,用于在当前用户输入指令为缩放指令时,确定缩放比例数据;第二事件刷新信号生成单元,用于根据所述缩放比例数据以及画布缩放函数,对当前画布进行缩放,并在当前画布进行缩放的同时,生成第二事件刷新信号。
可选的,图表的局部刷新装置还包括事件刷新信号更新模块,用于获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据;根据所述目标调整数据,再次生成事件刷新信号。
本发明实施例所提供的图表的局部刷新装置可执行本发明任意实施例所提供的图表的局部刷新方法,具备执行方法相应的功能模块和有益效果。
实施例五
图7示出了可以用来实施本发明的实施例的电子设备的结构示意图。电子设备旨在表示各种形式的数字计算机,诸如,膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置,诸如,个人数字处理、蜂窝电话、智能电话、可穿戴设备(如头盔、眼镜、手表等)和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例,并且不意在限制本文中描述的和/或者要求的本发明的实现。
如图7所示,电子设备10包括至少一个处理器11,以及与至少一个处理器11通信连接的存储器,如只读存储器(ROM)12、随机访问存储器(RAM)13等,其中,存储器存储有可被至少一个处理器执行的计算机程序,处理器11可以根据存储在只读存储器(ROM)12中的计算机程序或者从存储单元18加载到随机访问存储器(RAM)13中的计算机程序,来执行各种适当的动作和处理。在RAM 13中,还可存储电子设备10操作所需的各种程序和数据。处理器11、ROM 12以及RAM 13通过总线14彼此相连。输入/输出(I/O)接口15也连接至总线14。
电子设备10中的多个部件连接至I/O接口15,包括:输入单元16,例如键盘、鼠标等;输出单元17,例如各种类型的显示器、扬声器等;存储单元18,例如磁盘、光盘等;以及通信单元19,例如网卡、调制解调器、无线通信收发机等。通信单元19允许电子设备10通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。
处理器11可以是各种具有处理和计算能力的通用和/或专用处理组件。处理器11的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的处理器、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。处理器11执行上文所描述的各个方法和处理,例如图表的局部刷新方法。
在一些实施例中,图表的局部刷新方法可被实现为计算机程序,其被有形地包含于计算机可读存储介质,例如存储单元18。在一些实施例中,计算机程序的部分或者全部可以经由ROM 12和/或通信单元19而被载入和/或安装到电子设备10上。当计算机程序加载到RAM 13并由处理器11执行时,可以执行上文描述的图表的局部刷新方法的一个或多个步骤。备选地,在其他实施例中,处理器11可以通过其他任何适当的方式(例如,借助于固件)而被配置为执行图表的局部刷新方法。
本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括:实施在一个或者多个计算机程序中,该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释,该可编程处理器可以是专用或者通用可编程处理器,可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令,并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。
用于实施本发明的方法的计算机程序可以采用一个或多个编程语言的任何组合来编写。这些计算机程序可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器,使得计算机程序当由处理器执行时使流程图和/或框图中所规定的功能/操作被实施。计算机程序可以完全在机器上执行、部分地在机器上执行,作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。
在本发明的上下文中,计算机可读存储介质可以是有形的介质,其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的计算机程序。计算机可读存储介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备,或者上述内容的任何合适组合。备选地,计算机可读存储介质可以是机器可读信号介质。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
为了提供与用户的交互,可以在电子设备上实施此处描述的系统和技术,该电子设备具有:用于向用户显示信息的显示装置(例如,CRT(阴极射线管)或者LCD(液晶显示器)监视器);以及键盘和指向装置(例如,鼠标或者轨迹球),用户可以通过该键盘和该指向装置来将输入提供给电子设备。其它种类的装置还可以用于提供与用户的交互;例如,提供给用户的反馈可以是任何形式的传感反馈(例如,视觉反馈、听觉反馈、或者触觉反馈);并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。
可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如,作为数据服务器)、或者包括中间件部件的计算系统(例如,应用服务器)、或者包括前端部件的计算系统(例如,具有图形用户界面或者网络浏览器的用户计算机,用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如,通信网络)来将系统的部件相互连接。通信网络的示例包括:局域网(LAN)、广域网(WAN)、区块链网络和互联网。
计算系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器,又称为云计算服务器或云主机,是云计算服务体系中的一项主机产品,以解决了传统物理主机与VPS服务中,存在的管理难度大,业务扩展性弱的缺陷。
应该理解,可以使用上面所示的各种形式的流程,重新排序、增加或删除步骤。例如,本发明中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行,只要能够实现本发明的技术方案所期望的结果,本文在此不进行限制。
上述具体实施方式,并不构成对本发明保护范围的限制。本领域技术人员应该明白的是,根据设计要求和其他因素,可以进行各种修改、组合、子组合和替代。任何在本发明的精神和原则之内所作的修改、等同替换和改进等,均应包含在本发明保护范围之内。
Claims (7)
1.一种图表的局部刷新方法,其特征在于,应用于画布canvas组件,包括:
根据配置参数以及非图片格式的全局图表数据,显示目标局部图表;所述目标局部图表是显示屏中canvas展示出的图表,属于全局图表的一部分;
根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据所述事件刷新信号反馈的目标重绘数据;
根据所述目标重绘数据刷新目标局部图表;
在所述根据配置参数以及非图片格式的全局图表数据,显示目标局部图表之前,还包括:
在所述业务逻辑模块启用自定义画面模板中的目标画面模板时,获取所述目标画面模板;
其中,所述目标画面模板包括canvas绘制图表名称、时间轴以及画布;
所述根据配置参数以及非图片格式的全局图表数据,显示目标局部图表,包括:
根据配置参数,确定初始偏移量、初始缩放比例、canvas尺寸以及canvas层;
根据所述目标画面模板、所述初始偏移量、所述初始缩放比例、所述canvas尺寸、所述canvas层以及所述非图片格式的全局图表数据,显示所述目标局部图表;
在所述根据所述目标重绘数据刷新目标局部图表之后,还包括:
获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据;
根据所述目标调整数据,再次生成事件刷新信号。
2.根据权利要求1所述的方法,其特征在于,所述根据当前用户输入指令,生成事件刷新信号,包括:
在当前用户输入指令为平移指令时,确定位置偏移量数据;
根据位置偏移量数据以及画笔变形函数,确定变换坐标原点,并根据所述变换坐标原点,生成第一事件刷新信号。
3.根据权利要求1所述的方法,其特征在于,所述根据当前用户输入指令,生成事件刷新信号,包括:
在当前用户输入指令为缩放指令时,确定缩放比例数据;
根据所述缩放比例数据以及画布缩放函数,对当前画布进行缩放,并在当前画布进行缩放的同时,生成第二事件刷新信号。
4.一种图表的局部刷新系统,包括canvas组件以及业务逻辑模块,其中,
所述canvas组件,用于执行如权利要求1-3任一项所述的图表的局部刷新方法;
所述业务逻辑模块,用于在接收所述canvas组件发送的事件刷新信号时,根据所述事件刷新信号,确定目标重绘数据,并将所述目标重绘数据发送至canvas组件。
5.一种图表的局部刷新装置,其特征在于,配置于canvas组件中,包括:
目标局部图表显示模块,用于根据配置参数以及非图片格式的全局图表数据,显示目标局部图表;所述目标局部图表是显示屏中canvas展示出的图表,属于全局图表的一部分;
数据接收模块,用于根据当前用户输入指令,生成事件刷新信号,并接收业务逻辑模块根据所述事件刷新信号反馈的目标重绘数据;
数据刷新模块,用于根据所述目标重绘数据刷新目标局部图表;
图表的局部刷新装置还包括目标画面模板获取模块,用于在所述业务逻辑模块启用自定义画面模板中的目标画面模板时,获取所述目标画面模板;其中,所述目标画面模板包括canvas绘制图表名称、时间轴以及画布;
目标局部图表显示模块,用于根据配置参数,确定初始偏移量、初始缩放比例、canvas尺寸以及canvas层;根据所述目标画面模板、所述初始偏移量、所述初始缩放比例、所述canvas尺寸、所述canvas层以及所述非图片格式的全局图表数据,显示所述目标局部图表;
图表的局部刷新装置还包括事件刷新信号更新模块,用于获取当前用户输入指令的下一用户输入指令,根据当前用户输入指令、当前用户输入指令的下一用户输入指令以及配置数据,生成目标调整数据;根据所述目标调整数据,再次生成事件刷新信号。
6.一种电子设备,其特征在于,所述电子设备包括:
至少一个处理器;以及
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的计算机程序,所述计算机程序被所述至少一个处理器执行,以使所述至少一个处理器能够执行权利要求1-3中任一项所述的图表的局部刷新方法。
7.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质存储有计算机指令,所述计算机指令用于使处理器执行时实现权利要求1-3中任一项所述的图表的局部刷新方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310043066.8A CN115878935B (zh) | 2023-01-29 | 2023-01-29 | 一种图表的局部刷新方法、系统、装置、设备及介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202310043066.8A CN115878935B (zh) | 2023-01-29 | 2023-01-29 | 一种图表的局部刷新方法、系统、装置、设备及介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN115878935A CN115878935A (zh) | 2023-03-31 |
CN115878935B true CN115878935B (zh) | 2023-05-23 |
Family
ID=85758497
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202310043066.8A Active CN115878935B (zh) | 2023-01-29 | 2023-01-29 | 一种图表的局部刷新方法、系统、装置、设备及介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN115878935B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN116340676B (zh) * | 2023-05-30 | 2023-08-04 | 长江信达软件技术(武汉)有限责任公司 | 一种在网页浏览器中对比展示图片的方法 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104102468A (zh) * | 2014-07-23 | 2014-10-15 | 中国电子科技集团公司第四十一研究所 | 一种网络分析仪公式编辑器及其数据图形显示方法和装置 |
CN115129279A (zh) * | 2021-03-25 | 2022-09-30 | 广州视享科技有限公司 | 图像绘制方法、装置、电子设备及计算机存储介质 |
Family Cites Families (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US10037407B2 (en) * | 2015-11-23 | 2018-07-31 | Koninklijke Philips N.V. | Structured finding objects for integration of third party applications in the image interpretation workflow |
CN108319411B (zh) * | 2017-01-16 | 2021-08-27 | 阿里巴巴集团控股有限公司 | 一种图表局部放大的方法、装置及电子设备 |
CN111191163B (zh) * | 2019-11-11 | 2021-01-12 | 苏州亿歌网络科技有限公司 | 一种网页表单数据更新方法、装置、设备及存储介质 |
CN111949186B (zh) * | 2020-07-20 | 2022-02-15 | 上海淇馥信息技术有限公司 | 一种辅助寻找集群中目标对象的方法、装置和电子设备 |
CN114020233B (zh) * | 2022-01-06 | 2022-04-08 | 广州朗国电子科技股份有限公司 | 一种会议白板窗口模式书写适配方法、系统、设备及介质 |
-
2023
- 2023-01-29 CN CN202310043066.8A patent/CN115878935B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN104102468A (zh) * | 2014-07-23 | 2014-10-15 | 中国电子科技集团公司第四十一研究所 | 一种网络分析仪公式编辑器及其数据图形显示方法和装置 |
CN115129279A (zh) * | 2021-03-25 | 2022-09-30 | 广州视享科技有限公司 | 图像绘制方法、装置、电子设备及计算机存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN115878935A (zh) | 2023-03-31 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110096277B (zh) | 一种动态页面展示方法、装置、电子设备及存储介质 | |
US8775923B1 (en) | Web page restoration | |
CN101763234B (zh) | 一种模拟各种屏幕分辨率的方法及其装置 | |
US20210166457A1 (en) | Graphic drawing method and apparatus, device, and storage medium | |
CN115878935B (zh) | 一种图表的局部刷新方法、系统、装置、设备及介质 | |
CN109388317A (zh) | 一种图片加载方法、终端设备及存储介质 | |
WO2016192546A1 (zh) | 一种动态曲线的数据点更新方法和设备 | |
CN113885960B (zh) | 小程序页面的处理方法、装置、电子设备和存储介质 | |
CN114610295A (zh) | 一种页面容器的布局方法、装置、设备及介质 | |
CN110727383A (zh) | 基于小程序的触控交互方法、装置、电子设备与存储介质 | |
CN114327057A (zh) | 对象选择方法、装置、设备、介质及程序产品 | |
WO2018144366A1 (en) | Reversible digital ink for inking application user interfaces | |
CN109800039B (zh) | 一种用户界面展示方法、装置、电子设备及存储介质 | |
CN117270834A (zh) | 地图渲染方法、装置、电子设备和存储介质 | |
CN107615229B (zh) | 用户界面装置和用户界面装置的画面显示方法 | |
CN115729544A (zh) | 桌面组件生成方法、装置、电子设备和可读存储介质 | |
CN111222302A (zh) | 网页渲染的控制方法、控制装置以及计算机可读介质 | |
CN114549303A (zh) | 图像显示、处理方法、装置、设备和存储介质 | |
CN114371838A (zh) | 一种小程序画布渲染方法、装置、设备及存储介质 | |
CN114546199B (zh) | 一种图像处理方法、装置、电子设备和存储介质 | |
US20230119741A1 (en) | Picture annotation method, apparatus, electronic device, and storage medium | |
CN114398122B (zh) | 输入方法、装置、电子设备、存储介质及产品 | |
CN114201251A (zh) | 降低书写痕迹显示延时的方法、装置、设备及介质 | |
CN115933932A (zh) | 电子白板的笔迹生成方法、装置、电子设备及存储介质 | |
CN115857778A (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |