一种网页元素碰撞判断方法及装置与流程

文档序号:13252901阅读:190来源:国知局
技术领域本申请涉及计算机图形图像处理技术领域,尤其涉及一种网页元素碰撞判断方法及装置。

背景技术:
现有技术中,在进行网页游戏开发或者运行网页游戏的过程中,有可能会需要对网络游戏页面中出现的网页元素是否发生碰撞进行检测。比如,若需要在网页元素发生碰撞时产生一些动画效果,则需要执行该检测。其中需要说明的是,“网页元素发生碰撞”,是指不同网页元素在网页中发生重叠。在得到碰撞检测结果后,可根据碰撞检测结果执行对应的操作,例如,在避免碰撞的情形下,当检测到将会发生碰撞时,调整网页元素的相对位置;在利用碰撞信息的情形下,当检测到发生碰撞时,根据碰撞信息,调整网页元素的相对位置。目前,检测网页元素是否发生碰撞的方式主要有三种,分别为:基于盒子模型(BoxModel,简称盒模型)的检测方式、基于网页元素中心距的检测方式,以及基于关键点的检测方式。第一种方式的适用对象为形状为矩形的网页元素。该方式的实现原理为:基于网络游戏页面中的各种网页元素均位于相应的盒模型中,且每个网页元素轮廓线均与相应的盒模型的内容边缘(elementedge)重合这一特点,直接判断盒模型是否重叠,并根据判断结果确定盒模型中的网页元素是否重叠。该方式的缺陷在于,无法检测形状不为矩形的网页元素是否发生碰撞。第二种方式的适用对象为形状规则的网页元素。该方式的实现原理为:判断两个网页元素的中心点的连线是否小于单个网页元素的中心至网页元素的轮廓线的距离之和,若小于,则判定两个网页元素发生碰撞。例如,当两个网页元素均为圆形时,如果两个圆心之间的距离小于两个圆的半径之和,则可以判定两个网页元素之间发生碰撞。该方式的缺陷在于,无法检测形状不规则的网页元素是否发生碰撞。第三种方式的适用对象为部分形状不规则的网页元素。该方式的实现原理是,通过用户手动标注的方式,在待检测的两个网页元素的轮廓线上标注多个关键点;后续可以在检测到这两个网页元素的位置发生变化后,判断通过分别连接这两个网页元素的关键点形成的区域是否存在重合;若存在重合,则判定两个网页元素发生碰撞;否则判定两个网页元素未发生碰撞。基于该方式,例如,针对图1a所示的网页元素A和网页元素B而言,由于通过连接网页元素A上的关键点A1~A4所构成的区域LA,与通过连接网页元素B上的关键点B1~B4所构成的区域LB存在重合,因此判定网页元素A和网页元素B发生碰撞。该方式存在的缺陷在于:可能会得到不准确的判断结果。比如针对如图1b所示的网页元素C和网页元素D而言,由于通过连接网页元素C上的关键点C1~C4所构成的区域LC,与通过连接网页元素D上的关键点D1~D4所构成的区域LD不存在重合,因此判定网页元素C和网页元素D未发生碰撞。然而,从图1b中可以看出,网页元素C和网页元素D实际上发生了碰撞。采用上述第三种方式对其他网页中出现的形状不规则的网页元素是否发生碰撞进行检测时,也会存在判断结果不准确的问题。

技术实现要素:
本申请实施例提供一种网页元素碰撞判断方法,用以提高对于形状不规则的网页元素是否发生碰撞的判断结果准确性。本申请实施例还提供一种网页元素碰撞判断装置,用以提高对于形状不规则的网页元素是否发生碰撞的判断结果准确性。本申请实施例采用下述技术方案:一种网页元素碰撞判断方法,包括:根据第一基准对象在网页中的当前位置信息,以及表示第一基准对象与网页中第一网页元素轮廓线的相对位置的信息,确定第一网页元素轮廓线的当前位置信息;根据第二基准对象在网页中的当前位置信息,以及表示第二基准对象与网页中第二网页元素轮廓线的相对位置的信息,确定第二网页元素轮廓线的当前位置信息;根据第一网页元素轮廓线的当前位置信息,以及第二网页元素轮廓线的当前位置信息,确定第一网页元素和第二网页元素是否发生碰撞;其中,当第一基准对象在网页中的位置发生变化时,第一基准对象与第一网页元素的相对位置不变;当第二基准对象在网页中的位置发生变化时,第二基准对象与第二网页元素的相对位置不变。一种网页元素碰撞判断装置,包括:位置信息确定单元,用于根据第一基准对象在网页中的当前位置信息,以及表示第一基准对象与网页中第一网页元素轮廓线的相对位置的信息,确定第一网页元素轮廓线的当前位置信息;根据第二基准对象在网页中的当前位置信息,以及表示第二基准对象与网页中第二网页元素轮廓线的相对位置的信息,确定第二网页元素轮廓线的当前位置信息;碰撞判断单元,用于根据位置信息确定单元确定的第一网页元素轮廓线的当前位置信息以及第二网页元素轮廓线的当前位置信息,确定第一网页元素和第二网页元素是否发生碰撞;其中,当第一基准对象在网页中的位置发生变化时,第一基准对象与第一网页元素的相对位置不变;当第二基准对象在网页中的位置发生变化时,第二基准对象与第二网页元素的相对位置不变。本申请实施例采用的上述至少一个技术方案能够达到以下有益效果:由于即便网页元素的形状不规则,也可以根据网页元素相对位置固定的基准对象的位置信息,以及表示网页元素和基准对象的相对位置的信息,准确确定出网页元素轮廓线的当前位置信息,进而针对不同的网页元素而言,可以根据其各自轮廓线的当前位置信息,准确确定出所述不同的网页元素是否发生碰撞。附图说明此处所说明的附图用来提供对本申请的进一步理解,构成本申请的一部分,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:图1a为利用现有技术中的基于关键点的检测方式检测到网页元素未发生碰撞的原理示意图;图1b为利用现有技术中的基于关键点的检测方式检测到网页元素未发生碰撞的原理示意图;图2为实施例1提供的网页元素碰撞判断方法的实现流程示意图;图3为盒模型的一种典型结构示意图;图4为实施例2提供的网页元素碰撞判断装置的结构示意图。具体实施方式为使本申请的目的、技术方案和优点更加清楚,下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然,所描述的实施例仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。以下结合附图,详细说明本申请各实施例提供的技术方案。实施例1为了提高对于形状不规则的网页元素是否发生碰撞的判断结果准确性,本申请实施例1提供了一种如图2所示的网页元素碰撞判断方法。该方法主要包括下述步骤:步骤21,根据第一基准对象在网页中的当前位置信息,以及表示第一基准对象与该网页中第一网页元素轮廓线的相对位置的信息,确定第一网页元素轮廓线的当前位置信息;其中,第一基准对象和第一网页元素的相对位置满足下述条件:当第一基准对象在网页中的位置发生变化时,第一基准对象与第一网页元素的相对位置不变。在一种实施方式中,第一基准对象可以是由用户设定的。比如,用户可以在网页包含的网页元素中,选取满足上述条件的一个网页元素作为第一基准对象;或者,用户还可以输入一个元素到网页中作为网页元素,并指定以该网页元素作为第一基准对象。在另一种实施方式中,考虑到网页中所有的网页元素均可以处于相应的盒模型中,且通过对盒模型的设置,可以使得盒模型的特定部分与盒模型中的网页元素保持相对位置固定。因此,可以设置第一网页元素对应的盒模型的特定部分作为第一基准对象。盒模型的一种典型结构请参见图3。本申请实施例中,盒模型的特定部分可以但不限于包括盒模型的下述部分中的一个或多个:整个外边距边缘(marginedge);外边距边缘上的一点(一般是外边距边缘左上角顶点);外边距边缘的一段;整个边框(border);边框上的一点;边框的一段;整个内边距边缘(paddingedge);内边距边缘上的一点;内边距边缘的一段。需要说明的是,无论是采用什么作为第一基准对象,该第一基准对象的位置信息是可以被跟踪和记录的;或者在利用该位置信息定位第一网页元素的当前位置信息时,该位置信息是可以采用其他方式获得的。比如,以盒模型为例,其位置信息是可以从网页的html代码中获取到的。此外需要说明的是,在一种实施方式中,“表示第一基准对象与该网页中第一网页元素轮廓线的相对位置的信息”可以是预先确定的。在一种实施方式中,预先确定的该信息可以保存在本地。在一种实施方式中,所述表示第一基准对象与该网页中第一网页元素轮廓线的相对位置的信息,具体可以通过执行下述子步骤确定:子步骤a:获得包含第一网页元素的位图;比如,当第一网页元素是以位图格式出现在网页中时,可以直接从网页中提取包含第一网页元素的位图;而当第一网页元素是以矢量图格式出现在网页中时,可以对第一网页元素的格式进行转换,从而得到包含第一网页元素的位图。需要说明的是,获得的该位图一般仅包含单个网页元素,比如仅包含第一网页元素。这是由于若该位图中若包含了多个网页元素,且该些网页元素发生了碰撞,则通过下述子步骤b,有可能无法区分构成不同网页元素轮廓线的像素点。以本申请实施例提供的该方法应用到网页游戏开发过程中为例,由于开发人员初始绘制的、包含有第一网页元素的位图或者矢量图中,一般不会包含其他网页元素,因此可以根据开发人员初始绘制的、包含有第一网页元素的位图或者矢量图,获得子步骤a中所述的包含第一网页元素的位图。子步骤b:通过逐行扫描获得的包含第一网页元素的位图的方式,确定构成第一网页元素轮廓线的像素点在网页中的位置;比如,通过逐行扫描获得的位图的方式,可以实现从构成第一网页元素的所有像素点中,分辨出构成第一网页元素轮廓线的像素点,并确定出构成第一网页元素轮廓线的像素点在该位图中的位置。进一步地,根据该位图在网页中所处位置,或者根据该位图对应的矢量图在网页中所处位置,确定出构成第一网页元素轮廓线的像素点在网页中的位置。子步骤c:根据第一基准对象在该网页中的位置,以及确定出的构成第一网页元素轮廓线的像素点在网页中的位置,确定表示第一基准对象与网页中第一网页元素轮廓线的相对位置的信息。比如,以第一基准对象是第一网页元素对应的盒模型的外边距边缘左上角顶点为例,在通过执行子步骤b,确定出构成第一网页元素轮廓线的像素点在网页中的位置后,可以对该顶点在网页坐标系中的坐标值,以及构成第一网页元素轮廓线的各像素点分别在该坐标系中的坐标值进行保存。这里所说的网页坐标系一般可以是基于网页建立的坐标系,其坐标原点一般为网页左上角顶点。上述保存对象即相当于“表示第一基准对象与网页中第一网页元素轮廓线的相对位置的信息”。基于上述保存对象,后续在需要对第一网页元素是否与其他网页元素发生碰撞进行检测时,可以从网页当前的html代码中,读取第一网页元素对应的盒模型的外边距边缘左上角顶点在上述坐标系中的当前坐标值,并与保存对象中的该顶点的坐标值进行比较,确定坐标值偏移量。进一步地,可以根据该坐标值偏移量,以及保存对象中的构成第一网页元素轮廓线的各像素点分别在该坐标系中的坐标值,确定出构成第一网页元素轮廓线在该坐标系中的坐标值。步骤22,根据第二基准对象在网页中的当前位置信息,以及表示第二基准对象与网页中第二网页元素轮廓线的相对位置的信息,确定第二网页元素轮廓线的当前位置信息;其中,第二基准对象和第二网页元素的相对位置满足条件:当第二基准对象在网页中的位置发生变化时,第二基准对象与第二网页元素的相对位置不变。步骤22中所述的各种名词的定义与步骤21中所述的各种名词的定义类似;步骤22的可选实施方式与前文所述的步骤21的可选的实施方式类似,此处不再赘述。需要说明的是,本申请实施例中,可以同步执行步骤21和步骤22,也可以是依次执行步骤21和步骤22。具体地,步骤21可以先于步骤22执行,或者步骤22可以先于步骤21执行。在一种实施方式中,由于若第一网页元素和第二网页元素发生碰撞,碰撞位置会发生在第一网页元素当前所处网页区域,或第二网页元素当前所处网页区域,因此,在确定第二网页元素轮廓线的当前位置信息时,可以以第一网页元素当前所处网页区域的位置信息作为参考,仅确定第二网页元素当前处于网页区域内的部分的位置信息,从而实现对处理资源的节省。基于该实施方式的思路,步骤22可以包括:根据第一网页元素轮廓线的当前位置信息,确定第一网页元素当前所处网页区域的位置信息;根据网页区域的位置信息、第二基准对象在网页中的当前位置信息,以及表示第二基准对象与网页中第二网页元素轮廓线的相对位置的信息,确定第二网页元素当前处于网页区域内的部分的位置信息。类似地,也可以以第二网页元素当前所处网页区域的位置信息作为参考,仅确定第一网页元素当前处于网页区域内的部分的位置信息,从而实现对处理资源的节省。还需要说明的是,当第一基准对象和第二基准对象均为盒模型时,由于网页元素与相应的盒模型的位置关系为“网页元素处于盒模型中”,因此,可以通过对两个网页元素分别对应的盒模型在网页中的当前位置是否重叠进行判断,实现对这两个网页元素是否发生碰撞进行预估。若判断结果为是,则可以执行确定网页元素轮廓线的当前位置信息的操作,若判断结果为否,则可以不执行确定网页元素轮廓线的当前位置信息的操作。当然,当第一基准对象和第二基准对象不是盒模型时,视情况也可以采用上述预估方法。步骤23,根据第一网页元素轮廓线的当前位置信息,以及第二网页元素轮廓线的当前位置信息,确定第一网页元素和第二网页元素是否发生碰撞。比如,若这里所说的当前位置信息是网页坐标系中的坐标值,则可以判断第一网页元素轮廓线的坐标值中,是否存在与第二网页元素轮廓线的坐标值相同的坐标值;若判断结果为是,则可以判定第一网页元素与第二网页元素发生碰撞;否则,判定第一网页元素和第二网页元素没有发生碰撞。采用本申请实施例提供的上述方法,由于即便网页元素的形状不规则,也可以根据网页元素相对位置固定的基准对象的位置信息,以及表示网页元素和基准对象的相对位置的信息,准确确定出网页元素轮廓线的当前位置信息,进而针对不同的网页元素而言,可以根据其各自轮廓线的当前位置信息,准确确定出所述不同的网页元素是否发生碰撞。实施例1所提供方法的各步骤的执行主体均可以是同一设备,或者,该方法的各步骤也可以由不同设备作为执行主体。比如,步骤21和步骤22的执行主体可以为设备1,步骤23的执行主体可以为设备2;又比如,步骤21的执行主体可以为设备1,步骤22和步骤23的执行主体可以为设备2;等等。实施例1所提供的方法适用于对形状不规则的网页元素是否发生碰撞进行判断,也适用于对形状规则的网页元素是否发生碰撞进行检测。采用实施例1所提供的方法,当基准对象为盒模型时,可以通过从网页的html代码中获取盒模型在网页中当前位置信息的方式,并根据该当前位置信息,以及表示盒模型与相应的网页元素之间的相对位置的信息,快捷地实现网页元素是否发生碰撞进行检测。该方法耗费的处理资源少,检测结果准确度高,尤其适用于对于网页元素是否发生碰撞进行实时跟踪检测。实施例2基于与实施例1提供的方法相同的发明构思,实施例2提供了一种网页元素碰撞判断装置,用以提高对于形状不规则的网页元素是否发生碰撞的判断结果准确性。如图4所示,该网页元素碰撞判断装置包括:位置信息确定单元41和碰撞判断单元42。以下对该些单元的功能实现方式进行说明:位置信息确定单元41,用于根据第一基准对象在网页中的当前位置信息,以及表示第一基准对象与网页中第一网页元素轮廓线的相对位置的信息,确定第一网页元素轮廓线的当前位置信息;根据第二基准对象在网页中的当前位置信息,以及表示第二基准对象与网页中第二网页元素轮廓线的相对位置的信息,确定第二网页元素轮廓线的当前位置信息;碰撞判断单元42,用于根据位置信息确定单元41确定的第一网页元素轮廓线的当前位置信息以及第二网页元素轮廓线的当前位置信息,确定第一网页元素和第二网页元素是否发生碰撞。其中,当第一基准对象在网页中的位置发生变化时,第一基准对象与第一网页元素的相对位置不变;当第二基准对象在网页中的位置发生变化时,第二基准对象与第二网页元素的相对位置不变。在一种实施方式中,上述装置还可以包括:位置重叠判定单元,用于在位置信息确定单元41确定第一网页元素轮廓线的当前位置信息或第二网页元素轮廓线的当前位置信息前,确定第一基准对象在网页中的当前位置和第二基准对象在网页中的当前位置发生重叠。在一种实施方式中,位置信息确定单元41可以用于:根据第一网页元素轮廓线的当前位置信息,确定第一网页元素当前所处网页区域的位置信息;根据网页区域的位置信息、第二基准对象在网页中的当前位置信息,以及表示第二基准对象与网页中第二网页元素轮廓线的相对位置的信息,确定第二网页元素当前处于网页区域内的部分的位置信息。在一种实施方式中,上述装置还可以包括相对位置确定单元。该单元用于:获得包含第一网页元素的位图;通过逐行扫描该位图的方式,确定构成第一网页元素轮廓线的像素点在网页中的位置;根据第一基准对象在网页中的位置,以及上述像素点在网页中的位置,确定表示第一基准对象与网页中第一网页元素轮廓线的相对位置的信息。在一种实施方式中,第一基准对象为第一网页元素对应的盒模型的特定部分;第二基准对象为第二网页元素对应的盒模型的特定部分。采用本申请实施例提供的上述装置,由于即便网页元素的形状不规则,也可以根据网页元素相对位置固定的基准对象的位置信息,以及表示网页元素和基准对象的相对位置的信息,准确确定出网页元素轮廓线的当前位置信息,进而针对不同的网页元素而言,可以根据其各自轮廓线的当前位置信息,准确确定出所述不同的网页元素是否发生碰撞。本领域内的技术人员应明白,本申请的实施例可提供为方法、系统、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flashRAM)。内存是计算机可读介质的示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitorymedia),如调制的数据信号和载波。还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。本领域技术人员应明白,本申请的实施例可提供为方法、系统或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。
当前第1页1 2 3 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1