碰撞检测
碰撞检测( testObject:Object, threshold:[Number | String] ) : Boolean
提供一种简便方法来测试目标元素是否根据指定阈值与另一特定元素(或鼠标位置)发生重叠。
参数
testObject: 对象
需要进行碰撞检测的对象,可以是以下任意一种:一个元素、一个包含坐标的鼠标/触摸事件
pageX
和pageY
属性,类似"#element2"
的选择器文本,或者定义矩形的通用对象(它应该具有top, left, right,
和bottom
属性)。threshold:[数字 | 字符串]
(默认值 =
0
) - 该值可以是一个数字,表示正向hitTest所需的最小重叠像素数;也可以是一个字符串百分比(如"50%"
),表示正向hitTest所需的最小重叠面积百分比。零(0)将检查是否存在任何重叠。
返回值:布尔值
返回true
如果检测到重叠(根据阈值判断),false
否则。
加载中...
细节
提供了一种简便方法来测试target
元素是否与特定元素(或鼠标位置)重叠,具体取决于你(可选)定义的threshold
参数。
Draggable.create("#element1", {
type: "x,y",
onDragEnd: function(e) {
//see if the target overlaps with the element with ID "element2"
if (this.hitTest("#element2")) {
//do stuff
}
}
});
默认情况下,hitTest()
只要有任何重叠就会返回true,但你可以可选地定义一个threshold
参数,例如,仅当至少有20个像素重叠时才返回true,或者当任一元素之间有50%的表面积重叠时返回true,或根据你定义的任何其他条件:
Draggable.create("#element1", {
type: "x,y",
onDragEnd: function(e) {
//checks if at least 20 pixels are overlapping:
if (this.hitTest("#element2", 20)) {
//do stuff
}
//checks if at least 50% of the surface area of either element is overlapping:
if (this.hitTest("#element3", "50%")) {
//do stuff
}
}
});
加载中...
你可以使用hitTest(window)
来检测一个元素是否在视口中可见。
在DOM中无法对非矩形形状进行像素级精确的碰撞检测。Draggable.hitTest(element1, element2, 20)
. 演示.
重要提示:还有一个静态版本的方法,允许你传递两个元素和对象来进行测试,比如hitTest()
使用了浏览器的getBoundingClientRect()
方法获取包围整个元素的矩形边界框,因此,如果你旋转了一个元素,或者它是圆形形状,该边界框可能会超出视觉边缘。