如何在Go.JS图中指定X、Y位置添加形状并实现填充？

核心问题修正 #

你的代码存在几个关键错误，导致无法正确创建定位节点：

1. node.location赋值错误：Go.JS中必须用go.Point对象来设置位置，而非(xcord, ycord)这种语法。
2. 不必要的自定义Geometry：对于矩形这类基础形状，无需手动创建go.Geometry——直接通过Shape的width/height控制尺寸，由Node的位置属性决定坐标即可。
3. Node布局选择不当："Auto"布局会自动调整节点位置以适应内容，不适合手动定位场景，改用"Position"布局更合适。

修正后的addNode函数 #

// 在指定坐标添加形状节点的函数
function addNode(nodeType, color, text = " ", xcord, ycord, size) {
  // 使用Position布局，完全手动控制节点位置
  const node = new go.Node("Position")
    // 设置节点位置为目标坐标（基于节点中心）
    .setLocation(new go.Point(xcord, ycord))
    .add(new go.Shape(nodeType, {
      width: size,
      height: size,
      fill: color,
      strokeWidth: 3
    }))
    .add(new go.TextBlock(text, {
      margin: 5,
      // 让文本块居中显示在形状上
      alignment: go.Spot.Center
    }));
  
  diagram.add(node);
}

结合containsPoint筛选有效位置 #

要实现小形状填充大形状的需求，你可以按以下步骤操作：

• 先获取大形状的go.Geometry对象（比如从大节点的Shape.Geometry属性获取）。
• 遍历目标区域内的候选坐标（按小形状的尺寸间隔遍历），对每个坐标点：
  1. 检查该点是否在大形状的Geometry范围内（使用geometry.containsPoint(new go.Point(x, y))）。
  2. 若符合条件，调用上述修正后的addNode函数创建小形状。

示例逻辑片段：

// 假设bigShapeGeo是大形状的Geometry对象
const smallSize = 20; // 小正方形尺寸
const step = smallSize; // 遍历间隔，避免重叠

// 遍历大形状包围盒内的所有候选中心点
const bounds = bigShapeGeo.bounds;
for (let x = bounds.x; x < bounds.x + bounds.width; x += step) {
  for (let y = bounds.y; y < bounds.y + bounds.height; y += step) {
    const point = new go.Point(x + smallSize/2, y + smallSize/2); // 取小正方形中心点
    if (bigShapeGeo.containsPoint(point)) {
      addNode("Rectangle", "#4CAF50", "", x, y, smallSize);
    }
  }
}

额外提示 #

• 如果需要精确判断小正方形是否完全在大形状内，可改用geometry.intersectsRect方法，传入小正方形的包围盒（new go.Rect(x, y, smallSize, smallSize)），并判断返回结果是否为完全包含。
• 若大形状是不规则图形，containsPoint会自动处理路径内的判断，无需额外逻辑。

内容的提问来源于stack exchange，提问作者Knight0Light