Collision detection of rectangles in JavaScript----calculating the area of the collision section

Source: Internet
Author: User

Today in doing a drag-and-drop to change the ordering of things, when the dragged element at the same time collision to two elements, exactly which element should be swapped with the position of the problem, tangled to collapse, it is not to think of other ways to do, can only be calculated to calculate the area of the collision.

This should not be the most appropriate way, how to more appropriate, the follow-up found to fill it up.

First of all, we heard from the wonderful class. The method of judging collision detection by nine Gongge

, the left side of the Orange Arrow refers to the line, is the blue rectangle to the right and the black rectangle to the left of the distance, if the blue rectangle to the right of the left is less than the left side of the black rectangle, then two rectangles can not collide, it is impossible to collide with the range of blue lines circled.

In the same way, you can judge the other 4 areas to get a collision.

This approach is very simple in detecting collisions, but it is too cumbersome to judge the area of the collision.

This method of collision detection is also feasible in the calculation of the insertion position, if the object is to be inserted by dragging and dropping. Determine the size of the top value of two rectangles.

If you want to calculate the area is convenient, personally feel that the following method will be more appropriate.

The position of the two rectangular diagonal intersections can be calculated, and if the absolute distance between the two two directions is less than half the width of the two rectangle or half of the height, it proves that two rectangles have collided. The formula is written on the picture.

How does that area count?

Such as

In the picture said should have been relatively clear, writing is not laborious, will not repeat.

Collision detection is a very complex topic, rectangular, circular, 2d,3d, complex shape collisions, really need a lot of thinking and collecting methods of detection, in different situations in different ways.

Collision detection of rectangles in JavaScript----calculating the area of the collision section

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.