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

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

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

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

同样的道理,可以判断另外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. 07OC之KVC、KVO

    在OC中,有着很多动态的特性,今天我们着重讲讲OC中的键值编码(KVC)和键值监听(KVO)特性. 一.键值编码(KVC) 在C#中,我们可以通过反射的方式动态去读写一个对象,有时候很方便,因为可以利 ...

  2. 《C++ 101条建议》学习笔记——第一章快速入门

    1.C++程序组成:a.编译指示,由#开始,不由分号结束.只是影响编译过程.b.声明语句,影响编译过程,编译结果中并不会生成对应的指令.只是告诉编译器一些信息.c.可执行过程语句,生成对应的指令.包括 ...

  3. PDO 用法学习

    PDO: php data object数据库访问抽象层 基于驱动:1.安装扩展 php_pdo.dll2.安装驱动 php_pdo_mysql.dll linux 编译时参数:--with-pdo= ...

  4. InnoDB全文索引：N-gram Parser【转】

    本文来自:http://mysqlserverteam.com/innodb%E5%85%A8%E6%96%87%E7%B4%A2%E5%BC%95%EF%BC%9An-gram-parser/ In ...

  5. Redis Sentinel机制与用法说明【转】

    本文来自:https://segmentfault.com/a/1190000002680804 概述 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Ma ...

  6. iOS整体框架类图

    Cocoa是OS X和iOS操作系统的程序的运行环境. iOS的操作系统层次结构分为四层:触摸UI层,媒体层,核心服务层,核心OS层.其中底层框架提供iOS的基本服务和技术,高层次框架简历在低层次框架 ...

  7. iframe使用方法

    --点击按钮会把地址里的页面显示在oframe里,对iframe可以设置宽和高<iframe src="demo_iframe.htm" name="iframe_ ...

  8. Outlook~设置

    outlook2013 中帐户设置无法直接更改邮件投递位置到本地的.pst文件,“更改文件夹”选项已经删除. Exchange 传递到 Outlook 数据文件 (.pst) 升级到 Outlook ...

  9. UILocalNotification本地通知的使用方法

    本文所写方法主要应用UILocalNotification达到本地推送通知栏信息 取消了其他教程里过期的UIAlertView方法 使用UILocalNotification主要分为创建 调用 取消 ...

  10. Odoo9是如何计算预定交付日期的

    计算预定日期目的是按计划交付.接收等.根据不同公司习惯,Odoo会通过调度器自动生成预定日期,Odoo调度器计算每一行的每件事情,无论是生产订单.交货单.销售订单等,依据Odoo中配置的不同交付时间( ...