流程圖控件GoJS教程：設(shè)置面板屬性（二）
GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖。
自動面板
自動面板適合面板其他元素周圍的“主要”元素。主要元素通常是Z順序中最后面的，即第一個元素，因此其他元素不會被它遮擋。通過將GraphObject.isPanelMain設(shè)置為true來聲明main元素; 但通常不存在這樣的元素，因此它使用面板的第一個元素。
通常，自動面板將測量非“主”元素，確定可以包圍所有元素的寬度和高度，并使“主”元素的大小或稍大。您沒有設(shè)置“main”元素的GraphObject.desiredSize（或GraphObject.width或GraphObject.height）。
自動面板是在對象周圍實現(xiàn)邊框的常用方法。使用Shape作為第一個/“main”元素 - 它成為邊框。所述Shape.figure通常為“矩形”或“RoundedRectangle”或“橢圓形”，如下所示。其他元素成為邊框內(nèi)面板的“內(nèi)容”。在下面的示例中，只有一個“content”元素，一個TextBlock。我們設(shè)置了GraphObject.background和Shape.fill屬性來幫助顯示對象的大小和位置。
自動面板中應(yīng)包含兩個或多個元素。
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”元素內(nèi)的“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" })
));
對于除“矩形”圖之外的大多數(shù)Shape，我們不希望“main”形狀與“content”元素的大小相同。例如，橢圓需要明顯大于內(nèi)容，以避免內(nèi)容溢出形狀的邊緣。這可以通過設(shè)置Shape.spot1和Shape.spot2屬性來控制，這些屬性確定內(nèi)容應(yīng)該去的區(qū)域。許多預(yù)定義的數(shù)字都有自己的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屬性比在內(nèi)容元素上指定GraphObject.margin更通用，更靈活。
約束尺寸自動面板
如果限制整個面板的大小，則可能有更少或更多的空間可用于容納“main”元素內(nèi)的所有“content”元素。在以下示例中，每個聲部的總大小為60x60，導(dǎo)致“內(nèi)容” TextBlock的寬度和高度受到限制，小于自然寬度，從而導(dǎo)致文本換行。但是，可能沒有足夠的高度來顯示整個內(nèi)容元素，導(dǎo)致它們被剪裁。您可以看到在第三部分中文本被剪裁，因為橢圓內(nèi)的可用區(qū)域比矩形內(nèi)的可用區(qū)域少。
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" })
));
您不應(yīng)該設(shè)置自動面板的“main”元素的大小（GraphObject.desiredSize或GraphObject.width或GraphObject.height）。
自動面板中應(yīng)包含兩個或多個元素。
Spot面板
Spot Panel與Auto Panels類似，有一個“main”元素，還有“其他”元素沒有調(diào)整大小。“其他”元素基于具有Spot值的GraphObject.alignment屬性定位在“main”元素周圍。與Auto Panels不同，Spot Panels的主要特征是這些元素可能超出“main”元素的范圍。
這對于使主要形狀具有特定尺寸并將較小元件定位在相對于主要形狀的特定位置是有用的。請注意，在此示例中，TextBlocks位于四個角的中心，導(dǎo)致面板大于主要形狀，如淺灰色背景所示。
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將其內(nèi)容元素與GraphObject.alignment給出的一般位置對齊。如上所示，定位的內(nèi)容元素中的精確點默認為Spot.Center。但是您可以將元素的GraphObject.alignmentFocus設(shè)置為使用不同的點。例如，如果使用相同的alignmentFocus作為對齊方式，則元素將位于主要元素的邊界內(nèi)：
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：“l(fā)ightgray” }，
$（go.Shape，“Rectangle”，
{ fill：“l(fā)ightgreen”，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與子元素對齊
您可能會發(fā)現(xiàn)有必要將嵌套在Spot面板內(nèi)的對象與該面板的主元素對齊。當您希望Spot面板的元素看起來具有自己的文本標簽或其他裝飾器時，通常會出現(xiàn)這種情況。
為此，您可以使用Panel.alignmentFocusName。在下面的示例中，Spot面板包含一個主元素和另一個Panel。我們希望將主要元素的角對齊此面板中的形狀，因此我們?yōu)槠涿⒃诿姘迳显O(shè)置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面板中的非主要元素伸展時，它會占據(jù)主元素的寬度和/或高度。這對于在Panel中對齊元素非常有用。
在下面的示例中，紅色主元素周圍有三個元素，它們伸展到它的邊長。主要元素是Part.resizeObject，當它改變大小時，拉伸元素將相應(yīng)地改變大小。
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中應(yīng)包含兩個或多個元素。
請記住，每個面板的元素都是按順序繪制的。通常，您希望主元素位于所有其他元素的后面，因此主元素將首先出現(xiàn)。但是，如果您希望main元素位于某些或所有其他元素的前面，則可以將main元素移動為面板的第一個元素，如果還將其GraphObject.isPanelMain屬性設(shè)置為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現(xiàn)在可視地位于Spot Panel的非主要元素前面，因為它已被移動到面板中的最后一個元素。
如果不在所需的主元素上將GraphObject.isPanelMain設(shè)置為true，則在此示例中， Panel.findMainElement將返回第一個TextBlock。這將導(dǎo)致所有其他元素排列在TextBlock周圍。由于TextBlock很小且矩形Shape很大且不透明，因此Shape將覆蓋所有其他TextBlock，因此用戶可能看不到任何文本，具體取決于其他TextBlock的大小和對齊方式。
用Spot Panel剪裁
Spot Panels可以將Panel.isClipping設(shè)置為true，以將主Panel元素用作剪切區(qū)域而不是繪制的Shape。如果使用，則主元素必須是Shape，并且不會繪制其筆觸和填充。當Panel.isClipping為true時，Spot面板將自身調(diào)整為主要元素邊界和所有其他元素邊界的交集，而不是這些邊界的并集。
例：
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僅包含一個重新調(diào)整以適合Panel大小的元素。
這對于獲取任意元素（尤其是Panel）并自動擠壓它以適應(yīng)小的固定大小區(qū)域非常有用。通過在該元素上設(shè)置GraphObject.scale可以實現(xiàn)相同的功能，但使用Viewbox Panel可以自動執(zhí)行計算。
在此圖中，有兩個相同的自動面板副本，每個副本包含一個圖片和一個由橢圓形狀包圍的標題TextBlock。左側(cè)的那個位于Viewbox面板內(nèi)，被迫放入80x80區(qū)域; 右邊的那個是它的自然尺寸。請注意，您仍然可以縮小比例查看面板的所有元素，以便它可以放入Viewbox面板中。但由于嵌套面板比較寬，因此80x80 Viewbox側(cè)面有空白區(qū)域。
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")
)
));
更多教程內(nèi)容，請點擊查看“流程圖控件GoJS教程：設(shè)置面板屬性（一）”
想要購買GoJS正版授權(quán)的朋友可以。
更多精彩內(nèi)容，敬請關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線