将二维数组转换为多边形点答案

【问题标题】：Converting a 2d array to polygon points将二维数组转换为多边形点
【发布时间】：2014-02-12 11:37:08
【问题描述】：

假设您有一个二维数组，就像经常用于组织瓦片地图的数组一样，1 代表实心瓦片。

var map = [
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
    [0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,1,1,1,1,1,1,0,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,1,0,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,1,0,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,1,0,0],
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
];

我想将此形状转换为多边形的点，而不是方形瓷砖。数组中的每个 1 都有一个设置的宽度和高度，就像瓦片图一样，但我只想要将形状重新创建为实心多边形所需的角点。当 1 在数组中像对角线一样时，我还想要对角线斜率而不是阶梯状效果。我一直在寻找答案，但我无法找出最好的方法，有什么想法吗？

谢谢。

【问题讨论】：

谷歌marching squares

标签： javascript arrays algorithm polygon tile

【解决方案1】：

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
    <script defer="defer">
      var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var poly = new Kinetic.Line({
        points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93],
        fill: '#00D2FF',
        stroke: 'black',
        strokeWidth: 5,
        closed: true
      });

      // add the shape to the layer
      layer.add(poly);

      // add the layer to the stage
      stage.add(layer);
    </script>
  </body>
</html>

你可以把你想要的点放在点数组中，然后在你的项目中使用动力学 js。

链接：http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/

【讨论】：

我需要为碰撞检测和计算视线以及渲染存储最少数量的点，所以我只是在使用算法来确定地图何时加载。跨度>
@MrAdam 尝试 Douglas-Peucker 算法。