javascript - converting multiple connecting polygon's to 1 polygon - Stack Overflow

admin管理员组

文章数量:1323897

I am building a floor planner app (react/typescript), currently I have all walls as polygon where we define 4 corners.

I need a logic/algorithm to merge connecting walls. I did try convex/concave hull and variations, but nothing seems to work as I need.

Here on the left side we have my walls as I draw them with polygons, and on the right side what I need.

export type Location = {
  x: number;
  y: number;
};

export type Size = {
  length: number;
  thickness: number;
};

export type Corners = { // corner 1, 2, 3, 4 are the polygon locations for the wall
  c1: Location;
  c2: Location;
  c3: Location;
  c4: Location;
  c5: number;
  c6?: Location;
};

export type PlanObject = { // wall
  index: number;
  toolType: number; // tooltype
  wallType?: number;
  text?: string;
  orientation: number; // will always be angle
  corners: Corners;
  location: Location;
  size: Size;
  internal: boolean;
};

I could add all 5 different ways I tried to fix this, but none are working and not sure if any of these would be the correct way to continue.

anyone that could point me to the correct way would be awesome.

I am building a floor planner app (react/typescript), currently I have all walls as polygon where we define 4 corners.

I need a logic/algorithm to merge connecting walls. I did try convex/concave hull and variations, but nothing seems to work as I need.

Here on the left side we have my walls as I draw them with polygons, and on the right side what I need.

export type Location = {
  x: number;
  y: number;
};

export type Size = {
  length: number;
  thickness: number;
};

export type Corners = { // corner 1, 2, 3, 4 are the polygon locations for the wall
  c1: Location;
  c2: Location;
  c3: Location;
  c4: Location;
  c5: number;
  c6?: Location;
};

export type PlanObject = { // wall
  index: number;
  toolType: number; // tooltype
  wallType?: number;
  text?: string;
  orientation: number; // will always be angle
  corners: Corners;
  location: Location;
  size: Size;
  internal: boolean;
};

I could add all 5 different ways I tried to fix this, but none are working and not sure if any of these would be the correct way to continue.

anyone that could point me to the correct way would be awesome.

• javascript
• polygon
• convex-hull

Share Improve this question Follow asked Jan 12 at 5:12 Mayga FatmawatiMayga Fatmawati 13022 silver badges1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

I hope this function will be useful...

This is a small representation of our rectangle:

A----------B
|          |
C----------D

Assuming that each rectangle object has the points defined as array's.

Assuming that the class Rectangle has the getters, getA(), getB(), getC() and getD and....

Assuming that these objects of type rectangle are in an array, and sorted, you could use:

// we obtain the list of ordered points, which define the contour
points = [];
for( let i = 0; i < rectangles.length; i++ ) {
   points.put( rectangles[ i ].getA();
   points.put( rectangles[ i ].getB();
}
for( let i = rectangles.length - 1; i >= 0 ; i-- ) {
   points.put( rectangles[ i ].getD();
   points.put( rectangles[ i ].getC();
}

PS: Assuming that... no, not anymore, haha, it is important to note that the AD and BC sides are the ones in contact with each other.

I would check out JSTS. This is a javascript port of a java library JTS that implements many operations on (collections of) geometries.

Mainly the CascadedPolygonUnion operation looks like a good match with what you are trying to accomplish.

本文标签： javascriptconverting multiple connecting polygon39s to 1 polygonStack Overflow