图像像素网格的展示方法、装置、计算机设备及存储介质与流程

1.本技术涉及计算机技术领域，特别是涉及一种图像像素网格的展示方法、装置、计算机设备及存储介质。


背景技术：

2.随着计算机技术的快速发展，计算机绘图技术，比如前端图形绘制技术也发生了巨大的改变。目前，前端图形绘制技术中的前端位图网格展示可以应用于各种领域，比如游戏开发、数据可视化和图像处理等。在游戏开发中，前端位图网格展示可以用于实现游戏地图、角色动画、特效等。在数据可视化中，前端位图网格展示可以用于展示各种数据图表、地图等。在图像处理中，前端位图网格展示可以用于实现各种图像处理算法，机器学习的数据标注等。
3.目前，主要是使用画布元素的应用程序接口（application programming interface，api）去绘制图像像素网格。但是，当需要对绘制好的图像像素网格进行更新展示时，需要循环遍历多次api接口去进行网格绘制，这会导致网格绘制过程比较繁琐，从而影响图像像素网格的展示性能。


技术实现要素：

4.基于此，有必要针对上述技术问题，提供一种图像像素网格的展示方法、装置、计算机设备、计算机可读存储介质以及计算机程序产品，能够提高图像像素网格的展示性能。
5.第一方面，本技术提供了一种图像像素网格的展示方法，包括：当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；将调整后的图像像素网格展示到交互界面中。
6.第二方面，本技术提供了一种图像像素网格的展示装置，包括：交互事件确定模块，用于当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；布局调整模块，用于调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；网格展示模块，用于将调整后的图像像素网格展示到交互界面中。
7.第三方面，本技术提供了一种计算机设备，计算机设备包括存储器和处理器，存储器存储有计算机程序，处理器执行该计算机程序时实现上述的方法中的步骤。
8.第四方面，本技术提供了一种计算机可读存储介质，其上存储有计算机程序，该计
算机程序被处理器执行时实现上述的方法中的步骤。
9.第五方面，本技术提供了一种计算机程序产品，计算机程序产品包括计算机程序，该计算机程序被处理器执行时实现上述的方法中的步骤。
10.上述图像像素网格的展示方法、装置、计算机设备、计算机可读存储介质及计算机程序产品，通过当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；将调整后的图像像素网格展示到交互界面中。由于本技术事先在自定义画布类中注册好用于进行布局调整的布局控制方法。因此，当监听到对应的交互操作时，只需要通过调用对应的布局控制方法，就能实现自动对图像像素网格在交互界面中的布局进行自动调整，比如移动图像像素网格、对图像像素网格进行放大或缩小等，从而实现图像像素网格的重新绘制并且重新展示，这相较于传统方式中通过循环遍历多次接口去进行网格绘制并展示的方式，性能更好。
附图说明
11.图1为本技术实施例提供的一种图像像素网格的展示方法的流程示意图；图2为本技术实施例提供的一种图像像素网格的示意图；图3为本技术实施例提供的一种图像像素网格的展示装置的结构框图；图4为本技术实施例提供的一种计算机设备的内部结构图；图5为本技术实施例提供的一种计算机可读存储介质的内部结构图。
具体实施方式
12.为了使本技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本技术进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本技术，并不用于限定本技术。
13.在一些实施例中，如图1所示，提供了一种图像像素网格的展示方法，本实施例以该方法应用于计算机设备进行举例说明，可以理解的是，该计算机设备可以是终端，该方法可以由终端单独实现，也可以通过服务器和终端之间的交互来实现。本实施例中，该方法包括但不限于包括以下步骤：s102，当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件。
14.其中，交互界面，指的是用户和系统之间进行交流和互动的界面。交互操作，指的是用户通过交互界面与系统进行交互的动作或者操作。
15.在一些实施例中，交互操作可以是用户通过输入设备，例如通过鼠标、键盘、触摸屏等来触发的。在另一些实施例中，交互操作也可以是用户在系统提供的界面元素上，比如在图像、按钮、菜单、滑块上进行的操作。
16.在一些实施例中，交互操作包括点击操作、拖拽操作、输入操作、选择操作或滚动操作等中的至少一种。其中，点击操作指的是用户通过鼠标或者触摸屏点击界面元素的操
作。拖拽操作指的是用户通过点击并拖拽界面元素来改变界面元素的位置或大小的操作。输入操作指的是用户通过键盘输入文字、数字或命令等内容，以供系统进行识别和处理的操作。选择操作指的是用户通过鼠标点击或触摸屏来操作复选框、单选按钮、下拉菜单等界面元素，以进行选项选择。滚动操作指的是用户通过滚动鼠标滚轮或触摸屏滑动来浏览交互界面上的内容，如图像、网页、文档等的操作。
17.画布（canvas）类，是指用于绘制和显示图像、图形和动画的类。画布类提供了基本的绘图功能，可以在其中创建、编辑和渲染图像。
18.自定义画布类，指的是根据预设需求和设计所创建的画布类。在本技术实施例中，可以通过在画布类中注册特定的交互事件、布局控制方法，得到自定义画布类，从而使自定义画布类满足特定的需求，比如满足自动调整图像布局、并且重新展示图像的需求。
19.交互事件，指的是通过交互操作以实现对界面元素进行控制的事件。
20.目标图像，指的是需要进行网格绘制的图像。其中，网格绘制指的是将图像分割成规则的方格网格的可视化方法。网格绘制通常使用线条或矩形来标识出方格的边界，形成一种如图2所示的、类似于方格纸的效果。
21.图像像素网格，是根据目标图像在自定义画布类中进行网格绘制得到的。
22.具体地，计算机设备监听用户在交互界面中的交互操作。当计算机设备监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件。
23.在一些实施例中，若计算机设备监听到针对图像像素网格进行的滚动操作时，则确定与滚动操作相匹配的目标交互事件为放大图像像素网格或者缩小图像像素网格。若计算机设备监听到针对图像像素网格进行的拖拽操作时，则确定与拖拽操作相匹配的目标交互事件为移动图像像素网格。
24.s104，调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整。
25.其中，布局控制方法，在自定义画布类预先设置的、用于对图像像素网格在交互界面中的布局进行调整的方法。
26.在一些实施例中，可以通过布局控制方法调整图像像素网格在交互界面中的显示位置、显示大小、显示比例、对齐方式、布局方式或网格样式等中的至少一种。其中，调整图像像素网格在交互界面中的布局方式，指的是控制图像像素网格与其他界面元素在交互界面中的布局方式。调整图像像素网格在交互界面中的网格样式，指的是调整图像像素网格中网格线的可见性、线宽、颜色、网格间距或透明度等中的至少一种。其中，可见性用于选择是否显示网格线。
27.具体地，计算机设备调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，以通过执行相匹配的控制方法，对图像像素网格在交互界面中的布局进行调整，得到调整后的图像像素网格。
28.示例性的，假设目标交互事件为移动图像像素网格，则其对应的布局控制方法可以是调整图像像素网格在交互界面中的显示位置。假设目标交互事件为缩放移动图像像素网格，则其对应的布局控制方法可以是调整图像像素网格在交互界面中的显示大小、显示比例或者网格样式。
29.s106，将调整后的图像像素网格展示到交互界面中。
30.具体地，计算机设备对图像像素网格在交互界面中的布局进行调整之后，则可以将调整后的图像像素网格重新渲染到交互界面中。比如，若用户在交互界面中拖拽了图像像素网格，计算机设备在针对该交互操作确定目标交互事件，并且调用了对应的布局控制方法后，则调整图像像素网格在交互界面中的显示位置，并且重新将调整后的图像像素网格显示在交互界面中，从而在交互界面中实现了图像像素网格移动的效果。
31.上述图像像素网格的展示方法，通过当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；将调整后的图像像素网格展示到交互界面中。由于本技术事先在自定义画布类中注册好用于进行布局调整的布局控制方法。因此，当监听到对应的交互操作时，只需要通过调用对应的布局控制方法，就能实现自动对图像像素网格在交互界面中的布局进行自动调整，比如移动图像像素网格、对图像像素网格进行放大或缩小等，从而实现图像像素网格的重新绘制并且重新展示，这相较于传统方式中通过循环遍历多次接口去进行网格绘制并展示的方式，性能更好。
32.在一些实施例中，交互界面中展示的图像像素网格是与第一自定义画布类对应的第一图像像素网格，交互事件注册在第一自定义画布类中。本技术实施例的图像像素网格的展示方法具体还包括：将第二自定义画布类对应的第二图像像素网格覆盖第一图像像素网格。s104具体包括：调用第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对第二图像像素网格在交互界面中的布局进行调整。
33.其中，自定义画布类包括第一自定义画布类和第二自定义画布类中的至少一种。在第一自定义画布类中针对目标图像所绘制的网格为第一图像像素网格，在第二自定义画布类中针对目标图像所绘制的网格为第二图像像素网格。
34.在一些实施例中，可以在自定义画布类中获取图像资源，即获取需要进行网格绘制的图像的资源、初始化一些交互事件、获取用于绘制第一图像像素网格的文档对象模型（document object model，dom）对象和相关的容器等，方便后续的网格绘制、事件监听以及调用。
35.在一些实施例中，在第一自定义画布类中注册的交互事件，包括拖拽图像像素网格的事件、平移图像像素网格的事件、通过滚轮放大图像像素网格的事件或者通过滚轮缩小图像像素网格的事件等中的至少一种。
36.在一些实施例中，在第二自定义画布类中设置的布局控制方法包括调整图像像素网格在交互界面中的显示大小和显示位置、控制网格大小、控制网格位置和控制网格的显示样式等中的至少一种。
37.具体地，计算机设备将第二自定义画布类对应的第二图像像素网格覆盖第一图像像素网格，并调用第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，实现对覆盖有第二图像像素网格的第一图像像素网格在交互界面中的布局进行调整。
38.可见，在本技术实施例中，通过设置两个自定义画布类，并且分别在两个自定义画
布类中针对目标图像进行网格绘制，能够在需要调整第一图像像素网格的情况下，以第一图像像素网格为参考，根据布局控制方式对绘制好的第二图像像素网格进行布局调整，并将布局调整后的第二图像像素网格直接展示在交互界面即可，这相较于根据布局控制方法直接对第一图像像素网格进行布局调整、重新渲染并加载到交互界面的方式，展示效率更高、在一些实施例中，第一图像像素网格绘制在第一自定义画布类的第一自定义画布元素中；第二图像像素网格绘制在第二自定义画布类的第二自定义画布元素中。步骤“将第二自定义画布类对应的第二图像像素网格覆盖第一图像像素网格”具体包括：将第二自定义画布元素覆盖第一自定义画布元素。步骤“调用第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对第二图像像素网格在交互界面中的布局进行调整”具体包括：调用目标布局控制方法，对第二自定义画布元素中的第二图像像素网格在交互界面中的布局进行调整。
39.其中，目标布局控制方法，是第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法。
40.自定义画布元素，指的是在画布类中自定义的、用于绘制图像的元素。
41.第一自定义画布元素，指的是在第一自定义画布类中定义的、用于绘制图像的元素。第二自定义画布元素，指的是在第二自定义画布类中定义的、用于绘制图像的元素。
42.在一些实施例中，可以通过画布接口（canvas api）将目标图像网格绘制到第二自定义画布元素中，作为不展示到交互界面中的离屏画布使用。其中，画布接口提供了一组用于在交互界面上绘制图形的方法和属性，可以通过这些方法和属性在自定义画布元素实现绘图、渲染图像和实现动画效果等。
43.需要说明的是，在第二自定义画布元素中绘制的第二图像像素网格的尺寸，与目标图像的尺寸相同。
44.在一些实施例中，可以在第二自定义画布类中加载好目标图像，以将目标图像网格绘制到第二自定义画布元素中。
45.具体地，计算机设备将第二自定义画布元素覆盖第一自定义画布元素，并调用在第二自定义画布类中预先设置的目标布局控制方法，对第二自定义画布元素中的第二图像像素网格在交互界面中的布局进行调整。
46.可见，在本技术实施例中，通过在第一自定义画布类中注册的交互事件，来控制在第二自定义画布类中预先设置的布局控制方法，从而控制第二自定义画布元素中的第二图像像素网格在交互界面中的布局，不需要针对第一图像像素网格进行重新绘制，能够提高图像像素网格展示的效率。
47.在一些实施例中，第二图像像素网格绘制在第二自定义画布元素中创建的文档对象模型元素中；文档对象模型元素挂载于第一自定义画布元素中。步骤“调用目标布局控制方法，对第二自定义画布元素中的第二图像像素网格在交互界面中的布局进行调整”具体包括：调用目标布局控制方法，基于文档对象模型元素与第一自定义画布元素之间的相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的布局。
48.其中，在网格绘制中，文档对象模型元素，即dom元素，指的是页面上的超文本标记语言（hyper text markup language，html）元素，包括图层（division，div）等用于表示网
格的单元格的元素。
49.需要说明的是，网格绘制是指将网格结构以及其中的数据进行可视化展示的过程，其中包含许多单元格。每个单元格都可以用一个dom元素来表示，通过对dom元素进行样式设置和布局，可以实现网格的绘制和展示。
50.具体地，计算机设备根据文档对象模型元素与第一自定义画布元素之间的相对位置关系，可以得到第二自定义画布元素相对于第一自定义画布元素的定位。通过调用目标布局控制方法，并基于第二自定义画布元素相对于第一自定义画布元素的定位，控制第二自定义画布元素相对于第一自定义画布元素的布局，控制方式比较简单，方便使用。
51.在一些实施例中，步骤“调用目标布局控制方法，基于文档对象模型元素与第一自定义画布元素之间的相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的布局”，具体包括：调用目标布局控制方法，基于相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的位置和比例，并对第二自定义画布元素中第二图像像素网格的像素网格进行样式调整。
52.具体地，计算机设备调用目标布局控制方法，基于相对位置关系所指示的、第二自定义画布元素相对于第一自定义画布元素的定位，调整第二自定义画布元素在第一自定义画布元素的位置和比例，也就是大小，并对第二自定义画布元素中第二图像像素网格的像素网格进行样式调整。比如，计算机设备通过控制第二自定义画布元素中的dom元素的大小、位置、样式以及是否展示等，对像素网格的大小、位置、样式以及是否展示进行调整，从而调整像素网格的视觉效果。
53.可见，在本技术实施例中，通过在第一自定义画布类中注册的交互事件，来控制在第二自定义画布类中预先设置的布局控制方法，从而控制第二自定义画布元素中的第二图像像素网格在第一自定义画布元素中的位置、大小、样式以及是否展示等，不需要针对第一图像像素网格进行重新绘制，能够提高图像像素网格展示的效率。
54.在一些实施例中，目标布局控制方法包括三个需要调整的参数，分别是第一坐标、第二坐标和缩放比例。其中，第一坐标指的是将第二自定义画布元素中的第二图像像素网格绘制到第一自定义画布元素上，相对于第一自定义元素的左上角的横坐标。第二坐标指的是将第二自定义画布元素中的第二图像像素网格绘制到第一自定义画布元素上，相对于第一自定义元素的左上角的纵坐标。缩放比例，指的是将第二自定义画布元素中的第二图像像素网格绘制到第一自定义画布上、且相较于目标图像的缩放比例。
55.在一些实施例中，s106具体包括：取消展示第一自定义画布元素中的第一图像像素网格，并将第二自定义画布元素中的第二图像像素网格展示到交互界面中。
56.具体地，第一自定义画布元素中的第一图像像素网格是默认展示的，第二自定义画布元素中的第二图像像素网格的默认不展示的。在计算机设备利用第二自定义画布元素中的第二图像像素网格进行网格布局调整之后，需要将调整后的第二图像像素网格重新展示到交互界面中，并取消展示第一自定义画布元素中的第一图像像素网格，以有效实现图像像素网格布局调整的交互效果。
57.在一些实施例中，本技术的图像像素网格的展示方法具体还包括但不限于包括以下步骤：（1）监听针对交互界面中展示的第一图像像素网格进行的交互操作。
58.在一些实施例中，第一图像像素网格绘制在第一自定义画布元素中，第二图像像素网格绘制在第二自定义画布元素中创建的文档对象模型元素中。
59.（2）当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在第二自定义画布类中注册的各交互事件中，确定与监听到的交互操作相匹配的目标交互事件。
60.（3）将第二自定义画布元素覆盖第一自定义画布元素。
61.（4）调用目标布局控制方法，基于文档对象模型元素与第一自定义画布元素之间的相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的位置和比例，并对第二自定义画布元素中第二图像像素网格的像素网格进行样式调整。
62.（5）取消展示第一自定义画布元素中的第一图像像素网格，并将第二自定义画布元素中的第二图像像素网格展示到交互界面中。
63.需要说明的是，通过本技术实施例的图像像素网格的展示方法，可以快速地实现一个前端的图像像素网格展示的效果，对图像像素网格进行平移或者缩放的时候，则不需要调用过多次的画布接口，在性能上比较适中。
64.应该理解的是，虽然如上述的各实施例所涉及的流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，如上述的各实施例所涉及的流程图中的至少一部分步骤可以包括多个步骤或者多个阶段，这些步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些步骤或者阶段的执行顺序也不必然是依次进行，而是可以与其它步骤或者其它步骤中的步骤或者阶段的至少一部分轮流或者交替地执行。
65.基于同样的发明构思，本技术实施例还提供了一种图像像素网格的展示装置。该装置所提供的解决问题的实现方案与上述方法中所记载的实现方案相似，故下面所提供的一个或多个图像像素网格的展示装置实施例中的具体限定可以参见上文中对于图像像素网格的展示方法的限定，在此不再赘述。
66.如图3所示，本技术实施例提供了一种图像像素网格的展示装置，包括：交互事件确定模块302，用于当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；布局调整模块304，用于调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；网格展示模块306，用于将调整后的图像像素网格展示到交互界面中。
67.上述图像像素网格的展示装置，通过当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；将调整后的图像像素网格展示到交互界面中。由于本技术事先在自定义画布类中注册好用于进行布局调整的布局控制方法。因此，当监听到对应的交互操作时，只需要通过调用对应的布局控制方法，就能实现自动对图像像素网格
在交互界面中的布局进行自动调整，比如移动图像像素网格、对图像像素网格进行放大或缩小等，从而实现图像像素网格的重新绘制并且重新展示，这相较于传统方式中通过循环遍历多次接口去进行网格绘制并展示的方式，性能更好。
68.在一些实施例中，交互界面中展示的图像像素网格是与第一自定义画布类对应的第一图像像素网格；交互事件注册在第一自定义画布类中。图像像素网格的展示装置还包括网格覆盖模块，具体用于：将第二自定义画布类对应的第二图像像素网格覆盖第一图像像素网格；在调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整方面，布局调整模块304具体用于：调用第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对第二图像像素网格在交互界面中的布局进行调整。
69.在一些实施例中，第一图像像素网格绘制在第一自定义画布类的第一自定义画布元素中；第二图像像素网格绘制在第二自定义画布类的第二自定义画布元素中。在将第二自定义画布类对应的第二图像像素网格覆盖第一图像像素网格方面，网格覆盖模块，具体用于：将第二自定义画布元素覆盖第一自定义画布元素；在调用第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对第二图像像素网格在交互界面中的布局进行调整方面，布局调整模块304具体用于：调用目标布局控制方法，对第二自定义画布元素中的第二图像像素网格在交互界面中的布局进行调整；其中，目标布局控制方法，是第二自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法。
70.在一些实施例中，第二图像像素网格绘制在第二自定义画布元素中创建的文档对象模型元素中；文档对象模型元素挂载于第一自定义画布元素中。在调用目标布局控制方法，对第二自定义画布元素中的第二图像像素网格在交互界面中的布局进行调整方面，布局调整模块304具体用于：调用目标布局控制方法，基于文档对象模型元素与第一自定义画布元素之间的相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的布局。
71.在一些实施例中，在调用目标布局控制方法，基于文档对象模型元素与第一自定义画布元素之间的相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的布局方面，布局调整模块304具体用于：调用目标布局控制方法，基于相对位置关系，调整第二自定义画布元素相对于第一自定义画布元素的位置和比例，并对第二自定义画布元素中第二图像像素网格的像素网格进行样式调整。
72.在一些实施例中，在将调整后的图像像素网格展示到交互界面中方面，网格展示模块306具体用于：取消展示第一自定义画布元素中的第一图像像素网格，并将第二自定义画布元素中的第二图像像素网格展示到交互界面中。
73.上述图像像素网格的展示装置中的各个模块可全部或部分通过软件、硬件及其组
合来实现。上述各模块可以以硬件形式内嵌于或独立于计算机设备中的处理器，也可以以软件形式存储于计算机设备中的存储器，以便于处理器调用执行以上各个模块对应的操作。
74.在一些实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图4所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元及输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过wifi、移动蜂窝网络、nfc（近场通信）或其他技术实现。该计算机程序被处理器执行时以实现上述的图像像素网格的展示方法中的步骤。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置。显示屏可以是液晶显示屏或者电子墨水显示屏；该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
75.本领域技术人员可以理解，图4中示出的结构，仅仅是与本技术方案相关的部分结构的框图，并不构成对本技术方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
76.在一些实施例中，提供了一种计算机设备，该计算机设备包括存储器和处理器，存储器存储有计算机程序，该处理器执行计算机程序时实现上述各方法实施例中的步骤。
77.在一些实施例中，如图5所示，提供了一种计算机可读存储介质的内部结构图，计算机可读存储介质存储有计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
78.在一些实施例中，提供了一种计算机程序产品，该计算机程序产品包括计算机程序，该计算机程序被处理器执行时实现上述各方法实施例中的步骤。
79.需要说明的是，本技术所涉及的用户信息（包括但不限于用户设备信息、用户个人信息等）和数据（包括但不限于用于分析的数据、存储的数据、展示的数据等），均为经用户授权或者经过各方充分授权的信息和数据，且相关数据的收集、使用和处理需要遵守相关国家和地区的相关法律法规和标准。
80.本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本技术所提供的各实施例中所使用的对存储器、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器（read-only memory，rom）、磁带、软盘、闪存、光存储器、高密度嵌入式非易失性存储器、阻变存储器（reram）、磁变存储器（magnetoresistive random access memory，mram）、铁电存储器（ferroelectric random access memory，fram）、相变存储器（phase change memory，
pcm）、石墨烯存储器等。易失性存储器可包括随机存取存储器（random access memory，ram）或外部高速缓冲存储器等。作为说明而非局限，ram可以是多种形式，比如静态随机存取存储器（static random accessmemory，sram）或动态随机存取存储器（dynamic random access memory，dram）等。本技术所提供的各实施例中所涉及的数据库可包括关系型数据库和非关系型数据库中至少一种。非关系型数据库可包括基于区块链的分布式数据库等，不限于此。本技术所提供的各实施例中所涉及的处理器可为通用处理器、中央处理器、图形处理器、数字信号处理器、可编程逻辑器、基于量子计算的数据处理逻辑器等，不限于此。
81.以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
82.以上所述实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。

技术特征：
1.一种图像像素网格的展示方法，其特征在于，包括：当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与所述交互操作相匹配的目标交互事件；所述图像像素网格是根据目标图像在所述自定义画布类中进行网格绘制得到的；调用所述自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法，对所述图像像素网格在所述交互界面中的布局进行调整；将调整后的图像像素网格展示到所述交互界面中。2.根据权利要求1所述的方法，其特征在于，所述交互界面中展示的图像像素网格是与第一自定义画布类对应的第一图像像素网格；所述交互事件注册在所述第一自定义画布类中；所述方法还包括：将第二自定义画布类对应的第二图像像素网格覆盖所述第一图像像素网格；所述调用所述自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法，对所述图像像素网格在所述交互界面中的布局进行调整，包括：调用所述第二自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法，对所述第二图像像素网格在所述交互界面中的布局进行调整。3.根据权利要求2所述的方法，其特征在于，所述第一图像像素网格绘制在第一自定义画布类的第一自定义画布元素中；所述第二图像像素网格绘制在第二自定义画布类的第二自定义画布元素中；所述将第二自定义画布类对应的第二图像像素网格覆盖所述第一图像像素网格，包括：将所述第二自定义画布元素覆盖所述第一自定义画布元素；所述调用所述第二自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法，对所述第二图像像素网格在所述交互界面中的布局进行调整，包括：调用目标布局控制方法，对所述第二自定义画布元素中的第二图像像素网格在所述交互界面中的布局进行调整；其中，所述目标布局控制方法，是所述第二自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法。4.根据权利要求3所述的方法，其特征在于，所述第二图像像素网格绘制在第二自定义画布元素中创建的文档对象模型元素中；所述文档对象模型元素挂载于所述第一自定义画布元素中；所述调用目标布局控制方法，对所述第二自定义画布元素中的第二图像像素网格在所述交互界面中的布局进行调整，包括：调用目标布局控制方法，基于所述文档对象模型元素与所述第一自定义画布元素之间的相对位置关系，调整所述第二自定义画布元素相对于所述第一自定义画布元素的布局。5.根据权利要求4所述的方法，其特征在于，所述调用目标布局控制方法，基于所述文档对象模型元素与所述第一自定义画布元素之间的相对位置关系，调整所述第二自定义画布元素相对于所述第一自定义画布元素的布局，包括：调用目标布局控制方法，基于所述相对位置关系，调整所述第二自定义画布元素相对于所述第一自定义画布元素的位置和比例，并对所述第二自定义画布元素中第二图像像素
网格的像素网格进行样式调整。6.根据权利要求3所述的方法，其特征在于，所述将调整后的图像像素网格展示到所述交互界面中，包括：取消展示第一自定义画布元素中的第一图像像素网格，并将所述第二自定义画布元素中的第二图像像素网格展示到所述交互界面中。7.一种图像像素网格的展示装置，其特征在于，包括：交互事件确定模块，用于当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与所述交互操作相匹配的目标交互事件；所述图像像素网格是根据目标图像在所述自定义画布类中进行网格绘制得到的；布局调整模块，用于调用所述自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法，对所述图像像素网格在所述交互界面中的布局进行调整；网格展示模块，用于将调整后的图像像素网格展示到所述交互界面中。8.根据权利要求7所述的装置，其特征在于，所述交互界面中展示的图像像素网格是与第一自定义画布类对应的第一图像像素网格；所述交互事件注册在所述第一自定义画布类中；所述装置还包括网格覆盖模块，用于将第二自定义画布类对应的第二图像像素网格覆盖所述第一图像像素网格；所述布局调整模块，还用于调用所述第二自定义画布类中预先设置的、且与所述目标交互事件相匹配的布局控制方法，对所述第二图像像素网格在所述交互界面中的布局进行调整。9.一种计算机设备，所述计算机设备包括存储器和处理器，所述存储器存储有计算机程序，其特征在于，所述处理器执行所述计算机程序时实现权利要求1至6中任一项所述的方法的步骤。10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现权利要求1至6中任一项所述的方法的步骤。

技术总结
本申请涉及一种图像像素网格的展示方法、装置、计算机设备及存储介质。方法包括：当监听到针对交互界面中展示的图像像素网格进行的交互操作时，从预先在自定义画布类中注册的各交互事件中，确定与交互操作相匹配的目标交互事件；图像像素网格是根据目标图像在自定义画布类中进行网格绘制得到的；调用自定义画布类中预先设置的、且与目标交互事件相匹配的布局控制方法，对图像像素网格在交互界面中的布局进行调整；将调整后的图像像素网格展示到交互界面中。采用本申请能够提高图像像素网格的展示性能。示性能。示性能。


技术研发人员：朱相明 周超 吕江波 沈小勇
受保护的技术使用者：深圳思谋信息科技有限公司
技术研发日：2023.08.31
技术公布日：2023/10/6