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

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

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

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

同样的道理,可以判断另外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. I18N 国际化

    http://blog.sina.com.cn/s/blog_6c7e59770101p7w9.html 一.I18N 在 J2EE 中的应用 [转载:http://blog.csdn.net/cha ...

  2. JavaScript深入浅出5-数组

    慕课网教程视频地址:Javascript深入浅出 数组:值的有序集合 创建数组:字面量,构造器new array() 数组的读写:push() 尾部加入新元素 unshift() 头部加入新元素 po ...

  3. linux c 笔记-2 Hello World & main函数

    按照惯例撸一个hello_world.c #include <stdio.h> int main(int argc, char * argv[]) { printf("hello ...

  4. Android手机截屏方法

    <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> <u ...

  5. sqlserver查询效率

    很多人不知道SQL语句在SQL SERVER中是如何执行的,他们担心自己所写的SQL语句会被SQL SERVER误解.比如: select * from table1 where name='zhan ...

  6. QQ付费群规则重大变更！特别是这类群！

    很多人都是知道现在QQ有个付费群功能.以往加群需要你填写一些验证信息给管理员,管理员看你顺眼就放你进去,不顺眼你就进不去了.另外还有一些打广告的人难免会被管理员误判给放进去,令管理员苦恼不已,总有审核 ...

  7. linux升级openssh

    升级sshd到OpenSSH-6.7并删除老版本ssh 1)升级前准备 查看是否缺包 # rpm -qa | egrep "gcc|make|perl|pam|pam-devel" ...

  8. IBatis和Hibernate区别

    1. 简介 Hibernate是当前最流行的O/R mapping框架.它出身于sf.net,现在已经成为Jboss的一部分了.iBATIS是另外一种优秀的O/R mapping框架,现已改名叫myB ...

  9. 登录服务器windows2008出现：远程桌面服务当前正忙,因此无法完成您尝试执行的任务。（或者出现黑屏界面）

    问题:有段时间登录服务器总是提示:远程桌面服务当前正忙,因此无法完成您尝试执行的任务. 在微软找到的原因是:Csrss.exe 进程和某些应用程序 (例如,Microsoft Excel 或 Micr ...

  10. 【C#】MVC项目中搭建WebSocket服务器

    前言 因为项目需要,前端页面中需要不断向后台请求获取一个及一个以上的状态值.最初的方案是为每个状态值请求都建立一个定时器循环定时发起Ajax请求,结果显而 易见.在HTTP1.1协议中,同一客户端浏览 ...