流程圖控件GoJS教程：使用TextBlock類顯示文本
設(shè)置TextBlock.text屬性是顯示文本字符串的唯一方法。由于TextBlock繼承自GraphObject，因此某些GraphObject屬性會影響文本。但是，還有關(guān)于如何格式化和繪制文本的其他純文本選項。
在這些簡單的演示中，代碼以編程方式創(chuàng)建一個Part并將其添加到Diagram中。了解模型和數(shù)據(jù)綁定后，通常不會以編程方式創(chuàng)建部件（節(jié)點或鏈接）。
字體和顏色
TextBlock.font 指定文本的大小和樣式外觀。該值可以是任何CSS字體說明符字符串。
使用TextBlock.stroke畫筆繪制文本。值可以是任何CSS顏色字符串或畫筆。默認情況下，筆劃為“黑色”。
您還可以指定要用作背景的畫筆：GraphObject.background。這默認為無刷，這導(dǎo)致透明背景。背景總是矩形的。
在這些簡單的演示中，代碼以編程方式創(chuàng)建一個Part并將其添加到Diagram中。了解模型和數(shù)據(jù)綁定后，通常不會以編程方式創(chuàng)建部件（節(jié)點或鏈接）。
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：“l(fā)ightblue” }），
$（go.TextBlock，{ text：“a Text Block”，font：“bold 14pt serif” }）
））;
extBlocks的自然大小因瀏覽器而異
由于不同的瀏覽器以不同方式測量畫布文本，因此TextBlocks是GoJS中唯一可能在瀏覽器或不同設(shè)備之間具有不一致的自然大小的對象。因此，如果您需要在所有瀏覽器中精確且一致地測量對象，則不應(yīng)使用沒有顯式大小的TextBlocks（GraphObject.desiredSize）來指示任何對象的大小（即，不應(yīng)具有明確大小的TextBlock不應(yīng)該是Panel.Auto類型Panel的主要元素。
尺寸和裁剪
TextBlock 的自然大小足以渲染具有給定字體的文本字符串。但是，TextBlock的實際大小在任一維度上都可以更大或更小。尺寸越大，沒有文字的區(qū)域; 較小的尺寸會導(dǎo)致削波。
為了證明這一點，下面的示例以自然大小的TextBlock開頭，后跟顯式大小減小的TextBlock。為了更好地顯示下面TextBlocks的實際大小，我們給它們淺綠色背景。
diagram.add（
$（go.Part，“Vertical”，
$（go.TextBlock，{ text：“a Text Block”，background：“l(fā)ightgreen”，margin：2 }），
$（go.TextBlock，{ text：“a Text Block”，background：“l(fā)ightgreen”，margin：2，
width：100，height：33 }），
$（go.TextBlock，{ text：“a Text Block”，background：“l(fā)ightgreen”，margin：2，
width：60，height：33 }），
$（go.TextBlock，{ text：“a Text Block”，background：“l(fā)ightgreen”，margin：2，
width：50，height：22 }），
$（go.TextBlock，{ text：“a Text Block”，background：“l(fā)ightgreen”，margin：2，
width：40，height：9 }）
））;
最大線和溢出
您可以使用GraphObject.desiredSize（寬度和高度）約束TextBlock的可用大小，但您也可以使用TextBlock.maxLines限制垂直高度，這將限制允許的數(shù)量。當沒有足夠的空間顯示所有文本時，您可以決定如何使用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 })
));
包裝
文本也可以自動包裝到其他行上。為了使包裝發(fā)生，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屬性指定要繪制的水平的大小內(nèi)的字符的TextBlock。該值必須是CSS字符串。
這與GraphObject.alignment屬性不同，后者控制將對象放置在Panel分配的區(qū)域內(nèi)的位置。
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屬性控制的范圍內(nèi)的字形的垂直對準。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屬性也很有用。當文本占用多行時，無論是通過嵌入的換行符導(dǎo)致?lián)Q行還是換行，都會發(fā)生這種情況。您可以通過設(shè)置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" })
));
翻轉(zhuǎn)
您可以使用TextBlock.flip屬性水平和垂直翻轉(zhuǎn)文本：
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屬性設(shè)置為true即可。
如果要提供用戶輸入的文本驗證，可以將TextBlock.textValidation屬性設(shè)置為函數(shù)。您還可以通過設(shè)置TextBlock.textEditor屬性來提供更加自定義或復(fù)雜的文本編輯器。驗證介紹頁面上有一個文本驗證示例
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正版授權(quán)的朋友可以。
更多精彩內(nèi)容，歡迎關(guān)注下方的微信公眾號，及時獲取產(chǎn)品最新資訊▼▼▼
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線