如何在Konva中实现部队布局网络？

// 创建舞台和画布
var stage = new Konva.Stage({
  container: 'container',
  width: 800,
  height: 600
});

var layer = new Konva.Layer();
stage.add(layer);

// 定义网格结构
var gridSize = 50; // 网格大小
var gridColor = 'lightgray'; // 网格颜色

for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    var rect = new Konva.Rect({
      x: i * gridSize,
      y: j * gridSize,
      width: gridSize,
      height: gridSize,
      fill: gridColor,
      stroke: 'black',
      strokeWidth: 1
    });

    layer.add(rect);
  }
}

// 设置连接关系
for (var i = 0; i < 10; i++) {
  for (var j = 0; j < 10; j++) {
    if (i < 9) {
      var line = new Konva.Line({
        points: [i * gridSize + gridSize, j * gridSize + gridSize / 2, (i + 1) * gridSize, j * gridSize + gridSize / 2],
        stroke: 'black',
        strokeWidth: 1
      });

      layer.add(line);
    }

    if (j < 9) {
      var line = new Konva.Line({
        points: [i * gridSize + gridSize / 2, j * gridSize + gridSize, i * gridSize + gridSize / 2, (j + 1) * gridSize],
        stroke: 'black',
        strokeWidth: 1
      });

      layer.add(line);
    }
  }
}

// 更新画布并渲染到舞台上
layer.draw();