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

假设您有一个像常用于组织瓷砖地图的二维数组，则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的角度与阵列中的对角线相似时，我也想要对角斜坡而不是阶梯状效果。我玩过并搜索了一个答案，但我无法弄清楚这样做的最佳方式，有什么想法？

谢谢。

来源

2014-02-12 Suffick

谷歌'踏着squares' – nullpotent

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

你可以在points数组中放入你想要的点，并使用kinetic js来处理你的项目。

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

来源

2014-02-12 11:40:50

我需要存储碰撞检测和计算的视线以及渲染，虽然点的最小数，所以我的算法后，我只是去弄清楚当地图加载时。 – Suffick

@MrAdam尝试Douglas-Peucker算法。 – nullpotent

@iccthedral看起来很有前途，谢谢。 – Suffick

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

回答

相关问题