CN116823999B - 一种基于图片识别的交互方法、设备及介质 - Google Patents

Abstract

本说明书实施例公开了一种基于图片识别的交互方法、设备及介质，方法包括：获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。本发明识别原型图片，在空白组件中自动生成节点元素，并绑定交互事件等基础的代码结构，能提高开发效率，降低时间成本。

Description

一种基于图片识别的交互方法、设备及介质

技术领域

本说明书涉及数据处理的技术领域，尤其涉及一种基于图片识别的交互方法、设备及介质。

背景技术

通常，按照设计好的原型图编写GUI代码对前端开发者来说是一项耗时又繁琐的工作，因为这使得他们无法投入更多的时间来开发软件的实用功能和逻辑。

尤其是针对复杂设计图开发基础代码结构需要花费大量的时间，效率较低。

发明内容

本说明书一个或多个实施例提供了一种基于图片识别的交互方法、设备及介质，用于解决如下技术问题：针对设计图开发基础代码结构需要花费大量的时间。

本说明书一个或多个实施例采用下述技术方案：

本说明书一个或多个实施例提供一种基于图片识别的交互方法，所述方法包括：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。

进一步地，获取描述需求效果的原型图片，包括：

获取用于描述需求效果的初始图片，识别所述初始图片中用于描述需求的原型像素，以及用于描述美化效果的效果像素；

将所述初始图片中的效果像素进行裁剪，得到保留所述原型像素的原型图片。

进一步地，所述对所述目标像素点阵中的每一个像素点对应创建一个节点元素，包括：

获取所述目标像素点阵的像素点数组，对所述像素点数组进行循环，并遍历所述像素点数组中的像素点；

为所述像素点对应创建一个节点元素。

进一步地，所述根据所述像素点的坐标确定所述节点元素的坐标，包括：

获取所述像素点的坐标数据，所述坐标数据包括横坐标数据和纵坐标数据；

将所述横坐标数据和所述纵坐标数据分别赋值给所述节点元素的左边界数据，以及所述节点元素的上边界数据。

进一步地，所述在所述节点元素上绑定预设交互事件，包括：

设置交互事件函数，并采用所述交互事件函数与所述节点元素关联。

进一步地，所述在所述节点元素上绑定元素样式，还包括：

根据所述效果像素确定元素样式；

设置元素样式函数，并采用所述元素样式函数与所述节点元素关联。

进一步地，所述基于所述交互事件进行交互，包括：

基于用户针对所述节点元素的触发操作，触发所述预设交互事件。

进一步地，在所述将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵之后还包括：

在所述空白组件中对所述节点元素进行编辑。

本说明书一个或多个实施例提供的一种基于图片识别的交互设备，其特征在于，所述设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。

本说明书一个或多个实施例提供的一种非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：识别原型图片，在空白组件中可以生成并插入所需的节点元素，对节点元素进行样式编写、事件绑定从而可以进一步封装成可扩展、易维护的通用型组件。减少了从原型图片-基础代码的无意义耗时，通过直接生成原型图片对应的代码结构可以在一定程度上提高开发者的效率，降低无意义的构建结构工作。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本说明书实施例提供的一种基于图片识别的交互方法的流程示意图。

图2为本说明书实施例提供的一种基于图片识别的交互设备示意图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书实施例中的附图，对本说明书实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本说明书一部分实施例，而不是全部的实施例。基于本说明书实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都应当属于本说明书保护的范围。

图1为本说明书实施例提供的一种基于图片识别的交互方法的流程示意图，如图1所示，方法主要包括如下步骤：

步骤S101，获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中。

获取描述需求效果的原型图片，包括：

获取用于描述需求效果的初始图片，识别所述初始图片中用于描述需求的原型像素，以及用于描述美化效果的效果像素；

将所述初始图片中的效果像素进行裁剪，得到保留所述原型像素的原型图片。

首先对设计图上有复杂图像效果并且要实现交互的初始图片进行裁剪，裁剪掉用于描述美化效果的效果像素。其中，效果像素包括用于描述背景色、尺寸、颜色等效果的像素。

在一个实施例中，可以在代码中绘制canvas2d画布，创建image元素，通过canvas.drawImage的API(程序访问接口)将原型图片绘制到canvas创建的画布当中，拿到绘制在画布中的图片信息。

canvas是一种在线协作设计平台，此处仅作为示例，并不作为对本发明的限制，本发明可以采用其他具有画布功能和识别图片得到像素功能的平台。

步骤S102，识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵。

在一些实施例中，所述将所述像素点绘制在预设画布中，

通过在线协作设计平台当中的getImageData、fillRect的方法获取原型图片对于画布的原型像素点阵，其中原型像素点阵指的是按照原型图片分布的像素点的集合，包括原型图片中所有的像素点，以及对应的坐标信息。

步骤S103，将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵。

根据原型像素点阵在空白组件中绘制目标像素点阵，从而可以得到原型图片对应的基础代码，提高了开发效率。

在一些实施中，在所述将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵之后还包括：

在所述空白组件中对所述节点元素进行编辑。

可以对自动生成的节点元素进行编辑，从而可以提高代码的可扩展性、可维护性。

步骤S104，对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标。

在一些实施例中，所述对所述目标像素点阵中的每一个像素点对应创建一个节点元素，包括如下步骤：

获取所述目标像素点阵的像素点数组，对所述像素点数组进行循环，并遍历所述像素点数组中的像素点；

为所述像素点对应创建一个节点元素。

在一些实施例中，所述根据所述像素点的坐标确定所述节点元素的坐标，包括如下步骤：

获取所述像素点的坐标数据，所述坐标数据包括横坐标数据和纵坐标数据；

将所述横坐标数据和所述纵坐标数据分别赋值给所述节点元素的左边界数据，以及所述节点元素的上边界数据。

其中，节点元素指的是DOM元素，也称为文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

获取目标像素点阵的数组，将数组进行循环，对每一个点都创建一个dom元素(例如:div、span、h1、video标签)并对其属性进行绝对定位，将像素点的坐标x,y分别赋值给对应dom元素的left和top值，在创建的空白组件中将点对应的dom元素一一进行绘制。

在一些实施例中，所述在所述节点元素上绑定预设交互事件和元素样式，包括如下步骤：

设置交互事件函数，并采用所述交互事件函数与所述节点元素关联；

根据所述交互事件函数，对所述节点元素设置元素样式。

为节点元素绑定一些基础的交互事件(例如：点击、滑动、移入、移出)，这样就能针对原型中的单一功能生成对应的代码结构了。

在一些实施例汇总

步骤S105，在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。

在一些实施例中，所述在所述节点元素上绑定预设交互事件，包括如下步骤：

设置交互事件函数，并采用所述交互事件函数与所述节点元素关联。

在一些实施例中，所述在所述节点元素上绑定元素样式，还包括如下步骤：

根据所述效果像素确定元素样式；

设置元素样式函数，并采用所述元素样式函数与所述节点元素关联。

在一些实施例中，所述基于所述交互事件进行交互，包括如下步骤：

基于用户针对所述节点元素的触发操作，触发所述预设交互事件。

其中，预设交互事件包括点击、滑动、移入、移出等，用户可以进行对应的操作，从而触发预设交互事件。

综上所述，本发明可以识别原型图片，在空白组件中可以生成并插入所需的节点元素，对节点元素进行样式编写、事件绑定从而可以进一步封装成可扩展、易维护的通用型组件。减少了从原型图片-基础代码的无意义耗时，通过直接生成原型图片对应的代码结构可以在一定程度上提高开发者的效率，降低无意义的构建结构工作。

本说明书实施例还提供一种基于图片识别的交互设备，如图2所示，设备包括：至少一个处理器；以及，与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。

本说明书实施例还提供一种非易失性计算机存储介质，存储有计算机可执行指令，计算机可执行指令设置为：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置、设备、非易失性计算机存储介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。

本领域内的技术人员应明白，本说明书的实施例可提供为方法、系统、或计算机程序产品。因此，本说明书可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本说明书可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本说明书是参照根据本说明书实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本说明书的一个或多个实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书的一个或多个实施例可以有各种更改和变化。凡在本说明书的一个或多个实施例的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。

Claims (7)

1.一种基于图片识别的交互方法，其特征在于，所述方法包括：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互；获取描述需求效果的原型图片，包括：

获取用于描述需求效果的初始图片，识别所述初始图片中用于描述需求的原型像素，以及用于描述美化效果的效果像素；

将所述初始图片中的效果像素进行裁剪，得到保留所述原型像素的原型图片；所述对所述目标像素点阵中的每一个像素点对应创建一个节点元素，包括：

获取所述目标像素点阵的像素点数组，对所述像素点数组进行循环，并遍历所述像素点数组中的像素点；

为所述像素点对应创建一个节点元素；所述根据所述像素点的坐标确定所述节点元素的坐标，包括：

获取所述像素点的坐标数据，所述坐标数据包括横坐标数据和纵坐标数据；

将所述横坐标数据和所述纵坐标数据分别赋值给所述节点元素的左边界数据，以及所述节点元素的上边界数据。

2.根据权利要求1所述的一种基于图片识别的交互方法，其特征在于，所述在所述节点元素上绑定预设交互事件，包括：

设置交互事件函数，并采用所述交互事件函数与所述节点元素关联。

3.根据权利要求1所述的一种基于图片识别的交互方法，其特征在于，所述在所述节点元素上绑定元素样式，还包括：

根据所述效果像素确定元素样式；

设置元素样式函数，并采用所述元素样式函数与所述节点元素关联。

4.根据权利要求1所述的一种基于图片识别的交互方法，其特征在于，所述基于所述交互事件进行交互，包括：

基于用户针对所述节点元素的触发操作，触发所述预设交互事件。

5.根据权利要求4所述的一种基于图片识别的交互方法，其特征在于，在所述将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵之后还包括：

在所述空白组件中对所述节点元素进行编辑。

6.一种基于图片识别的交互设备，其特征在于，所述设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互；获取描述需求效果的原型图片，包括：

获取用于描述需求效果的初始图片，识别所述初始图片中用于描述需求的原型像素，以及用于描述美化效果的效果像素；

将所述初始图片中的效果像素进行裁剪，得到保留所述原型像素的原型图片；所述对所述目标像素点阵中的每一个像素点对应创建一个节点元素，包括：

获取所述目标像素点阵的像素点数组，对所述像素点数组进行循环，并遍历所述像素点数组中的像素点；

为所述像素点对应创建一个节点元素；所述根据所述像素点的坐标确定所述节点元素的坐标，包括：

获取所述像素点的坐标数据，所述坐标数据包括横坐标数据和纵坐标数据；

将所述横坐标数据和所述纵坐标数据分别赋值给所述节点元素的左边界数据，以及所述节点元素的上边界数据。

7.一种非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：

获取描述需求效果的原型图片，并将所述原型图片绘制在预设画布中；

识别所述原型图片的像素点，得到所述原型图片对于所述预设画布的原型像素点阵；

将所述像素点按照所述原型像素点阵的分布绘制在空白组件中，形成与所述原型图片对应的目标像素点阵；

对所述目标像素点阵中的每一个像素点对应创建一个节点元素，并根据所述像素点的坐标确定所述节点元素的坐标；

在所述节点元素上绑定预设交互事件和元素样式，基于所述交互事件进行交互；获取描述需求效果的原型图片，包括：

获取用于描述需求效果的初始图片，识别所述初始图片中用于描述需求的原型像素，以及用于描述美化效果的效果像素；

将所述初始图片中的效果像素进行裁剪，得到保留所述原型像素的原型图片；所述对所述目标像素点阵中的每一个像素点对应创建一个节点元素，包括：

获取所述目标像素点阵的像素点数组，对所述像素点数组进行循环，并遍历所述像素点数组中的像素点；

为所述像素点对应创建一个节点元素；所述根据所述像素点的坐标确定所述节点元素的坐标，包括：

获取所述像素点的坐标数据，所述坐标数据包括横坐标数据和纵坐标数据；

将所述横坐标数据和所述纵坐标数据分别赋值给所述节点元素的左边界数据，以及所述节点元素的上边界数据。