流程圖控件GoJS教程：調(diào)試建議（下）
GoJS是一款功能強(qiáng)大，快速且輕量級(jí)的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡(jiǎn)化您的JavaScript / Canvas 程序。
GoJS現(xiàn)已更新至最新版本2.1發(fā)布，修復(fù)了一些bug，增強(qiáng)用戶體驗(yàn)，趕快下載試試吧~
調(diào)試節(jié)點(diǎn)面板設(shè)計(jì)
在構(gòu)建自己的節(jié)點(diǎn)模板時(shí)，有時(shí)節(jié)點(diǎn)中的對(duì)象的大小和位置可能無(wú)法達(dá)到您想要的方式。重要的是要了解如何在面板中組裝對(duì)象。您將要重新閱讀：
使用GraphObjects構(gòu)建
文字區(qū)塊
形狀
圖片
面板
桌子面板
GraphObjects的大小
假設(shè)您要一個(gè)由兩個(gè)TextBlock組成的節(jié)點(diǎn)，一個(gè)在另一個(gè)之上。您可以從以下開(kāi)始：
diagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" }),
$(go.Panel, "Vertical",
{ margin: 3 },
$(go.TextBlock,
new go.Binding("text", "t1")),
$(go.TextBlock,
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];
但是，等等-您希望節(jié)點(diǎn)為固定大小。因此，您可以設(shè)置節(jié)點(diǎn)的寬度和高度：
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Vertical",
{ margin: 3 },
$(go.TextBlock,
new go.Binding("text", "t1")),
$(go.TextBlock,
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];
看起來(lái)更好，但是您很驚訝兩個(gè)TextBlocks都在中心附近。這是為什么？出于調(diào)試目的，讓我們更改每個(gè)TextBlock和嵌套面板的GraphObject.background顏色。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Vertical", { background: "red" },
{ margin: 3 },
$(go.TextBlock, { background: "lime" },
new go.Binding("text", "t1")),
$(go.TextBlock, { background: "cyan" },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];
現(xiàn)在很明顯，TextBlocks的大小不超過(guò)容納文本的大小，Panel也不超過(guò)容納兩個(gè)TextBlocks的大小。
因此，您認(rèn)為只需要GraphObject.stretch面板即可。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Vertical", { background: "red" },
{ margin: 3, stretch: go.GraphObject.Fill },
$(go.TextBlock, { background: "lime" },
new go.Binding("text", "t1")),
$(go.TextBlock, { background: "cyan" },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];
現(xiàn)在具有紅色背景的面板確實(shí)填滿了整個(gè)外部汽車(chē)面板，在其主要形狀內(nèi)充當(dāng)邊框。但是，石灰綠色和青綠色的TextBlocks仍然只是它們的自然高度。
如果您希望文本在垂直方向上均勻間隔，您可能會(huì)認(rèn)為您只需要拉伸這兩個(gè)TextBlocks。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Vertical", { background: "red" },
{ margin: 3, stretch: go.GraphObject.Fill },
$(go.TextBlock, { background: "lime" },
{ stretch: go.GraphObject.Fill },
new go.Binding("text", "t1")),
$(go.TextBlock, { background: "cyan" },
{ stretch: go.GraphObject.Fill },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];
現(xiàn)在，TextBlocks在水平而不是垂直拉伸！原因是垂直面板從不垂直拉伸其元素。它始終以其自然高度將其元素堆疊在一起。當(dāng)垂直面板的高度超過(guò)其元素的堆疊時(shí)，底部將有多余的空間。
而不是垂直面板，我們應(yīng)該使用表格面板。這需要在每個(gè)元素（即每個(gè)TextBlock）上分配GraphObject.row。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Table", { background: "red" },
{ margin: 3, stretch: go.GraphObject.Fill },
$(go.TextBlock, { background: "lime" },
{ row: 0 },
new go.Binding("text", "t1")),
$(go.TextBlock, { background: "cyan" },
{ row: 1 },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top", t2: "Bottom"}];
因?yàn)槟J(rèn)情況下元素在表格面板的單元格中居中，所以不需要拉伸TextBlocks。（您可以通過(guò)設(shè)置Panel.defaultAlignment或Panel.defaultStretch來(lái)更改它。）
我們都做完了嗎？也許。文本更改大小會(huì)怎樣？一種測(cè)試方法是使用長(zhǎng)短字符串使用不同的模型數(shù)據(jù)創(chuàng)建一堆節(jié)點(diǎn)。
但是，為了演示另一種調(diào)試技術(shù)，我們將使Node Part.resizable。您可以交互地調(diào)整節(jié)點(diǎn)的大?。ㄕ麄€(gè)節(jié)點(diǎn)，因?yàn)槲覀儧](méi)有設(shè)置Part.resizeObjectName），因此您可以看到嵌套的Panel和TextBlocks如何處理約束的大小。
diagram.nodeTemplate =
$(go.Node, "Auto", { resizable: true },
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Table", { background: "red" },
{ margin: 3, stretch: go.GraphObject.Fill },
$(go.TextBlock, { background: "lime" },
{ row: 0 },
new go.Binding("text", "t1")),
$(go.TextBlock, { background: "cyan" },
{ row: 1 },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
diagram.findNodeForData(diagram.model.nodeDataArray[0]).isSelected = true;
請(qǐng)注意，當(dāng)節(jié)點(diǎn)變窄時(shí)，它將如何剪切文本而不是自動(dòng)換行。假設(shè)您希望文本自動(dòng)換行。
這可以通過(guò)水平拉伸TextBlocks來(lái)實(shí)現(xiàn)，這將定義它們的寬度，從而迫使文本換行。但是，當(dāng)文本方向從左到右時(shí)，文本通常繪制在TextBlock邊界的左側(cè)。如果希望每個(gè)TextBlock在其邊界內(nèi)居中，則需要將TextBlock.textAlign設(shè)置為“ center”。
diagram.nodeTemplate =
$(go.Node, "Auto", { resizable: true },
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Table", { background: "red" },
{ margin: 3, stretch: go.GraphObject.Fill,
defaultStretch: go.GraphObject.Horizontal },
$(go.TextBlock, { background: "lime" },
{ row: 0, textAlign: "center" },
new go.Binding("text", "t1")),
$(go.TextBlock, { background: "cyan" },
{ row: 1, textAlign: "center" },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
diagram.findNodeForData(diagram.model.nodeDataArray[0]).isSelected = true;
可以看到TextBlocks沿可用區(qū)域的寬度延伸。請(qǐng)注意，隨著節(jié)點(diǎn)變窄，文本如何換行，從而導(dǎo)致TextBlocks變得更窄。當(dāng)然，如果沒(méi)有足夠的空間來(lái)渲染所有文本，則將剪切TextBlocks。
現(xiàn)在我們只需要除去用于調(diào)試的彩色背景和可調(diào)整大小性，并分配所需的顏色和字體即可。
diagram.nodeTemplate =
$(go.Node, "Auto",
{ width: 80, height: 100 },
$(go.Shape, { fill: "white" }),
$(go.Panel, "Table",
{ margin: 3, stretch: go.GraphObject.Fill,
defaultStretch: go.GraphObject.Horizontal, background: "purple" },
$(go.TextBlock,
{ row: 0, textAlign: "center", stroke: "white", font: "bold 11pt sans-serif" },
new go.Binding("text", "t1")),
$(go.TextBlock,
{ row: 1, textAlign: "center", stroke: "white", font: "bold 11pt sans-serif" },
new go.Binding("text", "t2"))
)
);
diagram.model.nodeDataArray = [{ t1: "Top String", t2: "Bottom String"}];
====================================================
想要購(gòu)買(mǎi)GoJS正版授權(quán)的朋友可以。
QQ交談
在線咨詢(xún)
渝公網(wǎng)安備
50010702500608號(hào)
客服熱線