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

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

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

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

同样的道理,可以判断另外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. phpstorm的使用教程

    1.设置行号:file->settings->Editor->Appearance->Show line numbers 2.设置字体和背景 :file->setting ...

  2. CSS代码片段【图文】

    1.垂直对齐 .verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transf ...

  3. 1 javascript 核心语言笔记

    //所有的双斜线之后的内容都属于注释; //变量是表示值的一个符号名字; //变量是通过var 关键字声明的; var x; //声明一个变量 //值可以通过等号赋值给变量 x = 0; //现在的变 ...

  4. Intent之复杂数据的传递

    想在两个Activity之间传递一个对象Result,在网上差了很多,都需要序列化或者时下Paracelable,等等,试了很多都不行. 后来才制单,这个Result,根本不需要集成Sereriabl ...

  5. struts2+jsp+hiberbate 双重遍历

    今天弄了个双重遍历,由于自己水平有限,做了好久才搞定. 例子如下:也不算是例子,简要代码吧 action中有属性: private List<Contents> content; 其中co ...

  6. C++ 基础知识复习（六）

    操作系统部分: 79. 操作系统的最小调度单位:线程. 线程thread,进程process.一个进程至少包含一个线程,主线程,main thread. 80. 资源的最小单位是:进程. 81. 进程 ...

  7. LeetCode之104. Maximum Depth of Binary Tree

    -------------------------------- 递归遍历即可 AC代码: /** * Definition for a binary tree node. * public clas ...

  8. 如何持续集成/交付一个开源.NET函数库到Nuget.org

    (此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:这是一个简单的入门向导,涉及到GitHub.AppVeyor和Nuget.org. 最 ...

  9. MSSQ调优所需用的语句

    看一下各项指标是否正常,是否有阻塞,这个语句选取了前10个最耗CPU时间的会话语句 [session_id], [request_id], [start_time] AS '开始时间', [statu ...

  10. 转--脉络清晰的BP神经网络讲解，赞

    http://www.cnblogs.com/wengzilin/archive/2013/04/24/3041019.html 学 习是神经网络一种最重要也最令人注目的特点.在神经网络的发展进程中, ...