检测两个重叠的三角形，并用javascript为叠加部分着色

Question

我用html制作了两个三角形div。 我使用jquery Ui使它们可以拖动。

现在我想重叠这两个三角形，并用另一种颜色将覆盖部分着色为：

你有什么线索我可以用jQuery做到这一点吗？

＆＃13;

＆＃13;

$(document).ready(function() {

  $(".triangle").draggable();
})

＆＃13;

#triangle_1 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #00ff00;
}
#triangle_2 {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class = "triangle"
id = "triangle_1" > </div>
	    <div class="triangle" id="triangle_2"></div >

＆＃13;

＆＃13;

＆＃13;

这是我的工作解决方案，使用矩形而不是三角形（link）。

Answer 1

jQuery API没有方法可以找到2个三角形样式的DIV的交集。

你可以找到你的红色交叉三角形＆＃34;使用数学：

第一部分：找到红色多边形的顶点

1. 找到两个triangle-div的3个顶点。
2. 对于这两个三角形，使用＃1点找到形成三角形边的3个线段。
3. 找到每个三角形A线段的每个交叉点（如果有）与每个三角形B线段。 请参阅下面的实用程序，了解如何查找这些交叉点。

如果您在＃3中找到正好3个交叉点，那么2个原始三角形相交以形成一个新的三角形 - 然后继续第二部分......

第二部分：从第一部分中的3个交叉点创建一个三角形多边形

1. 找到＆＃34;中心点＆＃34;你的新三角形。这是其x和y的算术平均值：centerX = (vertex1.x + vertex2.x + vertex3.x)/3和centerY = (vertex1.y + vertex2.y + vertex3.y)/3

2. 计算从中心点到用户每个点的所有角度。您可以使用Math.atan2( (vertex1.y-centerY), (vertext1.x-centerX) )执行此操作...对于vertex2和＆amp; vertex3。

3. 按照＃2中计算的角度按升序对点进行排序。

这组3个点是红色三角形的顶点。

第三部分：使用第二部分中的顶点将一个新的红色div设置为三角形

<强>实用程序

这是一个javascript函数，可以找到两个线段（如果有）的交集：

// Get interseting point of 2 line segments (if any)
// Attribution: http://paulbourke.net/geometry/pointlineplane/
function line2lineIntersection(p0,p1,p2,p3) {

    var unknownA = (p3.x-p2.x) * (p0.y-p2.y) - (p3.y-p2.y) * (p0.x-p2.x);
    var unknownB = (p1.x-p0.x) * (p0.y-p2.y) - (p1.y-p0.y) * (p0.x-p2.x);
    var denominator  = (p3.y-p2.y) * (p1.x-p0.x) - (p3.x-p2.x) * (p1.y-p0.y);        

    // Test if Coincident
    // If the denominator and numerator for the ua and ub are 0
    //    then the two lines are coincident.    
    if(unknownA==0 && unknownB==0 && denominator==0){return(null);}

    // Test if Parallel 
    // If the denominator for the equations for ua and ub is 0
    //     then the two lines are parallel. 
    if (denominator == 0) return null;

    // If the intersection of line segments is required 
    // then it is only necessary to test if ua and ub lie between 0 and 1.
    // Whichever one lies within that range then the corresponding
    // line segment contains the intersection point. 
    // If both lie within the range of 0 to 1 then 
    // the intersection point is within both line segments. 
    unknownA /= denominator;
    unknownB /= denominator;

    var isIntersecting=(unknownA>=0 && unknownA<=1 && unknownB>=0 && unknownB<=1)

    if(!isIntersecting){return(null);}

    return({
        x: p0.x + unknownA * (p1.x-p0.x),
        y: p0.y + unknownA * (p1.y-p0.y)
    });
}