基于canvas的碰撞检测

2017-06-07

本文摘要介绍了一些基于canvas的碰撞检测

一、盒模型碰撞

1、矩形与矩形的碰撞

核心公式：:A.x + A.w >= B.x && B.x + B.w >= A.x && A.y + A.h >= B.y && B.y + B.h >= A.y

说明：矩形的碰撞检测就是检测边与边是否有碰撞或则是否矩形内部

图解(碰撞的情况)：

2、圆与圆的碰撞

核心公式：Math.sqrt(Math.pow(A.x - B.x, 2) + Math.pow(A.y - B.y, 2)) <= A.r + B.r

说明：圆形之间判断，需要判断圆与圆之间的距离是否大于2个圆的半径之和。

图解：

3、圆与矩形的碰撞

核心思路:判断圆形是否与矩形四边碰撞并且矩形的四个角是否在园内即可

图解:

代码如下:

/**
 * 检测圆形A和矩形B是否碰撞
 * @param A
 * @param B
 */
raTore: function (A, B) {
  let x = Math.max(B.x - A.r, 0);
  let y = Math.max(B.y - A.r, 0);
  let w = Math.min(B.x + B.w + A.r, this.canvas.width);
  let h = Math.min(B.y + B.h + A.r, this.canvas.height);
  //分别生成2个矩形,判断远圆心是否在2个矩形之内
  let isInrect1 = A.x >= x && A.x <= w && A.y >= B.y && A.y <= B.y + B.h;
  let isInrect2 = A.x >= B.x && A.x <= B.x + B.w && A.y >= y && A.y <= h;
  //计算4个点是否在园内
  let b1 = Math.pow((B.x - A.x), 2) + Math.pow((B.y - A.y), 2) <= A.r * A.r;
  let b2 = Math.pow((B.x + B.w - A.x), 2) + Math.pow((B.y - A.y), 2) <= A.r * A.r;
  let b3 = Math.pow((B.x - A.x), 2) + Math.pow((B.y + B.h - A.y), 2) <= A.r * A.r;
  let b4 = Math.pow((B.x + B.w - A.x), 2) + Math.pow((B.y + B.h - A.y), 2) <= A.r * A.r;
  // sx sy表示物体xy方向的速度，碰撞之后需要交换速度
  if (isInrect1 || isInrect2 || b1 || b2 || b3 || b4) {
    [A.sy, B.sy] = [B.sy, A.sy];
    [A.sx, B.sx] = [B.sx, A.sx];
  }
},

二、分离轴定理

起因：由于盒模型物体的碰撞检测都是基于规则物体（圆形或则矩形），无法试用其他多边形物体，那么多边形的碰撞咋办呢~

说明：假设2个不规则物体有所接触（碰撞），那么必然存在一个方向的投影（可以想想成太阳照射产生的影子）会重合,即 若在某一角度光源下，两物体的投影存在间隙，则为不碰撞，否则为发生碰撞

图解：

在程序中，遍历所有角度是不现实的。那如何确定投影轴呢？其实投影轴的数量与多边形的边数相等即可。

抽取整个过程:

1、获取多边形所有投影轴
2、遍历投影轴获取投影
3、判断投影是否存在间隙,如果是则不碰撞

涉及的向量知识

1、向量表示法:AB或则a或则{x,y}
2、向量的垂直向量的算法:假如原有向量为{x,y},垂直向量为{m,n},则xm+ny=0;也就是说{x,y}的垂直向量为{-y,x}k或则{x,-y}K
3、向量的点积运算:A*B = x1y1+x2y2 = |A||B|cos0

demo地址：

https://github.com/xxyj/wuec

三、像素检测

疑问：分离轴定理只适用于凸多边形，那么凹多边形又该如何处理呢？？？

像素检测原理：检测2个物体在同一像素是否有覆盖,有则碰撞,无则不碰撞
关键函数：getImageData,globalCompositeOperation(两者使用其一即可)，
使用原理：通过函数计算两个物体在同一个像素点的透明度，然后通过该像素点的实际透明情况来判断是否有碰撞。具体参考：demo

核心代码

//需要创建一个离线canvas
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
ctx.drawImage(this.offImage, 0, 0, this.canvas.width, this.canvas.height);
//如果有交集，交集处的显示方式
ctx.globalCompositeOperation = 'destination-in';
 ctx.drawImage(this.imgObject[4], this.x, this.y, 27, 41);
let data = ctx.getImageData(Math.abs(this.x) - 28, 0, 56, 30).data;
canvas = null;
ctx = null;
//判断每个像素点的透明度
return data.some(function (item, index) {
  return (index + 1) % 4 === 0 && item !== 0;
})
return false;

四、其他方式

疑问：像素检测非常的消耗性能，如果需要计算的面积非常的大，该如何处理？

关键函数：isPointInPath(判断一个点是否在当前路径中),使用起来非常简单
具体的还是看demo吧

五、总结

碰撞检测的方式非常的多，各有优劣，实际使用过程中还是需要混合使用，比如说：我们一般可以在面积比较大的时候使用盒模型碰撞（将一些不规则物体先假设成矩形或则圆），确定出可能碰撞的小区域之后再使用像素检测来进行精确判断!

熊旭

基于canvas的碰撞检测

一、盒模型碰撞

1、矩形与矩形的碰撞

2、圆与圆的碰撞

3、圆与矩形的碰撞

二、分离轴定理

三、像素检测

四、其他方式

五、总结

参考文献