Question

假设您有一个二维数组，就像通常用于组织平铺地图的数组一样，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都具有像tile图一样的设置宽度和高度，但我只想要将形状重新创建为实心多边形所需的角点。当阵列中的1是对角线时，我也想要对角线斜坡而不是阶梯式效果。我已经玩过并寻找答案，但我想不出最好的方法来做这个，有什么想法吗？

感谢。

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

你可以把你想要的那些点放在点数组中，并使用kinetic js作为你的项目。

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

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

1 个答案: