今天在做一个拖拽改变元素排序的东西的时候,在做被拖动元素同时碰撞到两个元素时,究竟应该与哪个元素交换位置的问题上,纠结到崩溃,实在是想不到别的办法去做了,只能去想办法计算碰撞的面积.

这应该不是最合适的办法,具体怎样更合适,后续发现了再补上吧.

先说从妙味课堂里听到的九宫格判断碰撞检测的方法

如图,左侧的橙色箭头所指的线,是蓝色矩形右边和黑色矩形左边的距离,如果蓝色矩形右边的左边小于黑色矩形的左边,则两个矩形不可能发生碰撞,不可能发生碰撞的范围如图蓝色线条圈住的范围.

同样的道理,可以判断另外4个区域,从而得到是否碰撞.

这种做法,在检测是否碰撞方面十分简单,但是对于计算碰撞的面积时的判断过于繁琐.

如果现在做的东西是通过拖拽可以插入元素,在插入位置的计算方面,这种碰撞检测的方法也是可行的.判断两个矩形的top值的大小即可.

如果想计算面积比较方便,个人感觉下面的这种方法会更合适.

可以计算出两个矩形对角线交叉点的位置,如果两者两个方向上的绝对距离小于两个矩形宽度和的一半或者高度和的一半,那就证明两个矩形发生了碰撞.公式写在了图片上.

那面积如何计算呢?

如下图

在图片上说的应该已经比较清楚了,写起来也并不费劲,就不再赘述了.

碰撞检测是一个非常复杂的话题,矩形,圆形,2D,3D,复杂形状碰撞,真的需要大量思考和收集检测的方法,在不同的情况下用不同的方法.

javascript中矩形的碰撞检测---- 计算碰撞部分的面积的更多相关文章

  1. javascript中关于日期和时间的基础知识

    × 目录 [1]标准时间 [2]字符串 [3]闰年[4]月日[5]星期[6]时分秒 前面的话 在介绍Date对象之前,首先要先了解关于日期和时间的一些知识.比如,闰年.UTC等等.深入了解这些,有助于 ...

  2. 关于JavaScript中计算精度丢失的问题

    摘要: 由于计算机是用二进制来存储和处理数字,不能精确表示浮点数,而JavaScript中没有相应的封装类来处理浮点数运算,直接计算会导致运算精度丢失. 为了避免产生精度差异,把需要计算的数字升级(乘 ...

  3. 使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

    查看本章节 查看作业目录 需求说明: 使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理.距离远时图片放大,距离近 ...

  4. 使用 JavaScript 中的变量、数据类型和运算符，计算出两个 number 类型的变量与一个 string 类型的变量的和，根据 string 类型处于运算符的不同位置得到不同的结果

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的变量.数据类型和运算符,计算出两个 number 类型的变量与一个 string 类型的变量的和,根据 string 类型处于运算 ...

  5. 深入理解JavaScript中的==运算符

    原文章地址 在详细介绍图1中的每个部分前,我们来复习一下JS中关于类型的知识: JS中的值有两种类型:基本类型.对象类型. 基本类型包括:Undefined.Null.Boolean.Number和S ...

  6. javascript中的“向量”

    什么是向量 向量通常指一个有长度有方向的量.向量使所有的移动和空间行为更容易理解和在代码中实现.向量可以相加,缩放,旋转,指向某物体. 在javascript中,一个方向和长度(即向量)在二维空间中可 ...

  7. JavaScript中常见数据结构

    数据结构 栈:一种遵从先进后出 (LIFO) 原则的有序集合:新添加的或待删除的元素都保存在栈的末尾,称作栈顶,另一端为栈底.在栈里,新元素都靠近栈顶,旧元素都接近栈底. 队列:与上相反,一种遵循先进 ...

  8. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  9. JavaScript 中的数据类型

    Javascript中的数据类型有以下几种情况: 基本类型:string,number,boolean 特殊类型:undefined,null 引用类型:Object,Function,Date,Ar ...

随机推荐

  1. 关于 JSONP跨域示例

    1.脚本文件Jsonp,代码如下: $(function () { TestJsonP(); function TestJsonP() { var xhrurl = 'http://localhost ...

  2. MongoDB_C_Driver使用教程(2)高级连接

    高级连接(Advanced Connection) 以下指南包含MongoDB配置的特定类型的信息. 简单的连接到独立服务器的示例,请参考MongoDB_C_Dirver使用教程. 要连接到启用身份验 ...

  3. linux 用户创建、管理、权限分配

    (1)su与sudo su:通过su可以在用户之间切换,如果超级权限用户root向普通或虚拟用户切换不需要密码,什么是权力?这就是!而普通用户切换到其它任何用户都需要密码验证: sudo: sudo扮 ...

  4. java notepad++

  5. Python~迭代

            dict #默认情况下,dict迭代的是key 迭代value #迭代key,value     for value in  d.itervalues(): for k,v in d. ...

  6. 四种常见的 POST 提交数据方式

    HTTP/1.1 协议规定的 HTTP 请求方法有 OPTIONS.GET.HEAD.POST.PUT.DELETE.TRACE.CONNECT 这几种.其中 POST 一般用来向服务端提交数据,本文 ...

  7. PHP字符串函数

    php字符串处理函数大全 addcslashes — 为字符串里面的部分字符添加反斜线转义字符addslashes — 用指定的方式对字符串里面的字符进行转义bin2hex — 将二进制数据转换成十六 ...

  8. 解析 Linux 内核可装载模块的版本检查机制

    转自:http://www.ibm.com/developerworks/cn/linux/l-cn-kernelmodules/ 为保持 Linux 内核的稳定与可持续发展,内核在发展过程中引进了可 ...

  9. Borland C++建立工程菜鸟教程

    实在不敢相信,学校里现在教学用的编译器还是七八十年代的老古董,难道这东西更能培养从没接触过代码的学生深刻理解c语言的运行流程,不得不说像VisualStdio这样的重量级开发环境确实屏蔽了很多底层的运 ...

  10. cpp 4个类型转换

    static_cast.dynamic_cast.reinterpret_cast.const_cast 之间的区别 static_cast 用法:static_cast (expression) 说 ...