流程圖控件GoJS教程：使用TextBlock類顯示文本
設置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 })
));想要購買GoJS正版授權的朋友可以。
更多精彩內容，歡迎關注下方的微信公眾號，及時獲取產品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網安備
50010702500608號
客服熱線