翻译|使用教程|编辑:吴园园|2019-08-26 12:05:10.300|阅读 2382 次
概述:在本期教程中,代码将以编程方式创建一个Part并将其添加到Diagram中,欢迎下载体验。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。
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类的常量值:
Spot.TopLeft | Spot.Top | Spot.TopRight |
Spot.Left | Spot.Center | Spot.Right |
Spot.BottomLeft | Spot.Bottom | Spot.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) })
));
除了相对于某个矩形区域的点的小数位置,您还可以指定绝对偏移。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正版授权的朋友可以。
更多精彩内容,敬请关注下方的微信公众号,及时获取产品最新资讯▼▼▼
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn
文章转载自: