GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图，且极大地简化您的JavaScript / Canvas 程序。
这是所有图形对象的抽象基类。从GraphObject继承的类包括:Shape、TextBlock、Picture和Panel。部件类从面板类派生，节点类和链接类从面板类派生。
使用静态函数graphject是非常常见的。为了建立一个图形对象的可视化树。你可以在介绍中看到很多这样的例子，从构建对象开始，从最小样本开始。
由于GraphObject是一个抽象类，程序员不创建GraphObject本身，但是这个类定义了各种GraphObject所使用的许多属性。
GraphObject上唯一的视觉属性是background和areabbackground。然而，你可以通过设置可见来控制是否绘制图形对象，或者如果你仍然希望图形对象占据空间，可以将不透明度设置为零。此外，如果你想控制任何鼠标或触摸事件是否“看到”GraphObject，你可以将pickable设置为false。
要了解更多关于如何绘制的信息，请参见Shape、TextBlock和Picture类上的属性。
GraphObject分级
GraphObject定义了导致对象自身大小不同的大多数属性。最突出的包括:
desiredSize、minSize和maxSize属性用于显式设置或限制可视元素的大小。width和height是方便属性，分别设置了desiredSize的宽度和高度。
角度和比例属性用于转换视觉元素。
拉伸属性决定了图形对象将如何填充它的视觉空间，由它的包含面板上下文赋予它。顶级(部分)图形对象不受此属性影响，因为它们总是被授予无限空间。
一个图中的所有图形对象都被测量，然后按照它们包含的面板以树状的方式排列。在测量和排列之后，一个GraphObject将拥有只读属性naturalBounds、measuredbbounds和actualBounds的有效值。
GraphObject的自然边界描述它的局部大小，不受任何转换(缩放、角度)的影响。
图形对象的测量范围描述了它在其包含的面板内的大小。
图形对象的实际边界描述了它在面板中的位置和给定大小。这个大小可能小于测量范围，例如，如果一个具有较大期望大小的图形对象被放置在一个更小的期望大小的面板中。实际边界小于测量边界通常意味着一个对象将被裁剪。
图形对象的大小和位置在面板
一些graphhobject属性指导包含的面板如何在面板中设置对象的大小和位置。
对齐指定了对象相对于面板上某个区域的位置。例如，斑点的对齐值。bottom-right表示GraphObject应该在面板的右下角。
alignmentFocus精确地指定了GraphObject的哪个点应该在对齐点上对齐。
column和row属性只在Panel中使用。表面板，以指示GraphObject应该在哪里。
columnSpan和rowSpan属性告诉面板。图形对象应该有多大。
isPanelMain属性向某些类型的面板表明，GraphObject是其他面板子对象应该测量或定位的“主要”对象。
margin属性告诉包含它的面板这个图形对象周围的额外空间。
position属性用于确定图形对象作为面板元素时的相对位置。面板的位置。
顶级图形对象是部分
Part是表示顶级对象的GraphObject的派生类。所有顶级图形对象都必须是部件，节点、链接、组和装饰都源自部件。零件的位置决定了零件在文档坐标中的左上角的位置。也看到部分。location，它支持基于零件中不同元素的不同位置来指定位置的方法。
有几个只读属性可以帮助在可视化树中导航。
面板返回直接包含这个图形对象的面板
part返回这个GraphObject所在的部分，可能通过中间的面板;这通常用于获取模型数据Panel.data
layer返回这个GraphObject的部分所在的层
返回这个graphhobject的部件层所在的图表
查看可视化树示例，了解一个显示简单图的可视化树的图。
用户交互
图形对象有几个属性，支持动态自定义交互。有几个可定义的函数可以对输入事件执行:mouseDragEnter, mouseDragLeave, mouseDrop, mouseEnter, mouseHold, mouseHover, mouseLeave和mouseOver。例如，你可以定义鼠标进入-离开事件处理程序来修改鼠标经过链接时的外观:
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape,
{ strokeWidth: 2, stroke: “gray” }, // default color is “gray”
{ // here E is the InputEvent and OBJ is this Shape
mouseEnter: function(e, obj) { obj.strokeWidth = 4; obj.stroke = “dodgerblue”; },
mouseLeave: function(e, obj) { obj.strokeWidth = 2; obj.stroke = “gray”; }
}));
当用户适当地单击graphhobject时，会执行click、doubleClick和contextClick函数。调用这些单击函数时，InputEvent作为第一个参数，而这个GraphObject作为第二个参数。例如，您可以在跳转到另一个页面的节点上定义一个单击事件处理程序:
myDiagram.nodeTemplate =
$(go.Node, “Auto”,
$(go.Shape, “RoundedRectangle”,
new go.Binding(“fill”, “color”)),
$(go.TextBlock,
{ name: “TB”, margin: 3 },
new go.Binding(“text”, “key”)),
{ // second arg will be this GraphObject, which in this case is the Node itself:
click: function(e, node) {
window.open(“https://en.wikipedia.org/Wiki/” + node.data.key);
}
});
注意:您可能更喜欢在图上定义DiagramEvent监听器，而不是在单独的图形对象上定义。DiagramEvents还包括更多的一般事件，这些事件不一定对应于输入事件。
属性actionCancel, actionDown, actionMove和actionUp定义了当GraphObject的isActionable属性设置为true(默认为false)时要执行的函数。更多细节请参见ActionTool。
GraphObjects作为港口
在GoJS中，链接只能连接到指定为“端口”的节点内的元素，默认情况下，唯一的端口是节点本身。在节点中设置GraphObject的portId允许该对象充当端口。注意:唯一一种可以保存链接所连接的端口的模型，即非空字符串的portIds，是GraphLinksModel的GraphLinksModel。linkFromPortIdProperty GraphLinksModel。linkToPortIdProperty被设置为链接数据对象的名称属性。
图形对象有几个属性，仅当它们作为端口时才相关。这些与港口相关的属性是:
portId，它必须设置为节点内唯一的字符串，以便将这个GraphObject视为“端口”，而不是整个节点
fromSpot和toSpot，链路应该连接到这个端口
fromEndSegmentLength和toEndSegmentLength是与端口相邻的链路段的长度
fromShortLength and toShortLength表示链路在接触该端口之前应该终止的距离
fromLinkable和toLinkable，用户是否可以绘制连接到此端口的链接
fromLinkableDuplicates和toLinkableDuplicates，用户是否可以在同一对端口之间绘制多条链路
fromLinkableSelfNode和toLinkableSelfNode，用户是否可以在同一个节点上的端口之间绘制一个链接
fromMaxLinks和toMaxLinks，以限制在特定方向上与此端口连接的链接数量
图形对象作为链接上的标签
图形对象还可以用作链接上的“标签”。除了alignmentFocus属性之外，这些属性还会在链接面板中以一种特定的方式将“标签”定位在链接路径的特定点上:
segmentIndex，标签应该在哪个段上
segmentFraction，标签在段上的距离
segmentOffset，其中标签应该相对于段定位
segmentOrientation，标签应该如何旋转相对于线段的角度
互动行为
有几个属性指定了相当高级的交互行为:
游标，指定游标的CSS字符串
快捷菜单
工具提示
本文章转载自【慧都科技】evget欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，尊重他人劳动成果
原文链接：https://www.evget.com/article/2021/1/5/39988.html