javascript - 在 GoJS 节点或 graphObject 中有 "visible overflow"

Question

我想在节点内部有一个形状，它的一部分会超出节点的边界。意思是，父元素的顶部和左侧 -10px。

现在我在节点内有一个矩形和一个圆，它看起来像这样:

如您所见，链接没有正确连接，因为节点的大小已经扩大。我希望圆圈使用 css 术语绝对定位，换句话说，我不希望它影响节点大小的节点(显然，在此示例中是不可见的)。

我尝试了以下解决方案:

设置节点的宽度和高度。然后它裁剪圆圈，因为它超出了边界。

使用节点中的 fromSpot 和 toSpot 属性将链接连接到节点的中心。显然它们被布局覆盖了，我不知道如何禁用 isLayoutPositioned

使用装饰，但我完全不明白我应该如何使用它们。

正在搜索我是否可以以某种方式设置元素的溢出可见，或以某种方式影响边界，或类似的东西，但没有找到任何适合我的东西。

这里的正确解决方案是什么？

Answer 1

使您的节点成为“Spot”面板，通过为节点分配GraphObject.portId 使节点的“主要”元素成为“端口”，并将通过设置其 GraphObject.alignment 属性，相对于“主要”元素的红色圆圈，在本例中为 go.Spot.TopLeft。我还猜测分配 Node.locationObjectName 是您想要的。


myDiagram.nodeTemplate =
$(go.Node, "现货",
{ locationSpot: go.Spot.Center, locationObjectName: "BODY"},
$(go.Shape,
{ 名称:“ body ”，宽度:50，高度:50，
填充:“浅绿色”，描边宽度:0，
端口号:“”})，
$(go.Shape, "圆形",
{ 对齐方式:go.Spot.TopLeft，宽度:20，高度:20，
填充:“透明”，描边:“红色”})
);


请阅读更多信息 http://gojs.net/latest/intro/nodes.html .我建议不仅阅读入门页面，http://gojs.net/learn ，还有所有介绍页面，http://gojs.net/intro ，适用于您要创建的应用类型。

特别是，这些应该很有用:

• > http://gojs.net/latest/intro/panels.html
• > http://gojs.net/latest/intro/tablePanels.html
• > http://gojs.net/latest/intro/ports.html
• > http://gojs.net/latest/intro/nodes.html