教你玩轉流程圖控件GoJS（一）：使用TextBlock類顯示文本

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中建立流程圖。

GoJS最新版本2.1現已發佈，包含許多新功能，可爲圖表的不一樣組件製做動畫並改進了對數據同步的支持，還有其餘功能改進！

設置TextBlock.text屬性是顯示文本字符串的惟一方法。因爲TextBlock繼承自GraphObject，所以某些GraphObject屬性會影響文本。可是，還有關於如何格式化和繪製文本的其餘純文本選項。

在這些簡單的演示中，代碼以編程方式建立一個Part並將其添加到Diagram中。瞭解模型和數據綁定後，一般不會以編程方式建立部件（節點或連接）。

字體和顏色

TextBlock.font 指定文本的大小和樣式外觀。該值能夠是任何CSS字體說明符字符串。

使用TextBlock.stroke畫筆繪製文本。值能夠是任何CSS顏色字符串或畫筆。默認狀況下，筆劃爲「黑色」。

您還能夠指定要用做背景的畫筆：GraphObject.background。這默認爲無刷，這致使透明背景。背景老是矩形的。

在這些簡單的演示中，代碼以編程方式建立一個Part並將其添加到Diagram中。瞭解模型和數據綁定後，一般不會以編程方式建立部件（節點或連接）。

diagram.add（
 $（go.Part，「Vertical」，
 $（go.TextBlock，{ text：「a Text Block」 }），
 $（go.TextBlock，{ text：「a Text Block」，stroke：「red」 }），
 $（go.TextBlock，{ text：「a Text Block」，background：「lightblue」 }），
 $（go.TextBlock，{ text：「a Text Block」，font：「bold 14pt serif」 }）
 ））;

extBlocks的天然大小因瀏覽器而異

因爲不一樣的瀏覽器以不一樣方式測量畫布文本，所以TextBlocks是GoJS中惟一可能在瀏覽器或不一樣設備之間具備不一致的天然大小的對象。所以，若是您須要在全部瀏覽器中精確且一致地測量對象，則不該使用沒有顯式大小的TextBlocks（GraphObject.desiredSize）來指示任何對象的大小（即，不該具備明確大小的TextBlock不該該是Panel.Auto類型Panel的主要元素。

尺寸和裁剪

TextBlock 的天然大小足以渲染具備給定字體的文本字符串。可是，TextBlock的實際大小在任一維度上均可以更大或更小。尺寸越大，沒有文字的區域; 較小的尺寸會致使削波。

爲了證實這一點，下面的示例以天然大小的TextBlock開頭，後跟顯式大小減少的TextBlock。爲了更好地顯示下面TextBlocks的實際大小，咱們給它們淺綠色背景。

diagram.add（
 $（go.Part，「Vertical」，
 $（go.TextBlock，{ text：「a Text Block」，background：「lightgreen」，margin：2 }），
 $（go.TextBlock，{ text：「a Text Block」，background：「lightgreen」，margin：2，
 width：100，height：33 }），
 $（go.TextBlock，{ text：「a Text Block」，background：「lightgreen」，margin：2，
 width：60，height：33 }），
 $（go.TextBlock，{ text：「a Text Block」，background：「lightgreen」，margin：2，
 width：50，height：22 }），
 $（go.TextBlock，{ text：「a Text Block」，background：「lightgreen」，margin：2，
 width：40，height：9 }）
 ））;

最大線和溢出

您可使用GraphObject.desiredSize（寬度和高度）約束TextBlock的可用大小，但您也可使用TextBlock.maxLines限制垂直高度，這將限制容許的數量。當沒有足夠的空間顯示全部文本時，您能夠決定如何使用TextBlock.overflow的不一樣值的剩餘空間。下面的包裝部分還有其餘選項。

下面的示例以天然大小的TextBlock開頭，後面是使用默認TextBlock.overflow值的最多2行OverflowClip，而後是使用TextBlock.overflow值的一行OverflowEllipsis。

diagram.contentAlignment = go.Spot.Center,
 diagram.add(
 $(go.Part, "Vertical",
 // Allow any number of lines, no clipping needed:
 $(go.TextBlock, { text: "a Text Block that takes 4 lines",
 font: '14pt sans-serif',
 background: "lightblue",
 overflow: go.TextBlock.OverflowClip /* the default value */,
 // No max lines
 margin: 2,
 width: 90 }),
 // Allow only 2 lines, OverflowClip:
 $(go.TextBlock, { text: "a Text Block that takes 4 lines",
 font: '14pt sans-serif',
 background: "lightblue",
 overflow: go.TextBlock.OverflowClip /* the default value */,
 maxLines: 2,
 margin: 2,
 width: 90 }),
 // Allow only 2 lines, OverflowEllipsis:
 $(go.TextBlock, { text: "a Text Block that takes 4 lines",
 font: '14pt sans-serif',
 background: "lightblue",
 overflow: go.TextBlock.OverflowEllipsis,
 maxLines: 2,
 margin: 2,
 width: 90 })
 ));

包裝

文本也能夠自動包裝到其餘行上。爲了使包裝發生，TextBlock.wrap屬性不能是None，而且寬度必須有一些約束比它天然要窄。

在如下示例中，第一個TextBlock獲取其天然大小，第二個TextBlock限制爲50寬但不容許換行，其餘示例限制爲相同寬度但容許換行。

diagram.add(
 $(go.Part, "Vertical",
 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2 }),
 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
 width: 50, wrap: go.TextBlock.None }),
 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
 width: 50, wrap: go.TextBlock.WrapDesiredSize }),
 $(go.TextBlock, { text: "a Text Block", background: "lightgreen", margin: 2,
 width: 50, wrap: go.TextBlock.WrapFit })
 ));

文字對齊

所述TextBlock.textAlign屬性指定要繪製的水平的大小內的字符的TextBlock。該值必須是CSS字符串。

這與GraphObject.alignment屬性不一樣，後者控制將對象放置在Panel分配的區域內的位置。

diagram.add(
 $(go.Part, "Horizontal",
 $(go.Panel, "Vertical",
 { width: 150, defaultStretch: go.GraphObject.Horizontal },
 $(go.TextBlock, { text: "textAlign: 'left'", background: "lightgreen", margin: 2,
 textAlign: "left" }),
 $(go.TextBlock, { text: "textAlign: 'center'", background: "lightgreen", margin: 2,
 textAlign: "center" }),
 $(go.TextBlock, { text: "textAlign: 'right'", background: "lightgreen", margin: 2,
 textAlign: "right" })
 ),
 $(go.Panel, "Vertical",
 { width: 150, defaultStretch: go.GraphObject.None },
 $(go.TextBlock, { text: "alignment: Left", background: "lightgreen", margin: 2,
 alignment: go.Spot.Left }),
 $(go.TextBlock, { text: "alignment: Center", background: "lightgreen", margin: 2,
 alignment: go.Spot.Center }),
 $(go.TextBlock, { text: "alignment: Right", background: "lightgreen", margin: 2,
 alignment: go.Spot.Right })
 )
 ));

所述TextBlock.verticalAlignment屬性控制的範圍內的字形的垂直對準。TextBlock.textAlign和TextBlock.verticalAlignment都不會影響TextBlock的大小。

diagram.add(
 $(go.Part, "Horizontal",
 $(go.TextBlock, { text: "verticalAlignment: Top", verticalAlignment: go.Spot.Top,
 width: 170, height: 60, background: "lightgreen", margin: 10 }),
 $(go.TextBlock, { text: "verticalAlignment: Center", verticalAlignment: go.Spot.Center,
 width: 170, height: 60, background: "lightgreen", margin: 10 }),
 $(go.TextBlock, { text: "verticalAlignment: Bottom", verticalAlignment: go.Spot.Bottom,
 width: 170, height: 60, background: "lightgreen", margin: 10 })
 ));

TextAlign和Multiline或Wrapping

即便TextBlock具備其天然大小 ，TextBlock.textAlign屬性也頗有用。當文本佔用多行時，不管是經過嵌入的換行符致使換行仍是換行，都會發生這種狀況。您能夠經過設置TextBlock.isMultiline來控制是否忽略以第一個換行符開頭的文本。默認狀況下，啓用多行和包裝。

diagram.add(
 $(go.Part, "Vertical",
 $(go.TextBlock, { text: "a Text Block\nwith three logical lines\nof text",
 background: "lightgreen", margin: 2,
 isMultiline: false }),
 $(go.TextBlock, { text: "a Text Block\nwith three logical lines\nof text",
 background: "lightgreen", margin: 2,
 isMultiline: true }),
 $(go.TextBlock, { text: "a Text Block\nwith three logical lines\nof centered text",
 background: "lightgreen", margin: 2,
 isMultiline: true, textAlign: "center" }),
 $(go.TextBlock, { text: "a single line of centered text that should" +
 " wrap because we will limit the width",
 background: "lightgreen", margin: 2, width: 80,
 wrap: go.TextBlock.WrapFit, textAlign: "center" })
 ));

翻轉

您可使用TextBlock.flip屬性水平和垂直翻轉文本：

diagram.add(
 $(go.Part, "Table",
 { defaultColumnSeparatorStrokeWidth: 3, defaultColumnSeparatorStroke: "gray", defaultSeparatorPadding: 5 },
 $(go.TextBlock, { text: "Hello", column: 0, margin: 2, font: '26px serif',
 flip: go.GraphObject.None
 }),
 $(go.TextBlock, "None (default)", { row: 1, column: 0 }),
 $(go.TextBlock, { text: "Hello", column: 1, margin: 2, font: '26px serif',
 flip: go.GraphObject.FlipHorizontal
 }),
 $(go.TextBlock, "FlipHorizontal", { row: 1, column: 1 }),
 $(go.TextBlock, { text: "Hello", column: 2, margin: 2, font: '26px serif',
 flip: go.GraphObject.FlipVertical
 }),
 $(go.TextBlock, "FlipVertical", { row: 1, column: 2 }),
 $(go.TextBlock, { text: "Hello", column: 3, margin: 2, font: '26px serif',
 flip: go.GraphObject.FlipBoth
 }),
 $(go.TextBlock, "FlipBoth", { row: 1, column: 3 })
 ));

編輯

GoJS還支持用戶就地編輯文本。您只需將TextBlock.editable屬性設置爲true便可。

若是要提供用戶輸入的文本驗證，能夠將TextBlock.textValidation屬性設置爲函數。您還能夠經過設置TextBlock.textEditor屬性來提供更加自定義或複雜的文本編輯器。驗證介紹頁面上有一個文本驗證示例。

diagram.add(
 $(go.Part,
 $(go.TextBlock,
 { text: "select and then click to edit",
 background: "lightblue",
 editable: true, isMultiline: false })
 ));
 diagram.add(
 $(go.Part,
 $(go.TextBlock,
 { text: "this one allows embedded newlines",
 background: "lightblue",
 editable: true })
 ));