流程图控件GoJS教程：设置面板属性（二）
GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。
自动面板
自动面板适合面板其他元素周围的“主要”元素。主要元素通常是Z顺序中最后面的，即第一个元素，因此其他元素不会被它遮挡。通过将GraphObject.isPanelMain设置为true来声明main元素; 但通常不存在这样的元素，因此它使用面板的第一个元素。
通常，自动面板将测量非“主”元素，确定可以包围所有元素的宽度和高度，并使“主”元素的大小或稍大。您没有设置“main”元素的GraphObject.desiredSize（或GraphObject.width或GraphObject.height）。
自动面板是在对象周围实现边框的常用方法。使用Shape作为第一个/“main”元素 - 它成为边框。所述Shape.figure通常为“矩形”或“RoundedRectangle”或“椭圆形”，如下所示。其他元素成为边框内面板的“内容”。在下面的示例中，只有一个“content”元素，一个TextBlock。我们设置了GraphObject.background和Shape.fill属性来帮助显示对象的大小和位置。
自动面板中应包含两个或多个元素。
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(0, 0), background: "lightgray" },
$(go.Shape, "Rectangle", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(100, 0), background: "lightgray" },
$(go.Shape, "RoundedRectangle", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(200, 0), background: "lightgray" },
$(go.Shape, "Ellipse", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { background: "yellow" })
));
如果将GraphObject.margin添加到相同三个面板中的每个面板中的TextBlock，则将在“main”元素内的“content”元素周围添加一个小空间。
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(0, 0), background: "lightgray" },
$(go.Shape, "Rectangle", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { margin: 2, background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(100, 0), background: "lightgray" },
$(go.Shape, "RoundedRectangle", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { margin: 2, background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(200, 0), background: "lightgray" },
$(go.Shape, "Ellipse", { fill: "lightgreen" }),
$(go.TextBlock, "some text", { margin: 2, background: "yellow" })
));
对于除“矩形”图之外的大多数Shape，我们不希望“main”形状与“content”元素的大小相同。例如，椭圆需要明显大于内容，以避免内容溢出形状的边缘。这可以通过设置Shape.spot1和Shape.spot2属性来控制，这些属性确定内容应该去的区域。许多预定义的数字都有自己的spot1和spot2的默认值。
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(0, 0), background: "lightgray" },
$(go.Shape, "RoundedRectangle",
{ fill: "lightgreen", spot1: new go.Spot(0, 0), spot2: new go.Spot(1, 1) }),
$(go.TextBlock, "some text", { background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(100, 0), background: "lightgray" },
$(go.Shape, "RoundedRectangle",
{ fill: "lightgreen", spot1: new go.Spot(0, 0, 10, 0), spot2: new go.Spot(1, 1, -10, -10) }),
$(go.TextBlock, "some text", { background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(200, 0), background: "lightgray" },
$(go.Shape, "RoundedRectangle",
{ fill: "lightgreen", spot1: new go.Spot(0, 0, 0, 20), spot2: new go.Spot(1, 1, 0, -20) }),
$(go.TextBlock, "some text", { background: "yellow" })
));
主Shape上的spot1和spot2属性比在内容元素上指定GraphObject.margin更通用，更灵活。
约束尺寸自动面板
如果限制整个面板的大小，则可能有更少或更多的空间可用于容纳“main”元素内的所有“content”元素。在以下示例中，每个声部的总大小为60x60，导致“内容” TextBlock的宽度和高度受到限制，小于自然宽度，从而导致文本换行。但是，可能没有足够的高度来显示整个内容元素，导致它们被剪裁。您可以看到在第三部分中文本被剪裁，因为椭圆内的可用区域比矩形内的可用区域少。
diagram.add(
$(go.Part, "Auto",
{ width: 60, height: 60 }, // set the size of the whole panel
{ position: new go.Point(0, 0), background: "lightgray" },
$(go.Shape, "Rectangle", { fill: "lightgreen" }),
$(go.TextBlock, "Some Wrapping Text", { background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ width: 60, height: 60 }, // set the size of the whole panel
{ position: new go.Point(100, 0), background: "lightgray" },
$(go.Shape, "RoundedRectangle", { fill: "lightgreen" }),
$(go.TextBlock, "Some Wrapping Text", { background: "yellow" })
));
diagram.add(
$(go.Part, "Auto",
{ width: 60, height: 60 }, // set the size of the whole panel
{ position: new go.Point(200, 0), background: "lightgray" },
$(go.Shape, "Ellipse", { fill: "lightgreen" }),
$(go.TextBlock, "Some Wrapping Text", { background: "yellow" })
));
您不应该设置自动面板的“main”元素的大小（GraphObject.desiredSize或GraphObject.width或GraphObject.height）。
自动面板中应包含两个或多个元素。
Spot面板
Spot Panel与Auto Panels类似，有一个“main”元素，还有“其他”元素没有调整大小。“其他”元素基于具有Spot值的GraphObject.alignment属性定位在“main”元素周围。与Auto Panels不同，Spot Panels的主要特征是这些元素可能超出“main”元素的范围。
这对于使主要形状具有特定尺寸并将较小元件定位在相对于主要形状的特定位置是有用的。请注意，在此示例中，TextBlocks位于四个角的中心，导致面板大于主要形状，如浅灰色背景所示。
diagram.add(
$(go.Part, "Spot",
{ background: "lightgray" },
$(go.Shape, "Rectangle",
{ fill: "lightgreen", width: 100, height: 50 }),
$(go.TextBlock, "TL", { background: "yellow", alignment: go.Spot.TopLeft }),
$(go.TextBlock, "TR", { background: "yellow", alignment: go.Spot.TopRight }),
$(go.TextBlock, "BL", { background: "yellow", alignment: go.Spot.BottomLeft }),
$(go.TextBlock, "BR", { background: "yellow", alignment: go.Spot.BottomRight })
));
Spot Panel将其内容元素与GraphObject.alignment给出的一般位置对齐。如上所示，定位的内容元素中的精确点默认为Spot.Center。但是您可以将元素的GraphObject.alignmentFocus设置为使用不同的点。例如，如果使用相同的alignmentFocus作为对齐方式，则元素将位于主要元素的边界内：
diagram.add(
$(go.Part, "Spot",
{ background: "lightgray" },
$(go.Shape, "Rectangle",
{ fill: "lightgreen", width: 100, height: 50 }),
$(go.TextBlock, "TL", { background: "yellow",
alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.TopLeft }),
$(go.TextBlock, "TR", { background: "yellow",
alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight }),
$(go.TextBlock, "BL", { background: "yellow",
alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.BottomLeft }),
$(go.TextBlock, "BR", { background: "yellow",
alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.BottomRight })
));
如果使用相反的alignmentFocus作为对齐，则元素将位于主元素的边界之外：
diagram.add （$（go.Part，“Spot”，
{ background：“lightgray” }，
$（go.Shape，“Rectangle”，
{ fill：“lightgreen”，width：100，height：50 }），
$ （go.TextBlock，“TL”，{ background：“yellow”，
alignment：go.Spot.TopLeft，alignmentFocus：go.Spot.BottomRight}），
$（go.TextBlock，“TR”，{background：“yellow”，
alignment：go.Spot.TopRight，alignmentFocus：go.Spot.BottomLeft}），
$（go.TextBlock，“BL”，{ background：“yellow”，
alignment：go.Spot.BottomLeft，alignmentFocus：go.Spot.TopRight}），
$（go.TextBlock，“BR”，{ background：“yellow”，
alignment：go.Spot.BottomRight，alignmentFocus：go.Spot.TopLeft}）
））;
alignmentFocus offsetX / Y也可以用于偏移alignmentFocus点，与Link标签的工作方式相同：
diagram.layout = $(go.GridLayout,
{ wrappingColumn: 10, wrappingWidth: 900, isViewportSized: false }); var blue = "rgba(0,0,255,.2)";
diagram.add(
$(go.Part, "Vertical",
{ locationObjectName: 'main' },
$(go.Panel, "Spot",
$(go.Shape, "Rectangle",
{ name: 'main', fill: "lightgreen", stroke: null, width: 100, height: 100 }),
$(go.Shape, "Rectangle",
{ fill: "lightcoral", stroke: null, width: 30, height: 30, alignment: go.Spot.TopRight, alignmentFocus: go.Spot.TopRight
})
),
$(go.TextBlock, "alignment: TopRight,\n alignmentFocus: TopRight",
{ font: '11px sans-serif' })
));
diagram.add(
$(go.Part, "Vertical",
{ locationObjectName: 'main' },
$(go.Panel, "Spot",
$(go.Shape, "Rectangle",
{ name: 'main', fill: "lightgreen", stroke: null, width: 100, height: 100 }),
$(go.Shape, "Rectangle",
{ fill: "lightcoral", stroke: null, width: 30, height: 30, alignment: go.Spot.TopRight, alignmentFocus: go.Spot.BottomRight
})
),
$(go.TextBlock, "alignment: TopRight,\n alignmentFocus: BottomRight",
{ font: '11px sans-serif' })
));
diagram.add(
$(go.Part, "Vertical",
{ locationObjectName: 'main' },
$(go.Panel, "Spot",
$(go.Shape, "Rectangle",
{ name: 'main', fill: "lightgreen", stroke: null, width: 100, height: 100 }),
$(go.Shape, "Rectangle",
{ fill: "lightcoral", stroke: null, width: 30, height: 30, // BottomRight with offsetX = 15
alignment: go.Spot.TopRight, alignmentFocus: new go.Spot(1, 1, 15, 0)
})
),
$(go.TextBlock, "alignment: TopRight,\n alignmentFocus: BottomRight with offsetX = 15",
{ font: '11px sans-serif' })
));
使用Spot Panels与子元素对齐
您可能会发现有必要将嵌套在Spot面板内的对象与该面板的主元素对齐。当您希望Spot面板的元素看起来具有自己的文本标签或其他装饰器时，通常会出现这种情况。
为此，您可以使用Panel.alignmentFocusName。在下面的示例中，Spot面板包含一个主元素和另一个Panel。我们希望将主要元素的角对齐此面板中的形状，因此我们为其命名并在面板上设置alignmentFocusName。
diagram.add(
$(go.Node, "Spot", // Main shape
$(go.Shape, { strokeWidth: 4, fill: 'lime' }), // Instead of aligning this Panel, we want to align the shape inside of it, to the corner of the main shape
$(go.Panel, "Horizontal",
{ background: 'rgba(255,0,0,0.1)', alignmentFocusName: 'shape', alignment: go.Spot.TopRight, alignmentFocus: go.Spot.BottomLeft },
$(go.TextBlock, "some\nlong label", { margin: 8 }),
$(go.Shape, "RoundedRectangle", { width: 20, height: 20, name: 'shape', strokeWidth: 0, fill: 'red' }, new go.Binding("fill", "color"))
)
)
);
使用Spot Panels拉伸
当Spot面板中的非主要元素伸展时，它会占据主元素的宽度和/或高度。这对于在Panel中对齐元素非常有用。
在下面的示例中，红色主元素周围有三个元素，它们伸展到它的边长。主要元素是Part.resizeObject，当它改变大小时，拉伸元素将相应地改变大小。
diagram.add （$（go.Part，“Spot”，
{ resizable：true， resizeObjectName：'MAIN'
}，
$（go.Shape，“Rectangle”，{ name：'MAIN'，strokeWidth：0，width：80，身高：60，填充：'rgba（255,0,0，.8）' }），// red
$（go.Shape，“Rectangle”，{ stretch：go.GraphObject.Vertical，
strokeWidth：0，width：20，fill：'rgba（0,255,0，.3）'，// green
alignment：go.Spot.Left，alignmentFocus：go.Spot.Right
}），
$（go.Shape，“ Rectangle“，{ stretch：go.GraphObject.Vertical，strokeWidth：0，width：20，fill：'rgba（0,0,255，.3）'，// blue
alignment：go.Spot.Right，alignmentFocus：go.Spot .Left
}），
$（go.Shape，“Rectangle”，{ stretch：go.GraphObject.Horizontal，strokeWidth：0，height：20，fill：'rgba（255,0,255，.3）'，// pink
alignment：go.Spot。 Bottom，alignmentFocus：go.Spot.Top
}）
））;
diagram.select（diagram.parts.first（））;
使用Spot Panel约束尺寸
如果限制整个面板的大小，面板可能会剪切其元素。例如，当整个面板必须为100x50时，主要元素在排列它们之后会有水平但不垂直的空间以及所有其他元素。
diagram.add(
$(go.Part, "Spot",
{ background: "lightgray", width: 100, height: 50 }, // it is unusual to set the size!
$(go.Shape, "Rectangle", { fill: "lightgreen", width: 40, height: 40 }),
$(go.TextBlock, "TL", { background: "yellow",
alignment: go.Spot.TopLeft, alignmentFocus: go.Spot.BottomRight }),
$(go.TextBlock, "TR", { background: "yellow",
alignment: go.Spot.TopRight, alignmentFocus: go.Spot.BottomLeft }),
$(go.TextBlock, "BL", { background: "yellow",
alignment: go.Spot.BottomLeft, alignmentFocus: go.Spot.TopRight }),
$(go.TextBlock, "BR", { background: "yellow",
alignment: go.Spot.BottomRight, alignmentFocus: go.Spot.TopLeft })
));
Spot Panels中应包含两个或多个元素。
请记住，每个面板的元素都是按顺序绘制的。通常，您希望主元素位于所有其他元素的后面，因此主元素将首先出现。但是，如果您希望main元素位于某些或所有其他元素的前面，则可以将main元素移动为面板的第一个元素，如果还将其GraphObject.isPanelMain属性设置为true。
diagram.add(
$(go.Part, "Spot",
{ background: "lightgray" },
$(go.TextBlock, "TL", { background: "yellow", alignment: go.Spot.TopLeft }),
$(go.TextBlock, "TR", { background: "yellow", alignment: go.Spot.TopRight }),
$(go.TextBlock, "BL", { background: "yellow", alignment: go.Spot.BottomLeft }),
$(go.TextBlock, "BR", { background: "yellow", alignment: go.Spot.BottomRight }), // NOTE: the main element isn't first, so it must be declared by setting isPanelMain to true
$(go.Shape, "Rectangle",
{ isPanelMain: true },
{ fill: "lightgreen", width: 100, height: 50 })
));
请注意，显式声明为主要元素的不透明Shape现在可视地位于Spot Panel的非主要元素前面，因为它已被移动到面板中的最后一个元素。
如果不在所需的主元素上将GraphObject.isPanelMain设置为true，则在此示例中， Panel.findMainElement将返回第一个TextBlock。这将导致所有其他元素排列在TextBlock周围。由于TextBlock很小且矩形Shape很大且不透明，因此Shape将覆盖所有其他TextBlock，因此用户可能看不到任何文本，具体取决于其他TextBlock的大小和对齐方式。
用Spot Panel剪裁
Spot Panels可以将Panel.isClipping设置为true，以将主Panel元素用作剪切区域而不是绘制的Shape。如果使用，则主元素必须是Shape，并且不会绘制其笔触和填充。当Panel.isClipping为true时，Spot面板将自身调整为主要元素边界和所有其他元素边界的交集，而不是这些边界的并集。
例：
diagram.layout = $(go.GridLayout); // Without Panel.isClipping
diagram.add(
$(go.Part, "Spot",
{ scale: 2 },
$(go.Shape, "Circle", { width: 55, height: 55, strokeWidth: 0 } ),
$(go.Picture, "../samples/images/55x55.png",
{ width: 55, height: 55 }
)
)
); // Using Panel.isClipping
diagram.add(
$(go.Part, "Spot",
{ isClipping: true, scale: 2 },
$(go.Shape, "Circle", { width: 55, height: 55, strokeWidth: 0 } ),
$(go.Picture, "../samples/images/55x55.png",
{ width: 55, height: 55 }
)
)
); // Using Panel.isClipping and also having a surrounding panel
diagram.add(
$(go.Part, "Spot",
{ scale: 2 },
$(go.Shape, "Circle", { width: 65, height: 65, strokeWidth: 0, fill: 'red' } ),
$(go.Panel, "Spot",
{ isClipping: true },
$(go.Shape, "Circle", { width: 55, height: 55, strokeWidth: 0 } ),
$(go.Picture, "../samples/images/55x55.png",
{ width: 55, height: 55 }
)
)
)
);
Viewbox面板
Viewbox Panel仅包含一个重新调整以适合Panel大小的元素。
这对于获取任意元素（尤其是Panel）并自动挤压它以适应小的固定大小区域非常有用。通过在该元素上设置GraphObject.scale可以实现相同的功能，但使用Viewbox Panel可以自动执行计算。
在此图中，有两个相同的自动面板副本，每个副本包含一个图片和一个由椭圆形状包围的标题TextBlock。左侧的那个位于Viewbox面板内，被迫放入80x80区域; 右边的那个是它的自然尺寸。请注意，您仍然可以缩小比例查看面板的所有元素，以便它可以放入Viewbox面板中。但由于嵌套面板比较宽，因此80x80 Viewbox侧面有空白区域。
diagram.add(
$(go.Part, go.Panel.Viewbox, // or "Viewbox"
{ position: new go.Point(0, 0), background: "lightgray", width: 80, height: 80 },
$(go.Panel, "Auto",
$(go.Shape, "Ellipse", { fill: "lightgreen" }),
$(go.Panel, "Vertical",
$(go.Picture, { source: "images/120x160.png" }),
$(go.TextBlock, "a 120x160 kitten")
)
)
));
diagram.add(
$(go.Part, "Auto",
{ position: new go.Point(100, 0), background: "lightgray" },
$(go.Shape, "Ellipse", { fill: "lightgreen" }),
$(go.Panel, "Vertical",
$(go.Picture, { source: "images/120x160.png" }),
$(go.TextBlock, "a 120x160 kitten")
)
));
更多教程内容，请点击查看“流程图控件GoJS教程：设置面板属性（一）”
想要购买GoJS正版授权的朋友可以。
更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼
QQ交谈
在线咨询
渝公网安备
50010702500608号
客服热线