GoJS动态端口精确位置控制教程-js教程-PHP中文网

GoJS动态端口精确位置控制教程

霞舞

发布： 2025-11-20 14:30:02

原创

953人浏览过

GoJS动态端口精确位置控制教程

本教程详细指导如何在go js中实现动态端口的精确位置控制。通过利用gojs的alignment属性，我们可以在节点模板中为端口定义特定的对齐方式。文章将涵盖修改端口数据、更新节点模板中的绑定以及在json模型中正确表示对齐属性的关键步骤，从而确保动态添加的端口能够按照预设的go.spot位置显示。

GoJS是一个功能强大的JavaScript库，用于构建交互式图表和流程图。在开发复杂图表应用时，经常需要动态地在节点上添加或移除端口。虽然GoJS提供了动态添加端口的能力，但要精确控制这些动态端口在节点上的具体位置，则需要对GoJS的布局和数据绑定机制有深入理解。本文将详细介绍如何通过配置alignment属性，实现GoJS动态端口的精确位置控制。

理解端口定位机制

在GoJS中，端口通常作为节点内部面板（如Panel或Table）的子元素存在。其在父容器中的位置受多种因素影响，其中alignment属性扮演着至关重要的角色。alignment属性结合go.Spot值，能够指定元素在其父容器内部的对齐点。例如，go.Spot.Left表示元素将与其父容器的左边缘对齐。

要实现动态端口的精确位置控制，我们需要在以下三个关键环节进行配置：

动态添加端口时设置端口数据中的alignment属性。
在节点模板的itemTemplate中为端口面板添加alignment属性的绑定。
确保JSON模型中持久化了alignment属性。

实现步骤

我们将基于一个GoJS动态端口的示例代码进行修改和优化。

1. 修改 addPort 函数以设置 alignment

当通过addPort函数动态创建新端口数据时，需要将所需的alignment属性添加到newportdata对象中。这将确保新创建的端口在数据层面就携带了其预期的对齐信息。

例如，若要将端口精确对齐到左侧，可以在newportdata中添加alignment: go.Spot.Left。

function addPort(side) {
  myDiagram.startTransaction("addPort");
  myDiagram.selection.each(node => {
    if (!(node instanceof go.Node)) return;
    let i = 0;
    while (node.findPort(side + i.toString()) !== node) i++;
    const name = side + i.toString();
    const arr = node.data[side + "Array"];
    if (arr) {
      const newportdata = {
        portId: name,
        portColor: getPortColor(),
        alignment: go.Spot.Left // 关键：在此处设置端口的对齐方式
      };
      myDiagram.model.insertArrayItem(arr, -1, newportdata);
    }
  });
  myDiagram.commitTransaction("addPort");
}

登录后复制

注意： go.Spot提供了多种预定义值，如go.Spot.Top、go.Spot.Right、go.Spot.Bottom、go.Spot.Center以及组合点如go.Spot.TopLeft等，可以根据需求选择合适的对齐方式。

2. 在节点模板中绑定 alignment 属性

仅仅在端口数据中设置alignment是不够的，还需要在定义端口的itemTemplate中，为go.Panel添加一个alignment属性的绑定，使其能够读取并应用端口数据中的alignment值。使用makeTwoWay()可以确保对齐属性的任何运行时更改也能被持久化到数据模型中。

幻舟AI

专为短片创作者打造的AI创作平台

279

查看详情

在myDiagram.nodeTemplate定义中找到负责渲染端口的itemTemplate，并添加绑定：

myDiagram.nodeTemplate = $(go.Node, "Table", {
    // ... 其他属性
  },
  $(go.Panel, "Vertical", new go.Binding("itemArray", "leftArray"), {
    row: 1,
    column: 0,
    itemTemplate: $(go.Panel, {
      _side: "left",
      fromSpot: go.Spot.Left,
      toSpot: go.Spot.Left,
      fromLinkable: true,
      toLinkable: true,
      cursor: "pointer",
      contextMenu: portMenu,
      alignment: new go.Binding("alignment", "alignment").makeTwoWay() // 关键：添加alignment属性绑定
    },
    new go.Binding("portId", "portId"),
    $(go.Shape, "Rectangle", {
      stroke: null,
      strokeWidth: 0,
      desiredSize: portSize,
      margin: new go.Margin(1, 0)
    }, new go.Binding("fill", "portColor")))
  }),
  // ... 其他端口面板定义
);

登录后复制

通过此绑定，itemTemplate中的go.Panel将根据其对应数据项的alignment属性来定位自身。

3. 更新JSON模型以持久化 alignment

为了确保动态添加的端口及其位置信息在保存和加载图表时能够正确持久化，JSON模型中的端口数据也必须包含alignment属性。当使用myDiagram.model.toJson()保存模型时，如果alignment属性已通过makeTwoWay()绑定，它将自动包含在JSON中。

对于初始加载的模型数据，或者手动构建的模型数据，也应包含此属性：

{
  "class": "GraphLinksModel",
  "copiesArrays": true,
  "copiesArrayObjects": true,
  "linkFromPortIdProperty": "fromPort",
  "linkToPortIdProperty": "toPort",
  "nodeDataArray": [
    {
      "key": 1,
      "name": "Unit One",
      "loc": "101 204",
      "leftArray": [
        {
          "portColor": "#fae3d7",
          "portId": "left0",
          "alignment": "Left" // 确保JSON模型中包含对齐属性
        }
      ],
      "topArray": [],
      "bottomArray": [],
      "rightArray": []
    }
  ],
  "linkDataArray": []
}

登录后复制

在JSON中，go.Spot的枚举值通常以其字符串形式（如"Left", "Top", "Bottom", "Right"）表示。

综合示例与注意事项

完成上述步骤后，您的GoJS应用将能够动态添加端口，并根据alignment属性精确控制其在节点上的位置。

完整示例代码（关键部分）：

<!DOCTYPE html>
<html lang="en">
<body>
<script src="https://unpkg.com/gojs@2.3.11/release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
  <script id="code">
    function init() {
      const $ = go.GraphObject.make;
      myDiagram = new go.Diagram("myDiagramDiv", {
        "undoManager.isEnabled": true
      });

      myDiagram.addDiagramListener("Modified", e => {
        const button = document.getElementById("SaveButton");
        if (button) button.disabled = !myDiagram.isModified;
        const idx = document.title.indexOf("*");
        if (myDiagram.isModified) {
          if (idx < 0) document.title += "*";
        } else {
          if (idx >= 0) document.title = document.title.slice(0, idx);
        }
      });

      function makeButton(text, action, visiblePredicate) {
        return $("ContextMenuButton", $(go.TextBlock, text), {
          click: action
        }, visiblePredicate ? new go.Binding("visible", "", (o, e) => o.diagram ? visiblePredicate(o, e) : false).ofObject() : {});
      }

      const nodeMenu = $("ContextMenu", makeButton("Add left port",
        (e, obj) => addPort("left")), );
      const portSize = new go.Size(8, 8);
      const portMenu = $("ContextMenu", makeButton("Change color",
        (e, obj) => changeColor(obj.part.

登录后复制

以上就是GoJS动态端口精确位置控制教程的详细内容，更多请关注php中文网其它相关文章！