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

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

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

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

同样的道理,可以判断另外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. git 教程（13）--创建与合并分支

    在版本回退里,你已经知道,每次提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD严格来说不是指向提交,而 ...

  2. PHP 图片处理工具类（添加水印与生成缩略图）

    =================ImageTool.class.php================= <?php class ImageTool { private $imagePath; ...

  3. linux git安装及配置（包括更新）

    1.在终端运行命令 sudo apt-get install git 2.查看版本号 git --version  (若不是最新可更新 自选) 更新提示: sudo add-apt-repositor ...

  4. 用 nssm 把 Nginx 安装成 Windows 服务方法

    总之:用 nssm 比 srvany.exe 简便多了.1. 下载nginx windows版本:http://nginx.org/ 2. 下载 nssm :http://nssm.cc/3. 安装N ...

  5. K closest points

    Find the K closest points to a target point in a 2D plane. class Point { public int x; public int y; ...

  6. jquery之toggleClass应用

    今天记载一下常用的html + css + jquery效果应用 1.html内容 <div class="selBtn screen_btn"> <a id=& ...

  7. Angular2 指令

      1. 指令说明 Angular2 指令是构成Angular2应用程序的重要组成部分,指令主要用来对模板的标签或者元素附加一些新的特性或者功能,改变一个 DOM 元素的外观或行为,Angular2指 ...

  8. .NET LINQ 数据排序

    数据排序      排序操作按一个或多个特性对序列的元素进行排序. 第一个排序条件对元素执行主要排序. 通过指定第二个排序条件,可以对各个主要排序组中的元素进行排序.   方法 方法名 说明 C# 查 ...

  9. LNMP平台搭建---MySQL安装篇

    在前两篇中,安装了一个基本的Web服务器,但是只能提供静态网页查看,要做成动态网站,就必须要数据库或其他编程语言支持了,这里先介绍MySQL数据库的安装. MySQL是一个开源的数据库,在互联网行业应 ...

  10. C++ 基础知识复习（五）

    UML建模部分 70. 什么是UML: 答: Unified Modeling Language, 统一建模语言,是一种标准的图形化建模语言.是面向对象分析和设计的标准表示. 71. UML有哪些图: ...