一，原理介紹
這回有點復雜，不過看懂了還是很好理解的。當然，我不敢保證這種算法在任何情況下都會起效果，如果有同學測試時，發現出現錯誤，請及時聯系我。
我們首先來建立一個以圓心為原點的坐標系：
然后要檢測碰撞就只有兩種情況了。
情況一，矩形全部都在一個象限內，如圖：
當然，圖中只是舉個例子，不一定是只在第二象限，任何一個象限都行，只要是矩形全在該象限。
這種情況比較好解決，首先，我們計算出矩形每個角的坐標，然后用勾股定律依次算出這個角到圓心的距離是否小於或者等於半徑。設這個角與圓心橫坐標之差為d1，縱坐標之差為d2，半徑為r，公式表達如下：
如果有一個角滿足要求說明產生碰撞，返回true。
但是有朋友懵了，怎么判斷矩形是不是在一個象限內呢？很簡單，只要判斷這個矩形左上角和右下角是否在同一個象限內就可以了。於是我們得寫個函數來實現判斷某兩個角是否在同一象限。
函數代碼如下：
[javascript] view plaincopy
function isSameQuadrant(cood,objA,objB){
var coodX = cood.x;
var coodY = cood.y;
var xoA = objA.x
,yoA = objA.y
,xoB = objB.x
,yoB = objB.y;
if(xoA-coodX>0 && xoB-coodX>0){
if((yoA-coodY>0 && yoB-coodY>0) || (yoA-coodY<0 && yoB-coodY<0)){
return true;
}
return false;
}else if(xoA-coodX<0 && xoB-coodX<0){
if((yoA-coodY>0 && yoB-coodY>0) || (yoA-coodY<0 && yoB-coodY<0)){
return true;
}
return false;
}else{
return false;
}
}
這個函數原本是准備寫到lufylegend中LMath靜態類中的，參數原本是LPoint對象，但是這里可以用json，因為LPoint里的x，y屬性可以寫到json里，函數也就同樣取得出值了。函數參數介紹：[cood創建的坐標系原點坐標, objA第一個點坐標, objB第二個點坐標] 這幾個參數均為json對象，格式為：
[javascript] view plaincopy
{x:點的x坐標, y:點的y坐標}
函數中的代碼還是很好理解的，就是判斷一下兩個點的x坐標都分別減去原點x坐標，看得出的數正負符號是否相同，然后又用同樣的辦法算出y軸上的符號是否相同，如果都相同就在同一象限。
有了這個函數，剩下得就好辦了，直接代入開頭給出的公式進行計算即可。
情況二，矩形跨度兩個象限或者兩個象限以上
這種情況更好辦，我們就可以直接把圓看作一個邊長為2r正方形，然后用矩形碰撞算法檢測正方形和矩形的碰撞，如下圖所示：
矩形碰撞的算法是什么呢？很easy，如圖：
如果要橫向判斷碰撞的話，判斷(x1-x2)的絕對值是否小於或者等於w1/2+w2/2，如果是則橫向則有碰撞。縱向判斷是一樣的，判斷(y1-y2)的絕對值是否小於或等於h1/2+h2/2即可。
有了這些算法，我們就可以實現情況2了。
二，Javascript版算法&測試代碼
先上代碼吧：
[javascript] view plaincopy
function hitTestRectArc(rectObj,arcObj,rectVec,arcR){
var rw = rectObj.getWidth()
,rh = rectObj.getHeight()
,ar = arcObj.getWidth()*0.5
,rx = rectObj.x
,ry = rectObj.y
,ax = arcObj.x
,ay = arcObj.y;
if(typeof rectVec != UNDEFINED){
rx += (rw - rectVec[0])*0.5;
ry += (rh - rectVec[1])*0.5;
rw = rectVec[0];
rh = rectVec[1];
}
if(typeof arcR != UNDEFINED){
ax += (ar - arcR);
ay += (ar - arcR);
ar = arcR;
}
var rcx = rx+rw*0.5,rcy = ry+rh*0.5;
var rltx = rx
,rlty = ry
,rlbx = rx
,rlby = ry+rh
,rrtx = rx+rw
,rrty = ry
,rrbx = rx+rw
,rrby = ry+rh;
if(
isSameQuadrant(
{x:ax,y:ay},
{x:rltx,y:rlty},
{x:rrbx,y:rrby}
)
){
var dX1 = Math.abs(ax-rltx),dY1 = Math.abs(ay-rlty);
var dX2 = Math.abs(ax-rlbx),dY2 = Math.abs(ay-rlby);
var dX3 = Math.abs(ax-rrtx),dY3 = Math.abs(ay-rrty);
var dX4 = Math.abs(ax-rrbx),dY4 = Math.abs(ay-rrby);
if(
(((dX1*dX1) + (dY1*dY1)) <= (ar*ar))
||(((dX2*dX2) + (dY2*dY2)) <= (ar*ar))
||(((dX3*dX3) + (dY3*dY3)) <= (ar*ar))
||(((dX4*dX4) + (dY4*dY4)) <= (ar*ar))
){
return true;
}
return false;
}else{
var result = false;
var squareX = ax
,squareY = ay
,squareW = ar*2
,squareH = squareW;
if(
(Math.abs(squareX-rcx) <= (squareW+rw)*0.5)
&&(Math.abs(squareY-rcy) <= (squareH+rh)*0.5)
){
result = true;
}
return result;
}
}
由於是為lufylegend設計的函數，所以參數為 [ rectObj矩形對象（LSprite或者LShape對象）, arcObj圓形對象（LSprite或者LShape對象）, rectVec矩形規定大小（可不填）, arcR圓形半徑（可不填）] 當然，或許些朋友不懂這幾行代碼：
[javascript] view plaincopy
var rw = rectObj.getWidth()
,rh = rectObj.getHeight()
,ar = arcObj.getWidth()*0.5
,rx = rectObj.x
,ry = rectObj.y
,ax = arcObj.x
,ay = arcObj.y;
好吧，我告訴你，這里用到的是lufylegend中LSprite和LShape，這兩個類有x、y屬性，還有獲取寬度和高度的getWidth()和getHeight()，這里看不懂沒關系，你知道是取高度和寬度還有x，y坐標的就行了。當然你要深究，那就看看lufylegend.js的API文檔吧：http://lufylegend.com/lufylegend/api ，以下測試代碼也用到了lufylegend.js，據說這個引擎是個不錯的引擎，想了解的同學，去官方網站看看吧：http://lufylegend.com/lufylegend/ 或者看看我的文章，大多數是講解有關lufylegend開發的。
示例代碼：
[javascript] view plaincopy
init(50,"mylegend",500,250,main);
function main(){
LGlobal.setDebug(true);
var back = new LSprite();
back.graphics.drawRect(5,"green",[0,0,LStage.width,LStage.height],true,"lightblue");
addChild(back);
var cObj = new LSprite();
cObj.x = 200;
cObj.y = 120;
cObj.graphics.drawArc(0,"",[0,0,50,0,2*Math.PI],true,"red");
back.addChild(cObj);
var rObj = new LSprite();
rObj.x = 250;
rObj.y = 70;
rObj.alpha = 0.8;
rObj.graphics.drawRect(0,"",[0,0,100,100],true,"green");
back.addChild(rObj);
trace(hitTestRectArc(rObj,cObj));
back.addEventListener(LMouseEvent.MOUSE_DOWN,function(e){
rObj.x = e.offsetX-rObj.getWidth()*0.5;
rObj.y = e.offsetY-rObj.getHeight()*0.5;
trace(hitTestRectArc(rObj,cObj));
});
}
測試鏈接：http://www.cnblogs.com/yorhom/articles/hitTestRectArc.html
三，C++版
C++版我用的是Qt，所以大家運行要在Qt creator里編譯運行。
HitTestAlg.h里的代碼：
[cpp] view plaincopy
#ifndef HITTESTALG_H
#define HITTESTALG_H
#include <math.h>
#include <QPoint>
#include <QRect>
class CMath
{
public:
static int pow(int base, int powerOf)
{
return (int)::pow((double)base, (double)powerOf);
}
static int sqrt(int n)
{
return (int)::sqrt((double)n);
}
static int abs(int n)
{
n = n < 0 ? -n : n;
return n;
}
static int distance(const QPoint& pt1, const QPoint& pt2)
{
return CMath::sqrt(CMath::pow(CMath::abs(pt1.x() - pt2.x()), 2) + CMath::pow(CMath::abs(pt1.y() - pt2.y()), 2));
}
};
class CArc
{
protected:
int m_nRadius;
QPoint m_ptCenter;
public:
CArc() : m_nRadius(0), m_ptCenter(0, 0){}
CArc(const CArc& arc) : m_nRadius(arc.radius()), m_ptCenter(arc.center()){}
CArc(int radius, QPoint center) : m_nRadius(radius), m_ptCenter(center){}
CArc(int radius, int centerX, int centerY) : m_nRadius(radius), m_ptCenter(centerX, centerY){}
~CArc(){}
void setRadius(int radius){m_nRadius = radius;}
int radius() const {return m_nRadius;}
void setCenter(const QPoint& center){m_ptCenter = center;}
void setCenter(int centerX, int centerY){m_ptCenter = QPoint(centerX, centerY);}
QPoint center() const {return m_ptCenter;}
QRect rect() const {return QRect(center().x() - radius(), center().y() - radius(), 2 * radius(), 2 * radius());}
};
class CHitTestAlg
{
protected:
QRect m_rtRect;
CArc m_arArc;
protected:
bool locatedSameQuadrant() const
{
bool bRes = false;
int nRectLeft = m_rtRect.left(), nRectTop = m_rtRect.top(), nRectRight = m_rtRect.right(), nRectBottom = m_rtRect.bottom();
int nArcCenterX = m_arArc.center().x(), nArcCenterY = m_arArc.center().y();
if((nRectLeft - nArcCenterX >= 0 && nRectRight - nArcCenterX >= 0 && nRectTop - nArcCenterY <= 0 && nRectBottom - nArcCenterY <= 0)
|| (nRectLeft - nArcCenterX <= 0 && nRectRight - nArcCenterX <= 0 && nRectTop - nArcCenterY <= 0 && nRectBottom - nArcCenterY <= 0)
|| (nRectLeft - nArcCenterX <= 0 && nRectRight - nArcCenterX <= 0 && nRectTop - nArcCenterY >= 0 && nRectBottom - nArcCenterY >= 0)
|| (nRectLeft - nArcCenterX >= 0 && nRectRight - nArcCenterX >= 0 && nRectTop - nArcCenterY >= 0 && nRectBottom - nArcCenterY >= 0)
){
bRes = true;
}
return bRes;
}
bool hitTestRect() const
{
QRect rtArc = m_arArc.rect();
bool bRes = false;
if(CMath::abs(m_rtRect.center().x() - rtArc.center().x()) <= CMath::abs((m_rtRect.width() + rtArc.width()) / 2)
&& CMath::abs(m_rtRect.center().y() - rtArc.center().y()) <= CMath::abs((m_rtRect.height() + rtArc.height()) / 2)
){
bRes = true;
}
return bRes;
}
bool hitTestAngleArc() const
{
bool bRes = false;
QPoint ptRectTopLeft = m_rtRect.topLeft(), ptRectTopRight = m_rtRect.topRight()
, ptRectBottomLeft = m_rtRect.bottomLeft(), ptRectBottomRight = m_rtRect.bottomRight()
, ptArcCenter = m_arArc.center();
int nArcRadius = m_arArc.radius();
if(CMath::distance(ptRectTopLeft, ptArcCenter) <= nArcRadius
|| CMath::distance(ptRectTopRight, ptArcCenter) <= nArcRadius
|| CMath::distance(ptRectBottomLeft, ptArcCenter) <= nArcRadius
|| CMath::distance(ptRectBottomRight, ptArcCenter) <= nArcRadius
){
bRes = true;
}
return bRes;
}
public:
CHitTestAlg(const QRect& rect, const CArc& arc) : m_rtRect(rect), m_arArc(arc){}
~CHitTestAlg(){}
bool hitTest() const
{
bool bRes = false;
if(locatedSameQuadrant()){
bRes = hitTestAngleArc();
}else{
bRes = hitTestRect();
}
return bRes;
}
};
#endif // HITTESTALG_H
mainwindow.h里的代碼：
[cpp] view plaincopy
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QWidget>
#include "HitTestAlg.h"
class MainWindow : public QWidget
{
Q_OBJECT
protected:
QRect m_rtRect;
CArc m_arArc;
bool m_bHit;
protected:
virtual void mouseReleaseEvent(QMouseEvent *mouseEvent);
virtual void paintEvent(QPaintEvent *paintEvent);
public:
MainWindow(QWidget *parent = 0);
~MainWindow();
};
#endif // MAINWINDOW_H
mainwindow.cpp里的代碼：
[cpp] view plaincopy
#include <QDebug>
#include <QMouseEvent>
#include <QBrush>
#include <QPainter>
#include "mainwindow.h"
MainWindow::MainWindow(QWidget *parent)
: QWidget(parent)
, m_rtRect(0, 0, 100, 50)
, m_arArc(50, 200, 200)
, m_bHit(false)
{
QWidget::showMaximized();
}
MainWindow::~MainWindow()
{
}
void MainWindow::mouseReleaseEvent(QMouseEvent *mouseEvent)
{
if(mouseEvent){
QPoint ptPos = mouseEvent->pos();
QRect rtRect;
rtRect.setX(ptPos.x() - m_rtRect.width() / 2);
rtRect.setY(ptPos.y() - m_rtRect.height() / 2);
rtRect.setWidth(m_rtRect.width());
rtRect.setHeight(m_rtRect.height());
m_rtRect = rtRect;
m_bHit = CHitTestAlg(m_rtRect, m_arArc).hitTest();
QWidget::update();
}
}
void MainWindow::paintEvent(QPaintEvent *paintEvent)
{
Q_UNUSED(paintEvent)
QPainter xPainter(this);
{
xPainter.save();
QBrush xBrush; xBrush.setColor(Qt::red); xBrush.setStyle(Qt::SolidPattern);
QPen xPen; xPen.setColor(Qt::black); xPen.setStyle(Qt::SolidLine);
xPainter.setBrush(xBrush);
xPainter.setPen(xPen);
xPainter.drawEllipse(m_arArc.center(), m_arArc.radius(), m_arArc.radius());
xPainter.restore();
}
{
xPainter.save();
QBrush xBrush; xBrush.setColor(Qt::darkGreen); xBrush.setStyle(Qt::SolidPattern);
QPen xPen; xPen.setColor(Qt::black); xPen.setStyle(Qt::SolidLine);
xPainter.setBrush(xBrush);
xPainter.setPen(xPen);
xPainter.drawRect(m_rtRect);
xPainter.restore();
}
{
xPainter.save();
QString sContent = QString("Hit Test: %1").arg(m_bHit ? "true" : "false");
QFont ftFont("Tahoma", 12, QFont::DemiBold, true);
xPainter.setFont(ftFont);
xPainter.drawText(20, m_arArc.rect().bottom() + 30, sContent);
xPainter.restore();
}
}
main.cpp里的代碼：
[cpp] view plaincopy
#include <QApplication>
#include "mainwindow.h"
int main(int argc, char *argv[])
{
QApplication a(argc, argv);
MainWindow w;
w.show();
return a.exec();
}
原理和js版是一樣的，就不多解釋了，在下面我會放出所有代碼。C++版運行demo如下：
Qt做的界面感覺還是不錯的，哈哈~~
點和矩形碰撞
[java] view plaincopy
/**
*
* @param x1 點
* @param y1 點
* @param x2 矩形view x
* @param y2 矩形view y
* @param w 矩形view 寬
* @param h 矩形view 高
* @return
*/
public static boolean isCollsion(int x1, int y1, int x2, int y2, int w, int h) {
if (x1 >= x2 && x1 <= x2 + w && y1 >= y2 && y1 <= y2 + h) {
return true;
}
return false;
}
矩形碰撞
[java] view plaincopy
/**
* 檢測兩個矩形是否碰撞
* @return
*/
public boolean isCollsionWithRect(int x1, int y1, int w1, int h1,
int x2,int y2, int w2, int h2) {
if (x1 >= x2 && x1 >= x2 + w2) {
return false;
} else if (x1 <= x2 && x1 + w1 <= x2) {
return false;
} else if (y1 >= y2 && y1 >= y2 + h2) {
return false;
} else if (y1 <= y2 && y1 + h1 <= y2) {
return false;
}
return true;
}
點(x1,x2) ， 圓心(x2,y2) ，半徑r
[java] view plaincopy
if (Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) <= r) {
// 如果點和圓心距離小於或等於半徑則認為發生碰撞
return true;
}
圓和圓
[java] view plaincopy
/**
* 圓形碰撞
*
* @param x1
* 圓形1的圓心X坐標
* @param y1
* 圓形2的圓心X坐標
* @param x2
* 圓形1的圓心Y坐標
* @param y2
* 圓形2的圓心Y坐標
* @param r1
* 圓形1的半徑
* @param r2
* 圓形2的半徑
* @return
*/
private boolean isCollisionWithCircle(int x1, int y1, int x2, int y2,
int r1, int r2) {
// Math.sqrt:開平方
// Math.pow(double x, double y): X的Y次方
//直角坐標系，依點1和點2做平行線，|x1-x2|為橫向直角邊，|y1-y2|為縱向直角邊 依勾股定理 c^2=a^2+b^2
if (Math.sqrt(Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2)) <= r1 + r2) {
// 如果兩圓的圓心距小於或等於兩圓半徑和則認為發生碰撞
return true;
}
return false;
}