一个JS验证：坐标+高宽使图片不能重叠

[Allan168]

请教
c#绘图graphics.DrawImage（x,y,width,height）
我现在在页面上某区域画多个图（比如画11个）

所以图片1（x1,y1,width1,height1）；
图片2（x2,y2,width2,height2）；
图片3（x3,y3,width3,height3）......


但每个图之间不允许有重叠(每个图有x,y,width,height四个已知元素)，
需要一个JS验证的方法
请问这个JS验证的算法应该是什么?

[Allan168]

自己顶下

[s_liangchao1s]

可以近似想象成简单的<碰撞算法>

[Allan168]

我暂时想到的是：
x2 >= (x1 + width1) && y2 >= (y1 + height1)
x3 >= (x2 + width2) && y3 >= (y2 + height2)
......

但有个问题，如果
x2 <=(x1 + width1) 那么 y2 必须<= (y1 + height1)
......

[碧海情天-赵亮]

既然是画圆，就应该是（x1,y1,R）；
怎么是（x1,y1,width1,height1）；呢
平白让问题麻烦了。

判断两个圆是否有交集的方法，就是算出(x1,y1)到(x2,y2)的直线距离，看它是否小于2R，如果小于，就说明有交集。

[hoojo]

用坐标和宽度判断重叠应该是可以的
取得交集

[碧海情天-赵亮]

[Quote=引用 4 楼 theforever 的回复:]
既然是画圆，就应该是（x1,y1,R）；
怎么是（x1,y1,width1,height1）；呢
平白让问题麻烦了。

判断两个圆是否有交集的方法，就是算出(x1,y1)到(x2,y2)的直线距离，看它是否小于2R，如果小于，就说明有交集。
[/Quote]
老了，眼神不好了，硬是把那么多个“图”看成“圆”了。

如果是矩形重叠判断的话，更容易了，不需求第三方数据，直接利用现有的数据就可以了。
具体情况，要看你的(X1,Y1)代表的点是什么，是矩形的中心点，还是左上角的点。
然后，无论是怎样，求出每个矩形的左上角坐标（X1,Y1)，和右下角坐标(X2,Y2)就可以。
然后，依次把每个矩形的（X1,X2)和(Y1,Y2)分别存入XA,YA两个数组中。
循环XA数组，每个矩形都有一对(X1,X2），对应的是一段横向直线段。
1.如果所有横线段都有间隔，就说明无论Y如何，肯定已经没有重叠的可能了。
2.如果有部分横线段有交集,这个交集判断，容易吧，就是 IF((aX1>bX1&&aX1<bX2）||(aX2>bX1&&aX2<bX2)),记录下它所属的矩形ID。然后进入对YA数组的判断，在这轮判断，和上轮其实相同，只是把XA数组变成了YA数组，IF((aX1>bX1&&aX1<bX2）||(aX2>bX1&&aX2<bX2))变成了IF((aY1>bY1&&aY1<bY2）||(aY2>bY1&&aY2<bY2)),这样，如何还有中招的，就表明是重叠了，对应的ID也能获知。

概括起来，原理就是分别作一次水平是否有交集的测试，对有交集的再作一轮垂直是否有交集的测试。如果两个方向都有交集，就证明重叠。