KonvaJS连接方块和正确的线条位置？

// 创建Stage对象
var stage = new Konva.Stage({
  container: 'container', // 容器的ID
  width: 800,
  height: 600
});

// 创建Layer对象
var layer = new Konva.Layer();

// 创建方块
var rect1 = new Konva.Rect({
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  fill: 'red'
});

var rect2 = new Konva.Rect({
  x: 300,
  y: 200,
  width: 100,
  height: 100,
  fill: 'blue'
});

// 创建线条
var line = new Konva.Line({
  points: [rect1.x() + rect1.width() / 2, rect1.y() + rect1.height() / 2, rect2.x() + rect2.width() / 2, rect2.y() + rect2.height() / 2],
  stroke: 'green',
  strokeWidth: 2
});

// 创建Group对象，并将方块和线条添加到其中
var group = new Konva.Group();
group.add(rect1);
group.add(rect2);
group.add(line);

// 将Group添加到Layer中
layer.add(group);

// 将Layer添加到Stage中
stage.add(layer);

// 渲染图形
stage.draw();