javascript - 检测两个重叠的三 Angular 形并用 javascript 为重叠部分着色

Question

我用html做了两个三 Angular 形div。我正在使用 jquery Ui 使它们可拖动。

现在我想重叠这两个三 Angular 形并用另一种颜色为重叠部分着色，如下所示:

你知道我如何用 jQuery 做到这一点吗？

$(document).ready(function() {

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

#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;
}

<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 >

这是我使用矩形而不是三 Angular 形的工作解决方案 (link)。

Answer 1

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

您可以使用数学找到“红色相交三 Angular 形”:

第 I 部分:找到红色多边形的顶点

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

如果您在上面的#3 中恰好找到了 3 个交点，那么这 2 个原始三 Angular 形相交形成了一个新的三 Angular 形——然后继续第二部分...

第二部分:根据第一部分中找到的 3 个交点创建三 Angular 形多边形

1. 找到新三 Angular 形的“中心点”。这是它的 x 和 y 的算术平均值:centerX = (vertex1.x + vertex2.x + vertex3.x)/3 和 centerY = (vertex1.y + vertex2.y + vertex3.y)/3

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

3. 按照#2 中计算的 Angular 对点进行升序排序。

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

第三部分:使用第二部分中的顶点将新的红色 div 样式化为三 Angular 形

---

实用程序

这是一个找到 2 条线段(如果有的话)的交点的 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)
    });
}