Question 421500 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – converting multiple connecting polygon's to 1 polygon

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.

enter image description here

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.

Tags:

2

Answers


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

    Login or Signup to reply.
  2. 0

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

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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search