Skip to content
Advertisement

How to merge multiple rectangles into one polygon

I am struggling with this part of my task at work. I’ve deliberately not detailed the context of the work task to try and keep the focus on the problem. I have to merge rectangles into a single polygon as shown in the attached image, but I need the list of points so that I can write these out into Polygon shape (DOM object) for a Swing canvas and then SVG export.

enter image description here

I know the origin of each rectangle, i.e. the upper left x and y coordinates (float x, float y) and also the width (float) and height (float) of each rectangle, so from this I can calculate the coordinates of all four corners of each rectangle, i.e. top, right, bottom, left, i.e. top = origin = x, y, right = x + width, bottom = x + width, y + height and left = x, y + height.

I have a List<Rectangle> rectangles and would like an algorithm which will translate this list into a single polygon (List<Points> where a point represents the coordinates (x, y) of each point as shown in the diagram marked red “x”s.

I will then use this list of points to write out an element in the DOM for printing a web page eventually in SVG. So, my end result has to be a list of points (i.e. x,y coordinates for constructing a polygon shape in SVG).

I did see this answer which does something similar, but I’m not sure if I can apply this to my case – also it’s written in Python and not Java: Merging multiple adjacent rectangles into one polygon

Advertisement

Answer

Here is a solution my colleague and I came up with. Hope it can help someone else.

JavaScript
User contributions licensed under: CC BY-SA
6 People found this is helpful
Advertisement