一种绘制座位图的方法和装置与流程

本发明涉及信息处理技术领域，特别是涉及一种绘制座位图的方法和装置。

背景技术：

目前，越来越多的票务网页提供在线座位图供用户选择购买自己想要的座位，在购买之后座位会被锁定，在这之后的用户不能选择被锁定的座位。在现有技术中，绘制在线座位图的方式是在网页中插入多个文档对象模型(英文：Document Object Model，缩写：DOM)，每个DOM对象在网页中显示为一个座位，也就是说，被插入多个DOM对象在网页中显示为座位图。具体地，浏览器获得服务器端的有关座位的信息后，创建和座位个数相同数量个DOM对象，浏览器将上述DOM对象统一插入到网页中，其中，每个DOM对象在网页中显示为一个座位。但发明人经过研究发现，因为浏览器本身原因，创建和插入DOM对象会触发浏览器其他操作行为很耗费时间，尤其是座位图中座位数量较多时，创建和插入较多的DOM对象就会花费更多的时间，进而网页显示座位图，即生成座位图需要的时间也更多。可见，基于多个DOM对象绘制在线座位图的方法，多个DOM对象的创建与插入耗时较多，导致网页加载过慢，影响用户购票体验。

技术实现要素：

本发明所要解决的技术问题是，提供一种绘制座位图的方法和装置，利用浏览器支持的画布(英文：Canvas)技术绘制座位图，以减少生成和插入DOM对象的操作，耗时短，从而网页加载快，改善了用户体验。

第一方面，提供了一种生成座位图的方法，包括：

响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；

对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，所述行列信息用于描述所述座位集合中所述座位所在的行和列；

根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位，以便在所述画布上形成与所述座位集合对应的座位图。

优选的，还包括：

根据所述座位集合占据实际空间的大小设置所述画布的大小。

优选的，所述座位集合占据实际空间的大小由所述座位集合中座位的数量，所述座位的大小和所述座位之间的距离计算得到。

优选的，还包括：

存储所述行列信息和与所述行列信息对应的所述座位的标识。

优选的，还包括：

响应于用户的点击座位图中座位的操作，获取所述点击位置的坐标；

将所述点击位置的坐标转换为所述坐标所属的行列信息；

根据与所述坐标所属的行列信息对应的所述座位的标识确定目标座位；

将所述目标座位的信息发送给服务器，以便服务器锁定所述目标座位。

第一方面，提供了一种生成座位图的装置，包括：

插入单元，用于响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；

计算单元，用于对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，所述行列信息用于描述所述座位集合中所述座位所在的行和列；

绘制单元，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位，以便在所述画布上形成与所述座位集合对应的座位图。

优选的，还包括：

设置单元，用于根据所述座位集合占据实际空间的大小设置所述画布的大小。

优选的，所述座位集合占据实际空间的大小由所述座位集合中座位的数量，所述座位的大小和所述座位之间的距离计算得到。

优选的，还包括：

存储单元，用于存储所述行列信息和与所述行列信息对应的所述座位的标识。

优选的，还包括：

获取单元，用于响应于用户的点击座位图中座位的操作，获取所述点击位置的坐标；

转换单元，用于将所述点击位置的坐标转换为所述坐标所属的行列信息；

确定单元，用于根据与所述坐标所属的行列信息对应的所述座位的标识确定目标座位；

发送单元，用于将所述目标座位的信息发送给服务器，以便服务器锁定所述目标座位。

与现有技术相比，本发明具有以下优点：

在本发明实施例中,响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位以形成座位图。由此可见，现有技术中每个DOM都是独立的，需要创建并插入与所述座位数量相同的DOM对象才能绘制出座位图，而本发明实施例只需要在网页中插入一个画布对象，通过所述座位的行列信息计算所述座位在画布上的坐标就可以画布上绘制出整个座位图，不需要多次创建和插入DOM对像，这样就大大减少了绘制座位形成座位图的时间，从而也减少了页面加载的时间，提高了用户的体验。

附图说明

为了更清楚地说明本发明实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1为本发明实施例中一种应用场景所涉及的系统框架示意图；

图2为本发明实施例中一种绘制座位图的方法的流程示意图；

图3为本发明实施例中另一种绘制座位图的方法的流程示意图；

图4为本发明实施例中一种绘制座位图的装置的结构示意图。

具体实施方式

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

发明人经过研究发现，现有技术的方式创建和插入DOM对象会触发浏览器其他操作行为很耗费时间，尤其是座位图中座位数量较多时，创建和插入较多的DOM对象就会花费更多的时间，进而网页显示座位图，即生成座位图需要的时间也更多，导致网页加载过慢，影响用户购票体验。

为了解决这一问题，在本发明实施例中，响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位以形成座位图。由此可见，现有技术中每个DOM都是独立的，需要创建并插入与所述座位数量相同的DOM对象才能绘制出座位图，而本发明实施例只需要在网页中插入一个画布对象，通过所述座位的行列信息计算所述座位在画布上的坐标就可以画布上绘制出整个座位图，不需要多次创建和插入DOM对像，这样就大大减少了绘制座位形成座位图的时间，从而也减少了页面加载的时间，提高了用户的体验。

举例来说，本发明实施例的场景之一，可以是应用到如图1所示的场景中。该场景可以包括服务器101、浏览器102、网页103，其中，服务器101和浏览器102可以交互，浏览器102和网页103可以交互。浏览器102在接收到服务器101发送的为座位集合绘制座位图的指令后，响应于为座位集合绘制座位图的指令，在网页103中插入一个画布对象，所述画布对象用于在网页103上显示画布；对于所述座位集合中的座位，浏览器102根据所述座位的行列信息，计算所述座位在所述画布中的坐标，所述行列信息用于描述在所述座位集合中所述座位所在的行和列；浏览器102根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位，以便在所述画布上形成与所述座位集合对应的座位图。

可以理解的是，在上述应用场景中，虽然将本发明实施方式的动作描述由浏览器102执行，但是本发明在执行主体方面不受限制，只要执行了本发明实施方式所公开的动作即可。

可以理解的是，上述场景仅是本发明实施例提供的一个场景示例，本发明实施例并不限于此场景。

下面结合附图，通过实施例来详细说明本发明实施例中绘制座位图的方法、装置和设备的具体实现方式。

示例性方法

参见图2，示出了本发明实施例中一种生成座位图的方法的流程示意图，在本实施例中，所述方法例如可以包括以下步骤：

步骤201：响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布。

所述座位集合可以是一定空间内所有座位的一个集合，例如电影院中一个厅所有观影座位的集合。

所述画布是一个矩形区域，可以控制其每一像素，画布有它自己本身的属性、方法和事件，其中就有绘图的方法，利用浏览器支持的脚本语言调用画布接口就可以在所述画布上可以绘制矩形、圆形、字符等。

步骤202：对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，所述行列信息用于描述所述座位集合中所述座位所在的行和列。

步骤203：根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位，以便在所述画布上形成与所述座位集合对应的座位图。

需要说明的是，在绘制座位时，不考虑画布的大小，仅依照所述座位的行列信息计算出的坐标绘制座位，此种方式可能出现仅仅绘制出的座位的行列信息与座位集合相同，而座位的大小、座位之间的距离等与座位集合相似度低。如果插入画布对象后所显示的画布的大小与所述座位集合占据实际空间的大小成有相应的关系，例如成比例时，绘制出的座位图中座位的行列信息、座位的大小以及座位之间的距离与座位集合的相似度更高。因此，在本实施例的一些实施方式中，例如还可以包括：根据所述座位集合占据实际空间的大小设置所述画布的大小。例如，在得到所述座位集合占据实际空间的大小后，成比例的压缩来设置所述画布大小。

可以理解的是，一般情况下，获取座位集合的数据中有座位的大小、座位之间的距离和座位的数量，这时可以根据单个座位的大小、座位之间的距离和行列中座位的数量可以计算座位集合的行列大小，从而得到所述座位集合占据实际空间的大小。在本实施例中，所述座位集合占据实际空间的大小由所述座位集合中座位的数量，所述座位的大小和所述座位之间的距离计算得到。当然并不限于上述方式得到座位集合占据实际空间的大小，也可以是客户端直接从服务器获取所述座位集合占据实际空间的大小。

需要说明的是，绘制座位有两种方式，一种是计算一个座位在所述画布中的坐标后，然后所述画布中绘制一个座位，直至绘制出所有座位；另一种是一次性计算所有座位在所述画布中的坐标后，在所述画布中一次性绘制所述所有座位。

需要说明的是，获取到所述座位的行列信息后，保存行列信息以及与所述行列信息对应的所述座位的标识，以便当知道坐标信息时，可以将坐标信息直接转换成行列信息，进而可以根据行列信息直接找到相对应的座位。在本实施例的一些实施方式中，例如还可以包括：存储所述行列信息和与所述行列信息对应的所述座位的标识。

需要说明的是，在锁定座位图中的座位时，一般使用循环遍历法，即需要锁定的目标座位的坐标与座位图中座位的坐标一次一次地进行比较，直到比较结果相匹配时，才能确定目标座位然后锁定目标座位，执行起来比较复杂，而本实施例中的座位图本就是循环遍历所有座位而绘制的，因此只需要将需要锁定的目标座位的坐标转换为行列信息，根据行列信息对应的座位的标识来确定目标座位，进而锁定目标座位，执行起来简单方便，耗时短。在本实施例的一些实施方式中，例如还可以包括：响应于用户的点击座位图中座位的操作，获取所述点击位置的坐标；将所述点击位置的坐标转换为所述坐标所属的行列信息；根据与所述坐标所属的行列信息对应的所述座位的标识确定目标座位；将所述目标座位的信息发送给服务器，以便服务器锁定所述目标座位。

需要说明的是，当所述点击位置的坐标无法转换为所述坐标所属的行列信息时，即表示用户点击座位图的操作并没有点击到座位，有可能是点击是座位与座位的空隙处，此时不会锁定任何座位，用户需要再次进行点击操作以便执行锁定座位的步骤。

在本实施例中，在确定目标座位之后，可以改变目标座位的显示状态，以便用户可以看到所点击的座位是其所选择的目标座位，也便于后面的用户显而易见地知道该座位已被锁定不能再选择此座位，一般情况下，改变目标座位的显示状态可以采用改变目标座位颜色的方式，当然，本实施例并不拘泥于此方式。

通过本实施例提供的各种实施方式，响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位以形成座位图。由此可见，现有技术中每个DOM都是独立的，需要创建并插入与所述座位数量相同的DOM对象才能绘制出座位图，而本发明实施例只需要在网页中插入一个画布对象，通过所述座位的行列信息计算所述座位在画布上的坐标就可以画布上绘制出整个座位图，不需要多次创建和插入DOM对像，这样就大大减少了绘制座位形成座位图的时间，从而也减少了页面加载的时间，提高了用户的体验。

参见图3，示出了本发明实施例中另一种生成座位图的方法的流程示意图，在本实施例中，所述方法例如可以包括以下步骤：

步骤301：响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布。

步骤302：根据所述座位集合中座位的数量，所述座位的大小和所述座位之间的距离计算所述座位集合占据实际空间的大小。

步骤303：根据所述座位集合占据实际空间的大小设置所述画布的大小。

步骤304：对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，所述行列信息用于描述所述座位集合中所述座位所在的行和列。

步骤305：根据所述座位在所述画布中的坐标，在所述画布中依次绘制单个座位，以便在所述画布上形成与所述座位集合对应的座位图。

需要说明的是，依次绘制单个座位后，可以根据所绘制的座位的数量与所述座位集合中座位数量的比较来判断是否绘制完毕，如果所绘制的座位的数量与所述座位集合中座位数量不一致，则继续绘制剩余座位。此方式可以避免出现所绘制的座位图不完整的情况。

通过本实施例提供的各种实施方式，响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位以形成座位图。由此可见，现有技术中每个DOM都是独立的，需要创建并插入与所述座位数量相同的DOM对象才能绘制出座位图，而本发明实施例只需要在网页中插入一个画布对象，通过所述座位的行列信息计算所述座位在画布上的坐标就可以画布上绘制出整个座位图，不需要多次创建和插入DOM对像，这样就大大减少了绘制座位形成座位图的时间，从而也减少了页面加载的时间，提高了用户的体验。

示例性设备

参见图4，示出了本发明实施例中一种生成座位图的装置的结构示意图。在本实施例中，所述装置例如具体可以包括：

插入单元401，用于响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布。

计算单元402，用于对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，所述行列信息用于描述所述座位集合中所述座位所在的行和列。

绘制单元403，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位，以便在所述画布上形成与所述座位集合对应的座位图。

可选的，所述装置例如还可以包括：设置单元，用于根据所述座位集合占据实际空间的大小设置所述画布的大小。

可选的，所述座位集合占据实际空间的大小由所述座位集合中座位的数量，所述座位的大小和所述座位之间的距离计算得到。

可选的，所述装置例如还可以包括：存储单元，用于存储所述行列信息和与所述行列信息对应的所述座位的标识。

可选的，所述装置例如还可以包括：

获取单元，用于响应于用户的点击座位图中座位的操作，获取所述点击位置的坐标；

转换单元，用于将所述点击位置的坐标转换为所述坐标所属的行列信息；

确定单元，用于根据与所述坐标所属的行列信息对应的所述座位的标识确定目标座位；

发送单元，用于将所述目标座位的信息发送给服务器，以便服务器锁定所述目标座位。

通过本实施例提供的各种实施方式，响应于为座位集合绘制座位图的指令，在网页中插入一个画布对象，所述画布对象用于在网页上显示画布；对于所述座位集合中的座位，根据所述座位的行列信息，计算所述座位在所述画布中的坐标，根据所述座位在所述画布中的坐标，在所述画布中绘制所述座位以形成座位图。由此可见，现有技术中每个DOM都是独立的，需要创建并插入与所述座位数量相同的DOM对象才能绘制出座位图，而本发明实施例只需要在网页中插入一个画布对象，通过所述座位的行列信息计算所述座位在画布上的坐标就可以画布上绘制出整个座位图，不需要多次创建和插入DOM对像，这样就大大减少了绘制座位形成座位图的时间，从而也减少了页面加载的时间，提高了用户的体验。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到上述实施例方法中的全部或部分步骤可借助软件加通用硬件平台的方式来实现。基于这样的理解，本发明的技术方案可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如只读存储器(英文：read-only memory，ROM)/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者诸如路由器等网络通信设备)执行本发明各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于方法实施例和设备实施例而言，由于其基本相似于系统实施例，所以描述得比较简单，相关之处参见系统实施例的部分说明即可。以上所描述的设备及系统实施例仅仅是示意性的，其中作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述仅是本发明的优选实施方式，并非用于限定本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。