將二維數組轉換為多邊形點

Question

假設您有一個2d數組，如通常用於組織圖塊地圖的2d數組，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那樣對角線時的階梯狀效果。 我到處玩耍並尋找答案，但是我不知道最好的方法，有什么想法嗎？

謝謝。

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>

您可以將所需的點放在點數組中，並為您的項目使用動力學js。

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

將二維數組轉換為多邊形點

問題描述

1 個解決方案

解決方案1
-1 2014-02-12 11:40:50

將二維數組轉換為多邊形點

問題描述

1 個解決方案

解決方案1 -1 2014-02-12 11:40:50

解決方案1
-1 2014-02-12 11:40:50