Javascript 如何将左右端口移动到节点图像的中心，而不是整个节点的中心

我使用GOjs创建节点，并将它们彼此连接起来，就像流程图一样。我有两个div。在第一个div（id=“NodesContainer”）中，我创建go.palete，通过使用第二个div（id=“myDiagram”）的id，我在javascript中设计调用Init（）方法时的节点

连接两个节点时，节点的左右端口形成在整个节点大小的中心，而不是节点形状的中心。 因此，当我们连接节点时，它看起来很奇怪

如何将左右端口的位置移动到节点图像中心稍高的位置？如果您知道答案，请帮助我

这是我想要的图像

---

在垂直面板中构造节点模板，并使用内部聚光面板包含端口，如下所示：

myDiagram.nodeTemplateMap.add("TaskNodes",
  $(go.Node, "Vertical", nodeStyle(),
    $(go.Panel, "Spot",
      $(go.Picture,
        {
          maxSize: new go.Size(30, 30),
          portId: "",
        },
        new go.Binding("source", "img")
      ),
      // four named ports, one on each side:
      makePort("T", go.Spot.Top, false, true),
      makePort("L", go.Spot.Left, true, true),
      makePort("R", go.Spot.Right, true, true),
      makePort("B", go.Spot.Bottom, true, false)
    ), // end Spot Panel
    $(go.TextBlock,
      {
        margin: new go.Margin(3, 0, 0, 0),
        wrap: go.TextBlock.WrapFit,
        textAlign: "center",
        font: "5pt sans-serif",
        isMultiline: true,
        editable: true,
        height: 14,
        width: 30,
        stroke: "black"
      },
      new go.Binding("text", "text").makeTwoWay()
    )
  )
);

---

是的，你是对的，我只是错过了粘贴精确节点的代码。现在我已经更新了我的代码。有一个名为“TaskNodes”的节点，它具有我想要的节点属性，除了左右端口位置问题。请对此进行研究。我已更新了答案以反映您的TaskNodes模板。谢谢Jon Hardy，让我在我的页面上尝试您的代码。我会让你知道这之后的变化。嗨，乔恩·哈迪，你的代码解决了我的问题，除了“底部端口”。底部端口的链接与节点文本重叠。此底部端口应形成在节点文本的底部。那么它将彻底解决我的问题。请帮我解决这个问题。增加文本块周围的边距。

myDiagram.nodeTemplateMap.add("TaskNodes",
  $(go.Node, "Vertical", nodeStyle(),
    $(go.Panel, "Spot",
      $(go.Picture,
        {
          maxSize: new go.Size(30, 30),
          portId: "",
        },
        new go.Binding("source", "img")
      ),
      // four named ports, one on each side:
      makePort("T", go.Spot.Top, false, true),
      makePort("L", go.Spot.Left, true, true),
      makePort("R", go.Spot.Right, true, true),
      makePort("B", go.Spot.Bottom, true, false)
    ), // end Spot Panel
    $(go.TextBlock,
      {
        margin: new go.Margin(3, 0, 0, 0),
        wrap: go.TextBlock.WrapFit,
        textAlign: "center",
        font: "5pt sans-serif",
        isMultiline: true,
        editable: true,
        height: 14,
        width: 30,
        stroke: "black"
      },
      new go.Binding("text", "text").makeTwoWay()
    )
  )
);