zoukankan      html  css  js  c++  java
  • 元素相交检测

    最近做一个项目,其中涉及到了一个相交检测的功能,现在分享出来共勉

    首先先谈一谈满足什么样的条件,才能算两个元素是相交,下面是一个示意图:

    Ax1是元素A的起点在x轴上的投影,Ax2是元素A的终点在x轴上的投影,Ay1是元素A的起点在y轴上的投影,Ay2是元素A的终点在y轴上的投影

    Bx1是元素B的起点在x轴上的投影,Bx2是元素B的终点在x轴上的投影,By1是元素B的起点在y轴上的投影,By2是元素B的终点在y轴上的投影

    当元素A和元素B在y轴和x轴的投影同时相交时,元素A和元素B才相交

    元素A和元素B在x轴的投影相交的条件是:Ax1 <= Bx1 && Ax2 >= Bx1 || Ax1 <= Bx1 && Ax2 >= Bx2

    元素A和元素B在y轴上的投影相交的条件是:Ay1 <= By1 && Ay2 >= By1 || Ay1 <= By1 && Bx2 >= By2

    具体代码如下:

    function compare(elemA,elemB,gap){
        var Booleans,elemAPos,elemBPos,
            elemAShadow_x,elemAShadow_y,
            elemBShadow_x,elemBShadow_y,
            intersect_x,intersect_y;
        //元素的位置
        elemAPos = elemA.offset();
        elemBPos = elemB.offset();
    
        //elemA的投影
        elemAShadow_x = [elemAPos.left, elemAPos.left + elemA.width()];
        elemAShadow_y = [elemAPos.top, elemAPos.top + elemA.height()];
    
        //elemB的投影
        elemBShadow_x = [elemBPos.left - gap, elemBPos.left + elemB.width() + gap];
        elemBShadow_y = [elemBPos.top - gap, elemBPos.top + elemB.height() + gap];
    
        //检测是否X轴上相交
        intersect_x = (elemAShadow_x[0] >= elemBShadow_x[0] && elemAShadow_x[0] <= elemBShadow_x[1])
            || (elemAShadow_x[1] >= elemBShadow_x[0] && elemAShadow_x[1] <= elemBShadow_x[1]);
    
        //检测是否Y轴上相交
        intersect_y = (elemAShadow_y[0] >= elemBShadow_y[0] && elemAShadow_y[0] <= elemBShadow_y[1])
            || (elemAShadow_y[1] >= elemBShadow_y[0] && elemAShadow_y[1] <= elemBShadow_y[1]);
    
        Booleans = intersect_x && intersect_y;
        return Booleans
    }

    关于参数gap的解释:因为在这个项目中要求的功能是,要求两个元素之间的间距为10px,当两个元素之间的间距小于等于10就视为相交。

    这上说函数中使用了jquery这个库

  • 相关阅读:
    线程的几种状态
    NSThread&线程间通信
    大文件下载--断点续传--NSURLConnection
    NSURLConnection及NSURLConnectionDataDelegate
    单例实现 CGD与条件编译实现单例类
    单例模式 饿汉式 ARC
    Load与initialize方法
    单例模式 (懒汉式)ARC
    sqlserver 分页查询总结
    .net 弹窗方式
  • 原文地址:https://www.cnblogs.com/QxQstar/p/6127176.html
Copyright © 2011-2022 走看看