Laya 如何检测矩形和圆形的碰撞？

如何检测矩形和圆形的碰撞？

1.画一个黄色矩形和一个蓝色圆形，再放置一个旋转的按钮。

2.拖动黄色矩形，当矩形碰到圆形时，圆形会变为绿色。

3.通过旋转按钮，改变矩形旋转角度，再次碰撞，亦可变为绿色。

Laya的实现代码，如下：

export default class HitRect extends Laya.Sprite {
    public w:number = 100;
    public h:number = 50;
    public r:number = 40;

    public spRect:Laya.Sprite;
    public spCircle:Laya.Sprite;

    constructor() {
        super();
        
    }

    public draw():void{
        this.spRect = new Laya.Sprite();
        this.spRect.width = this.w;
        this.spRect.height = this.h;
        this.spRect.graphics.drawRect(0,0,this.w,this.h,0xffff00);
        this.addChild(this.spRect);
        this.spRect.mouseEnabled = true;
        this.spRect.on(Laya.Event.MOUSE_DOWN,this,this.mouseDown);
        this.spRect.rotation= 0;
        this.spRect.x =0;this.spRect.y=200;
        this.spRect.pivotX= this.w/2;
        this.spRect.pivotY= this.h/2;
        this.spRect.graphics.drawCircle(this.spRect.pivotX,this.spRect.pivotY,6,0xff0000);

        this.spCircle = new Laya.Sprite();
        this.spCircle.graphics.drawCircle(0,0,this.r,0x00ffff);
        this.spCircle.x = 150;
        this.spCircle.y = 200;
       
        this.addChild(this.spCircle);

        let button = new Laya.Button();
        button.width = 80;
        button.skin = "comp/button.png";
        button.label = "旋转1";
        this.addChild(button);
        button.on(Laya.Event.MOUSE_DOWN, this, this.onButtonClick);

        let button5 = new Laya.Button();
        button5.skin = "comp/button.png";
        button5.x = 100;
        button5.label = "旋转5";
        this.addChild(button5);
        button5.on(Laya.Event.MOUSE_DOWN, this,  this.onButtonClick5);
        
    }
    private onButtonClick(e: Laya.Event) {
        this.spRect.rotation+=1;
    }
    private onButtonClick5(e: Laya.Event) {
        this.spRect.rotation+=5;
    }
    private mouseDown():void{
        this.spRect.on(Laya.Event.MOUSE_MOVE,this,this.mouseMove);
        this.spRect.stage.on(Laya.Event.MOUSE_UP,this,this.mouseUp);
    }
    private mouseUp():void{
        this.spRect.off(Laya.Event.MOUSE_MOVE,this,this.mouseMove);
        this.spRect.stage.off(Laya.Event.MOUSE_UP,this,this.mouseUp);
    }
    private mouseMove(evt:Laya.Event):void{
        this.spRect.x = evt.stageX;
        this.spRect.y = evt.stageY;
        
        let pos:any = this.getNewPos(this.spRect.x,this.spRect.y,this.spCircle.x,this.spCircle.y,this.spRect.rotation);
        
        let  boool = this.ComputeCollision(this.w,this.h, this.r, pos.x, pos.y);
        if(boool){
            this.spCircle.graphics.drawCircle(0,0,this.r,0x00ff00);
        }else{
            this.spCircle.graphics.drawCircle(0,0,this.r,0x00ffff);
        }
    }

    /**
     * 计算碰撞
     * @param w 宽度
     * @param h 高度
     * @param rx 圆形x
     * @param ry 圆形y
     */
    private ComputeCollision(w, h, r, rx, ry):boolean{
        var dx = Math.min(rx, w * 0.5);
        var dx1 = Math.max(dx, -w * 0.5);
        var dy = Math.min(ry, h * 0.5);
        var dy1 = Math.max(dy, -h * 0.5);
        return (dx1 - rx) * (dx1 - rx) + (dy1 - ry) * (dy1 - ry) <= r * r;
    }
    private  getNewPos(x1,y1,x2,y2,rotation):any{
        var pos:any = {};
        //距离
        var distance = Math.pow((Math.pow((x1 - x2), 2) + Math.pow((y1 - y2), 2)), 0.5);
        //角度
        var angle:number = Math.atan((y1-y2)/(x1-x2))*180/Math.PI;
        //兼容矩形的旋转角度
        var newAngle = angle - rotation;
        pos.x = Math.cos(newAngle/180*Math.PI) * distance;
        pos.y = Math.sin(newAngle/180*Math.PI) * distance;
        return pos;
    }
}