1. 技术文章
  2. Collision between two elements with rotating

Collision between two elements with rotating

由 耗尽温柔 提交于 2019-11-29 08:42:52

There are several ways to do this. This example just guides you of how it could be done with rectangles.

These are the steps that are done here:

  • You have to calculate the position of all rotated corners of all rectangles that you want to check whether they are being collided. To get these rotated corners, you can use several methods. In this example 2d-vectors and a 2d-rotation-matrix are used:

    • a vector that has its origin in the center of a rectangle and directs to the top-left-corner(x,y) of a rectangle:

      var center = {
    x: x + width / 2,
    y: y + height / 2
};

var vector = {
    x: (x - center.x),
    y: (y - center.y)
};

    • multiply this vector with a rotation-matrix to rotate this vector:

      // modified sin function to calulcate sin in the unit degrees instead of radians
function sin(x) {
   return Math.sin(x / 180 * Math.PI);
}

// modified cos function 
function cos(x) {
   return Math.cos(x / 180 * Math.PI);
}

var rotationMatrix = [[cos(angle), -sin(angle)],[sin(angle), cos(angle)]];

var rotatedVector = {
    x: vector.x * rotationMatrix[0][0] + vector.y * rotationMatrix[0][1],
    y: vector.x * rotationMatrix[1][0] + vector.y * rotationMatrix[1][1]
};

    • And finally get the rotated top-left-corner, you can start from the center of a rectangle and go to where the rotated vector points to. This is where top-left-corner is located after rotation:

      {
    x: (center.x + rotatedVector.x),
    y: (center.y + rotatedVector.y)
}

    • All the steps described above are done by getRotatedTopLeftCornerOfRect and must be done with all other corners as well. Before the location of the next corner (right-top) can be calculated next vector must be calulcated that points to this corner. To get the next vector that points to the top-right-corner the angle between the first vector (left-top) and the second vector (right-top) is calculated. The third vector points to the right-bottom-corner when its angle is incremended by the first angle and the second angle and the fourth vector is rotated by an angle that is summed up the first, second and third angle. All of this is done in the setCorners-method and this image shows this process partly:

  • To detect a collision there are tons of algorithms. In this example the Point in polygon algorithm is used to check each rotated corner of a rectangle whether a corner is with the border or within another rectangle, if so, then the method isCollided returns true. The Point in polygon algorithm is used in pointInPoly and can also be found here.

Combining all of the steps described above was tricky, but it works with all rectangles of all sizes and the best of all you can test it right here without a library by clicking on "Run code snippet".

(tested browsers: FF 50.1.0, IE:10-EDGE, Chrome:55.0.2883.87 m):

    var Rectangle = (function () {

        function sin(x) {
            return Math.sin(x / 180 * Math.PI);
        }

        function cos(x) {
            return Math.cos(x / 180 * Math.PI);
        }

        function getVectorLength(x, y, width, height){
            var center = {
                x: x + width / 2,
                y: y + height / 2
            };
            //console.log('center: ',center);
            var vector = {
                x: (x - center.x),
                y: (y - center.y)
            };
            return Math.sqrt(vector.x*vector.x+vector.y*vector.y);
        }

        function getRotatedTopLeftCornerOfRect(x, y, width, height, angle) {
            var center = {
                x: x + width / 2,
                y: y + height / 2
            };
            //console.log('center: ',center);
            var vector = {
                x: (x - center.x),
                y: (y - center.y)
            };
            //console.log('vector: ',vector);
            var rotationMatrix = [[cos(angle), -sin(angle)],[sin(angle), cos(angle)]];
            //console.log('rotationMatrix: ',rotationMatrix);
            var rotatedVector = {
                x: vector.x * rotationMatrix[0][0] + vector.y * rotationMatrix[0][1],
                y: vector.x * rotationMatrix[1][0] + vector.y * rotationMatrix[1][1]
            };
            //console.log('rotatedVector: ',rotatedVector);
            return {
                x: (center.x + rotatedVector.x),
                y: (center.y + rotatedVector.y)
            };
        }

        function getOffset(el) {
            var _x = 0;
            var _y = 0;
            while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
                _x += el.offsetLeft - el.scrollLeft;
                _y += el.offsetTop - el.scrollTop;
                el = el.offsetParent;
            }
            return {
                top: _y,
                left: _x
            };
        }

        function pointInPoly(verties, testx, testy) {
            var i,
                    j,
                    c = 0
            nvert = verties.length;
            for (i = 0, j = nvert - 1; i < nvert; j = i++) {
                if (((verties[i].y > testy) != (verties[j].y > testy)) && (testx < (verties[j].x - verties[i].x) * (testy - verties[i].y) / (verties[j].y - verties[i].y) + verties[i].x))
                    c = !c;
            }
            return c;
        }

        function Rectangle(htmlElement, width, height, angle) {
            this.htmlElement = htmlElement;
            this.width = width;
            this.height = height;
            this.setCorners(angle);
        }

        function testCollision(rectangle) {
            var collision = false;
            this.getCorners().forEach(function (corner) {
                var isCollided = pointInPoly(rectangle.getCorners(), corner.x, corner.y);
                if (isCollided) collision = true;
            });
            return collision;
        }

        function checkRectangleCollision(rect, rect2) {
            if (testCollision.call(rect, rect2)) return true;
            else if (testCollision.call(rect2, rect)) return true;
            return false;
        }

        function getAngleForNextCorner(anc,vectorLength) {
            var alpha = Math.acos(anc/vectorLength)*(180 / Math.PI);
            return 180 - alpha*2;
        }

        Rectangle.prototype.setCorners = function (angle) {
            this.originalPos = getOffset(this.htmlElement);
            this.leftTopCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            var vecLength = getVectorLength(this.originalPos.left, this.originalPos.top, this.width, this.height);
            //console.log('vecLength: ',vecLength);

            angle = angle+getAngleForNextCorner(this.width/2, vecLength);
            //console.log('angle: ',angle);
            this.rightTopCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            angle = angle+getAngleForNextCorner(this.height/2, vecLength);
            //console.log('angle: ',angle);
            this.rightBottomCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            angle = angle+getAngleForNextCorner(this.width/2, vecLength);
            //console.log('angle: ',angle);
            this.leftBottomCorner = getRotatedTopLeftCornerOfRect(this.originalPos.left, this.originalPos.top, this.width, this.height, angle);

            //console.log(this);
        };

        Rectangle.prototype.getCorners = function () {
            return [this.leftTopCorner,
                this.rightTopCorner,
                this.rightBottomCorner,
                this.leftBottomCorner];
        };

        Rectangle.prototype.isCollided = function (rectangle) {
            return checkRectangleCollision(this, rectangle);
        };

        return Rectangle;

    }) ();


    var rotA = 16;
    var widthA = 150;
    var heightA = 75;
    var htmlRectA = document.getElementById('rectA');

    var rotB = 28.9;
    var widthB = 50;
    var heightB = 130;
    var htmlRectB = document.getElementById('rectB');

    var msgDiv = document.getElementById('msg');

    var rectA = new Rectangle(htmlRectA, widthA, heightA, rotA);
    var rectB = new Rectangle(htmlRectB, widthB, heightB, rotB);

    window.requestAnimFrame = function(){
        return  window.requestAnimationFrame       ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame    ||
                window.oRequestAnimationFrame      ||
                window.msRequestAnimationFrame;
    }();

    function draw(){

        rotA+=1.2;
        htmlRectA.setAttribute('style','-ms-transform: rotate('+rotA+'deg);-webkit-transform: rotate('+rotA+'deg);transform: rotate('+rotA+'deg)');

        rotB+=5.5;
        htmlRectB.setAttribute('style','-ms-transform: rotate('+rotB+'deg);-webkit-transform: rotate('+rotB+'deg);transform: rotate('+rotB+'deg)');

        rectA.setCorners(rotA);
        rectB.setCorners(rotB);

        if(rectA.isCollided(rectB)){
            msgDiv.innerHTML = 'Collision detected!';
            msgDiv.setAttribute('style','color: #FF0000');
        }
        else {
            msgDiv.innerHTML = 'No Collision!';
            msgDiv.setAttribute('style','color: #000000');
        }

        setTimeout(function(){
            window.requestAnimFrame(draw);
        },50);
    }

    window.requestAnimFrame(draw);
#rectA{
        background-color: #0000FF;
        width:150px;
        height:75px;
        position:absolute;

        top:60px;
        left:180px;

        -ms-transform: rotate(16deg);
        -webkit-transform: rotate(16deg);
        transform: rotate(16deg);
}

#rectB{
        background-color: #FF0000;
        width:50px;
        height:130px;
        position:absolute;

        top:140px;
        left:250px;

        -ms-transform: rotate(28.9deg);
        -webkit-transform: rotate(28.9deg);
        transform: rotate(28.9deg);

}
<div id="rectA">A</div>
<div id="rectB">B</div>

<div id="msg"></div>
标签
javascript
hover
collision
overlap
onmouseover
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!