流程图控件GoJS教程：设置面板属性（一）

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。

点击下载GoJS最新试用版

Panel是GraphObject，它将其他GraphObject作为其元素。专家组负责确定其所有要素的大小和位置。每个小组都建立了自己的坐标系。按顺序绘制面板的元素，从而建立这些元素的Z排序。

Position Panels

最简单的Panel是“Position”（Panel.Position）。每个元素都获得其正常大小，无论是其自然大小还是指定的GraphObject.desiredSize （或等效的GraphObject.width和GraphObject.height）。

每个元素的位置由GraphObject.position属性给出。如果未指定位置，则元素位于（0,0）。所有位置都在Panel自己的坐标系中，而不是在文档范围的坐标系中。位置可能包括负坐标。

专家组的规模足以容纳其所有要素。如果您希望它比它大一点，您可以设置Panel.padding属性。

diagram.add(    // all Parts are Panels
    $(go.Part, go.Panel.Position,  // or "Position"
      { background: "lightgray" },
      $(go.TextBlock, "default, at (0,0)", { background: "lightgreen" }),
      $(go.TextBlock, "(100, 0)", { position: new go.Point(100, 0), background: "lightgreen" }),
      $(go.TextBlock, "(0, 100)", { position: new go.Point(0, 100), background: "lightgreen" }),
      $(go.TextBlock, "(55, 28)", { position: new go.Point(55, 28), background: "lightgreen" }),
      $(go.TextBlock, "(33, 70)", { position: new go.Point(33, 70), background: "lightgreen" }),
      $(go.TextBlock, "(100, 100)", { position: new go.Point(100, 100), background: "lightgreen" })
    ));

位置面板将始终在其自己的面板坐标系中包含（0,0）原点。因此，具有集合边界不包括（0,0）的元素的位置面板总是扩展为包括原点。

diagram.add(
    $(go.Part, "Position",
      { background: "lightgray" },
      $(go.TextBlock, "(-50,50)", { position: new go.Point(-50, 50), background: "lightgreen" }),
      $(go.TextBlock, "(50, 50)", { position: new go.Point(50, 50), background: "lightgreen" }),
      $(go.TextBlock, "(0, 100)", { position: new go.Point(0, 100), background: "lightgreen" })
    ));

请注意，当您在位置面板中定位Shape时，将包含其笔划的粗细 Shape.strokeWidth。如果您希望定位多个形状以使它们的几何形状彼此对齐，而不管它们的笔划有多厚，请在每个形状上将Shape.isGeometryPositioned设置为true。

垂直面板

一种非常常见的Panel是“垂直”（Panel.Vertical）。在该面板中，所有面板元件从顶部到底部垂直布置。每个元素都获得其正常高度和正常宽度，或者如果拉伸，则获得面板的宽度。如果元素的GraphObject.stretch属性具有任何垂直拉伸组件，则会将其忽略。

如果元素的宽度不与面板的宽度相同，则根据其GraphObject.alignment属性水平对齐。

以下垂直面板显示了水平对齐的窄对象以及如何水平拉伸窄对象。整个Panel的宽度由最宽物体的宽度决定，在这种情况下，它是第一个元素。请注意最后一个元素如何不设置所需的GraphObject.width属性，以便GraphObject.stretch值有效。

diagram.add(
    $(go.Part, go.Panel.Vertical,  // or "Vertical"
      { background: "lightgray" },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));

约束宽度垂直面板

垂直面板通常具有其最宽元素的宽度，高度是其所有元素的总和。但是，您也可以将宽度和/或高度设置为大于或小于自然尺寸。或者，如果有一个包含此面板的Panel，则可能会对此面板施加大小限制。如果宽度和/或高度大于自然尺寸，则面板较大，留下可用背景刷填充的空白空间。如果宽度和/或高度小于自然尺寸，则可以剪裁内容元素。

下面的垂直面板将宽度设置为140，比所需宽度宽得多。您可以看到最后一个元素的宽度是如何拉伸的。

 diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", width: 140 },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));

这两个垂直面板的宽度均为50，远小于自然。后者也有一个有限的高度。请注意文本是如何自动换行以尝试适合有限宽度的，因为TextBlock.wrap的默认值是允许换行。

diagram.add(
    $(go.Part, "Vertical",
      { position: new go.Point(0, 0), background: "lightgray", width: 50 },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));
  diagram.add(
    $(go.Part, "Vertical",
      { position: new go.Point(70, 0), background: "lightgray", width: 50, height: 65 },
      $(go.TextBlock, "a longer string", { background: "lightgreen" }),
      $(go.TextBlock, "left", { background: "lightgreen", alignment: go.Spot.Left }),
      $(go.TextBlock, "center", { background: "lightgreen", alignment: go.Spot.Center }),
      $(go.TextBlock, "right", { background: "lightgreen", alignment: go.Spot.Right }),
      $(go.TextBlock, "stretch", { background: "lightgreen", stretch: go.GraphObject.Fill })
    ));

这是一个垂直面板，带有GraphObject.Horizontal的默认GraphObject.stretch。因为没有为整个面板指定宽度，所以宽度是最宽元素的宽度，在本例中是第二个宽度。请注意所有TextBlock具有相同的长宽度，如lightgreen背景所突出显示的那样。但是最后一个TextBlock的宽度有限，因此不会拉伸。可以通过提供高度值NaN或高度来限制宽度而不是Infinity高度。

diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", defaultStretch: go.GraphObject.Horizontal },
      $(go.TextBlock, "short", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "a much longer string", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "medium length", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "short2", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "max 50", { margin: 2, background: "lightgreen", maxSize: new go.Size(50, NaN) })
    ));

如果更改该示例以在一个或多个元素上设置GraphObject.width或GraphObject.desiredSize .width（在本例中仅为最后一个），则面板将获得等于设置宽度的最大值的宽度。宽度减小将导致其他拉伸元素以有限宽度（在这种情况下为50）进行测量，这会导致这些TextBlock包裹以适合可用宽度。

  diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", defaultStretch: go.GraphObject.Horizontal },
      $(go.TextBlock, "short", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "a much longer string", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "medium length", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "short2", { margin: 2, background: "lightgreen" }),
      $(go.TextBlock, "= 50", { margin: 2, background: "lightgreen", width: 50 })
    ));

水平面板

水平面板就像垂直面板，除了元素水平排列而不是垂直排列。元素永远不会水平拉伸，但它们可以垂直拉伸。因为元件从未水平拉伸的拉伸值GraphObject.Fill相同GraphObject.Vertical。

请注意，两个面板中的最后一个元素都没有指定所需的GraphObject.height，因此GraphObject.stretch值可能有效。

 diagram.add(
    $(go.Part, go.Panel.Horizontal,  // or "Horizontal"
      { position: new go.Point(0, 0), background: "lightgray" },
      $(go.Shape, { width: 30, fill: "lightgreen", height: 100 }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Top }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Center }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Bottom }),
      $(go.Shape, { width: 30, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));
  diagram.add(
    $(go.Part, "Horizontal",
      { position: new go.Point(200, 0), background: "lightgray", height: 120 },
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Top }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Center }),
      $(go.Shape, { width: 30, fill: "lightgreen", height: 50, alignment: go.Spot.Bottom }),
      $(go.Shape, { width: 30, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));

以相反方向填充水平和垂直面板

垂直和水平面板的元素可以按相反方向排列：垂直面板从下到上，水平面板从右到左。只需将Panel.isOpposite设置为true即可。

diagram.add(
    $(go.Part, "Horizontal",
      { background: "lightgray", isOpposite: true },
      $(go.TextBlock, "0", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "1", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "2", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "3", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "4", { margin: 5, background: "lightgreen" })
    ));

  diagram.add(
    $(go.Part, "Vertical",
      { background: "lightgray", isOpposite: true },
      $(go.TextBlock, "0", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "1", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "2", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "3", { margin: 5, background: "lightgreen" }),
      $(go.TextBlock, "4", { margin: 5, background: "lightgreen" })
    ));

默认对齐和拉伸

垂直和水平面板都支持Panel.defaultAlignment和Panel.defaultStretch属性。这是一种方便，因此您无需在每个元素上设置GraphObject.alignment或GraphObject.stretch属性。

这是一个水平面板，其默认GraphObject.alignment为Spot.Bottom。所有Shape都在底部对齐，即使默认对齐通常是Spot.Center。但是，最后一个Shape的高度被拉伸到面板的整个高度，90。在这种情况下，GraphObject.margin在对象周围提供了一些额外的空间。

diagram.add(
    $(go.Part, "Horizontal",
      { background: "lightgray", height: 90, defaultAlignment: go.Spot.Bottom },
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", height: 60 }),
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", height: 30 }),
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", height: 40 }),
      $(go.Shape, { width: 30, margin: 2, fill: "lightgreen", stretch: go.GraphObject.Fill })
    ));

垂直和水平面板是排列一列或一排对象的相对简单的方法。对于更多选项，您可能需要使用表格面板，即使使用相同的对象集也是如此。当您想要更多地控制一个或多个元素的拉伸时，尤其如此。

 Spots

在我们讨论其他类型的Panel之前，我们应该详细说明一下spot的概念。Spots是一种提供相对和绝对定位信息的方法。

您已经看到了Spots的许多最常见用法，用于指定面板中对象的对齐方式，作为Spot类的常量值：

但Spots比这更普遍。的Spot.x和Spot.y属性可以是零和一，包括之间的任何数。这些值是从任意矩形的左上角沿X轴和Y轴的小数距离。因此，Spot.TopLeft与新的go.Spot（0,0）相同， Spot.BottomRight与新的go.Spot（1,1）相同，而Spot.Right与新的go.Spot相同（1， 0.5）。

以下是矩形形状上标准的九个Spots。

 diagram.add(
    $(go.Part, go.Panel.Spot,  // or "Spot"
      $(go.Shape, "Rectangle",
        { fill: "lightgreen", stroke: null, width: 100, height: 50 }),
      $(go.TextBlock, "0,0",     { alignment: new go.Spot(0, 0) }),
      $(go.TextBlock, "0.5,0",   { alignment: new go.Spot(0.5, 0) }),
      $(go.TextBlock, "1,0",     { alignment: new go.Spot(1, 0) }),
      $(go.TextBlock, "0,0.5",   { alignment: new go.Spot(0, 0.5) }),
      $(go.TextBlock, "0.5,0.5", { alignment: new go.Spot(0.5, 0.5) }),
      $(go.TextBlock, "1,0.5",   { alignment: new go.Spot(1, 0.5) }),
      $(go.TextBlock, "0,1",     { alignment: new go.Spot(0, 1) }),
      $(go.TextBlock, "0.5,1",   { alignment: new go.Spot(0.5, 1) }),
      $(go.TextBlock, "1,1",     { alignment: new go.Spot(1, 1) })
    ));

除了相对于某个矩形区域的点的小数位置，您还可以指定绝对偏移。Spot.offsetX和Spot.offsetY属性决定的点是从由下式给出的小数点的距离Spot.x和Spot.y。这里我们在左下角附近显示三个TextBlocks，在右下角附近显示三个TextBlocks。左边的那些沿着X轴偏移或减去40个单位; 右边的那些沿着Y轴偏移或减去20个单位。TextBlocks还有一个半透明的红色背景，以帮助区分它们的边界。

var pink = "rgba(255,0,0,.2)";
  diagram.add(
    $(go.Part, "Spot",
      $(go.Shape, "Rectangle",
        { fill: "lightgreen", stroke: null, width: 200, height: 50 }),      // Near bottom-left corner:
      $(go.TextBlock, "(-40,0)",  { background: pink, alignment: new go.Spot(0, 1, -40, 0) }),
      $(go.TextBlock, "(0,0)",    { background: pink, alignment: new go.Spot(0, 1, 0, 0) }),
      $(go.TextBlock, "(40,0)",   { background: pink, alignment: new go.Spot(0, 1, 40, 0) }),      // Near bottom-right corner:
      $(go.TextBlock, "(0,-20)",  { background: pink, alignment: new go.Spot(1, 1, 0, -20) }),
      $(go.TextBlock, "(0,0)",    { background: pink, alignment: new go.Spot(1, 1, 0, 0) }),
      $(go.TextBlock, "(0,20)",   { background: pink, alignment: new go.Spot(1, 1, 0, 20) })
    ));

更多教程内容，请点击查看“流程图控件GoJS教程：设置面板属性（二）”

想要购买GoJS正版授权的朋友可以。

更多精彩内容，敬请关注下方的微信公众号，及时获取产品最新资讯▼▼▼