How could I simplify a complex polygon?

Recently I've been thinking about how to transform a complex polygon into a non-complex polygon. How is this done?

This is the sort of thing I want to do:

Example

I'm going to end up with JavaScript when I'm done, but any form of a solution is fine (language, algorithm, or just plain English).

标签： javascript geometry polygon

6条回答

劫难

2楼-- · 2019-04-28 07:38

This is a late answer, but this can be done using Javascript Clipper Library. The desired operation is Simplifying (which internally uses Union operation) and it removes self-intersections where edge(s) crosses other edge(s).

Note! Javascript Clipper 5 cannot ensure that in all cases the solution consists only of truly simple polygons. This like special case is the vertices touching edges. Clipper 6 (Javascript version not yet ready) can handle these like special cases also.

Simplifying Polygons using Javascript Clipper Main Demo

You can play with Clipper using Javascript Clipper Main Demo. Click Polygons-Custom and you can input your own polygon there and then make the desired operations.

Let's take your example:
[[7,86, 196,24, 199,177, 47,169, 51,21, 224,102, 223,146, 7,140, 7,86]]

If you input these points in demo (as Subject or Clip), you get the following polygon: enter image description here

Then make a Simplify operation which produces the following solution:

enter image description here

If you click Solution in Polygon Explorer, you can see the coordinates of simplified polygon: [[199,177, 47,169, 47.75,141.13, 7,140, 7,86, 49.62,72.02, 51,21, 114.51,50.73, 196,24, 197.28,89.49, 224,102, 223,146, 198.38,145.32]]

Code example of Simplifying Polygons

And finally, I put the full functional code in JSBIN, which includes SVG drawing functions and is therefore rather long:

<html>
  <head>
    <title>Javascript Clipper Library / Simplifying Polygons</title>
    <script src="clipper.js"></script>
    <script>
function draw() {
  var subj_polygons = [[{"X":7,"Y":86},{"X":196,"Y":24},{"X":199,"Y":177},{"X":47,"Y":169},{"X":51,"Y":21},{"X":224,"Y":102},{"X":223,"Y":146},{"X":7,"Y":140},{"X":7,"Y":86}]];
  var scale = 100;
  subj_polygons = scaleup(subj_polygons, scale);
  var cpr = new ClipperLib.Clipper();
  cpr.AddPolygons(subj_polygons, ClipperLib.PolyType.ptSubject);

  var solution_polygons = new ClipperLib.Polygons();
solution_polygons = cpr.SimplifyPolygons(subj_polygons, ClipperLib.PolyFillType.pftNonZero);
  //console.log(JSON.stringify(solution_polygons));
  var svg = '<svg style="margin-top:10px; margin-right:10px;margin-bottom:10px;background-color:#ffffdffffd" width="240" height="200">';
  svg += '<path stroke="black" fill="yellow" stroke-width="2" d="' + polys2path(solution_polygons, scale) + '"/>';
  svg += '</svg>';
  document.getElementById('svgcontainer').innerHTML = svg;
}

// helper function to scale up polygon coordinates
function scaleup(poly, scale) {
  var i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++) {
      poly[i][j].X *= scale;
      poly[i][j].Y *= scale;
    }
  }
  return poly;
}

// converts polygons to SVG path string
function polys2path (poly, scale) {
  var path = "", i, j;
  if (!scale) scale = 1;
  for(i = 0; i < poly.length; i++) {
    for(j = 0; j < poly[i].length; j++) {
      if (!j) path += "M";
      else path += "L";
      path += (poly[i][j].X / scale) + ", " + (poly[i][j].Y / scale);
    }
    path += "Z";
  }
  return path;
}
    </script>
  </head>
  <body onload="draw()">
  <h2>Javascript Clipper Library / Simplifying Polygons</h2>
  This page shows an example of simplifying polygon and drawing it using SVG.
    <div id="svgcontainer"></div>
  </body>
</html>

0人赞添加讨论(0) 举报

做个烂人

3楼-- · 2019-04-28 07:40

I believe the easiest route is to perform a plane sweep to detect all the edge-edge intersections. It is not difficult to augment a basic plane-sweep algorithm implementation to maintain the outermost boundary, which is what you want. Almost every textbook on computational geometry explains this well.

0人赞添加讨论(0) 举报

等我变得足够好

4楼-- · 2019-04-28 07:51

Ok, it seems I made working solution:

http://mrpyo.github.com/Polygon/

It's ActionScript so you should have no problem translating it into JavaScript. I can explain used algorithm if somebody is interested...

0人赞添加讨论(0) 举报

疯言疯语

5楼-- · 2019-04-28 07:56

You should maintain list of incident edges for every intersection point.

Then for ever point choose edge (outgoing), which has the smallest angle (anti-clockwise) with the previous (incoming) edge.

0人赞添加讨论(0) 举报

小情绪 Triste *

6楼-- · 2019-04-28 07:56

It seems like you're going to want to look into Convex Hull algorithms. Here's an applet of a few Convex Hull algorithms. You might be able to modify one of the algorithms to get your extreme points and go from there.

0人赞添加讨论(0) 举报

疯言疯语

7楼-- · 2019-04-28 08:05

I would use the same heuristic that I would use when drawing the polygon by hand (which is probably not the most mathematically efficient way to caluclaute that polygon, but probably the easiest to understand/implement).

Start at a point
Find all the intersections between my current point and the point I'm trying to get to
If none exist draw to the next point
If one does, then draw to there, and then set the next point to the next point from there
If you aren't back to the beginning then goto 2.

Here is an example implementation on jsfiddle. Note: it isn't optimized.

0人赞添加讨论(0) 举报