本教程详细指导如何在gojs中实现动态端口的精确位置控制。通过利用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()可以确保对齐属性的任何运行时更改也能被持久化到数据模型中。
在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属性精确控制其在节点上的位置。
完整示例代码（关键部分）：
更多相关专题
js获取数组长度的方法在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。
553
2023.06.20
js刷新当前页面js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容
374
2023.07.04
js四舍五入js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容
731
2023.07.04
js删除节点的方法js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。
477
2023.09.01
JavaScript转义字符JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。
394
2023.09.04
js生成随机数的方法js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。
990
2023.09.04
如何启用JavaScriptJavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。
656
2023.09.12
Js中Symbol类详解javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。
551
2023.09.20
Java 桌面应用开发（JavaFX 实战）本专题系统讲解 Java 在桌面应用开发领域的实战应用，重点围绕 JavaFX 框架，涵盖界面布局、控件使用、事件处理、FXML、样式美化（CSS）、多线程与UI响应优化，以及桌面应用的打包与发布。通过完整示例项目，帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。
36
2026.01.14
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
