javascript - 在 JavaScript 中裁剪一个矩形

标签 javascript math geometry 2d

我正在尝试编写一个函数,它接受两个重叠的矩形并返回一个矩形数组,这些矩形覆盖了矩形 A 的区域,但排除了矩形 B 的区域。我很难弄清楚这个算法的外观就像可能发生的碰撞数量巨大且难以解释。

tl;dr 我正在尝试使用另一个矩形裁剪一个矩形,从而生成覆盖剩余区域的矩形集合。

|-------------|                               |-------------|
|A            |                               |R1           |
|     |-------|----|                          |-----|-------|
|     |B      |    |           To             |R2   |
|     |       |    |          ====>           |     |
|     |       |    |                          |     |
|-----|-------|    |                          |-----|
      |            |
      |------------|

POSSIBLE OVERLAP PATTERNS

|-----|          |-----|      |-----|        |-----|
| |---|-|      |-|---| |      | |-| |        | |-| |
|-|---| |      | |---|-|      |-|-|-|        | |-| |
  |-----|      |-----|          |-|          |-----|

  |-|          |-----|          |-----|
|-|-|-|        | |---|-|      |-|---| |
| |-| |        | |---|-|      |-|---| |
|-----|        |-----|          |-----|

请注意,可能的重叠模式是显示的两倍,因为矩形 A 和 B 可能是上述任何重叠模式中的以太矩形。

最佳答案

这两个矩形将屏幕分成 9 个区域(不是 14 个)。再想想你的配置:

 y1 -> |-------------|       
       |A            |        
 y2 -> |     |-------|----|   
       |     |B      |    |   
       |     |       |    |   
       |     |       |    |   
 y3 -> |-----|-------|    |   
             |            |
 y4 ->       |------------|
       ^     ^       ^    ^
       x1    x2      x3   x4

x 坐标定义了 5 个垂直波段,但第一个(左)和最后一个(右)没有意义,因此您只需处理从 x1 到 x4 的 3 个波段。 y 坐标相同:从 y1 到 y4 的三个水平带。

所以这是属于 A、B 的 9 个矩形区域,不属于任何区域或属于两者。你的例子是这样划分的:

  |-----|-------|----|       
  |A    |A      |none| 
  |-----|-------|----|   
  |A    |Both   |B   |   
  |     |       |    |   
  |     |       |    |   
  |-----|-------|----|   
  |none |B      |B   |
  |-----|-------|----|

所以比较A和B的坐标,你会发现9个区域中哪些区域只属于A,它们是要保留的区域。

关于javascript - 在 JavaScript 中裁剪一个矩形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16619835/

相关文章:

javascript - 带轮廓偏移的虚线轮廓在 IE 中不起作用

javascript - Angular 1.5 组件 onChanges 不起作用

java - 两条线会在笛卡尔平面相交吗

html - 用底部三 Angular 形制作div

java - 在两个节点(圆)之间绘制边(线)

javascript - 如何让 chrome 停止自动填写各种形式的电子邮件地址和密码?

javascript - 在javascript中将单独的地址字符串序列化为一个

c# - 如何计算聚类熵?工作示例或软件代码

python - Sympy nsolve 函数和多个解决方案

algorithm - 查找由一组矩形包含的点