logo GoJS教程 2019 我也要发布文档

设置面板属性(一)


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" })
   ));

流程图控件GoJS教程:设置面板属性(一)

位置面板将始终在其自己的面板坐标系中包含(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" })
   ));

2.png

请注意,当您在位置面板中定位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 })
   ));

3.png

约束宽度垂直面板

垂直面板通常具有其最宽元素的宽度,高度是其所有元素的总和。但是,您也可以将宽度和/或高度设置为大于或小于自然尺寸。或者,如果有一个包含此面板的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 })
   ));

4.png

这两个垂直面板的宽度均为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 })
   ));

5.png

这是一个垂直面板,带有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) })
   ));

6.png

如果更改该示例以在一个或多个元素上设置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 })
   ));

7.png

水平面板

水平面板就像垂直面板,除了元素水平排列而不是垂直排列。元素永远不会水平拉伸,但它们可以垂直拉伸。因为元件从未水平拉伸的拉伸值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 })
   ));

8.png

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

垂直和水平面板的元素可以按相反方向排列:垂直面板从下到上,水平面板从右到左。只需将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" })
   ));

9.png

默认对齐和拉伸

垂直和水平面板都支持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 })
   ));

10.png

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

 Spots

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

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

Spot.TopLeftSpot.TopSpot.TopRight
Spot.LeftSpot.CenterSpot.Right
Spot.BottomLeftSpot.BottomSpot.BottomRight

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) })
   ));

11.png

除了相对于某个矩形区域的点的小数位置,您还可以指定绝对偏移。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) })
   ));

12.png

更多教程内容,请点击查看“流程图控件GoJS教程:设置面板属性(二)”


想要购买GoJS正版授权的朋友可以咨询慧都官方客服

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

图片2.jpg