go.js節點字型設定

這是一個建立於 的文章，其中的資訊可能已經有所發展或是發生改變。

TextBlock是用於顯示文本資訊的對象。

通過設定TexkBlock.text屬性來顯示文本資訊，這也是唯一的一個方法。因為TexkBlock繼承自GraphObject，所以一些GraphObject的屬性也有可能對文本有影響。

字型和顏色

可以通過TexkBlock.font屬性設定文本的字型，該屬性的值可以使用CSS來設定。

可以通過TextBlock.stroke屬性設定文本字型的顏色，同樣可以使用CSS來設定。

因為TexkBlock繼承自GraphObject，所以GraphObject.background屬性也可以作用於TextBlock，可以通過該屬性設定文本背景色。

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

結果：

尺寸和裁剪

TexkBlock的自然尺寸是會自適應設定文本的字型以及文本長度的。但是實際上它的尺寸是可大可小的。

下面的例子中首先展示了自然尺寸的TextBlock，然後對其進行明確的尺寸設定，並給與綠色背景：

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

結果：

文本自適應

TextBlock也可以使文本資訊在規定的尺寸內自動換行，以達到自適應尺寸。可以通過TextBlock.wrap屬性來設定，該屬性不可為空，必須對其進行屬性設定。

下面的例子中，第一個使用自然尺寸，第二個規定了寬度，第三第四個在規定相同寬度的基礎上設定了TextBlock.wrap屬性：

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.textAlign與GraphObject.alignment是不同的，前者是針對文本的對齊，後者是針對所在容器的對齊：

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.textAlign不管在自然尺寸中處理多行還是在規定尺寸中處理多行都很好用。

TextBlock.isMultiline屬性用於設定是否開啟內嵌文本中的分行符號作用。

TextBlock.wrap屬性在處理換行時就更加遊刃有餘，它會根據TexkBlock的尺寸自動對文本進行換行。

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

結果：

 

編輯文本

GOJS也提供了對TextBlock文本的編輯功能，只需要設定TextBlock.editable為true即可。
如果你想對TextBlock中的文本進行某種規則的驗證，那麼可以設定TextBlock.textValidation屬性，該屬性的值為function，你可以自行編寫驗證規則。你甚至可以更換文字編輯器，設定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 })));

結果：