流程圖控件GoJS教程：使用TextBlock類顯示文本

點(diǎn)擊下載GoJS最新試用版

設(shè)置TextBlock.text屬性是顯示文本字符串的唯一方法。由于TextBlock繼承自GraphObject，因此某些GraphObject屬性會影響文本。但是，還有關(guān)于如何格式化和繪制文本的其他純文本選項(xiàng)。

在這些簡單的演示中，代碼以編程方式創(chuàng)建一個Part并將其添加到Diagram中。了解模型和數(shù)據(jù)綁定后，通常不會以編程方式創(chuàng)建部件（節(jié)點(diǎn)或鏈接）。

字體和顏色

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

使用TextBlock.stroke畫筆繪制文本。值可以是任何CSS顏色字符串或畫筆。默認(rèn)情況下，筆劃為“黑色”。

您還可以指定要用作背景的畫筆：GraphObject.background。這默認(rèn)為無刷，這導(dǎo)致透明背景。背景總是矩形的。

在這些簡單的演示中，代碼以編程方式創(chuàng)建一個Part并將其添加到Diagram中。了解模型和數(shù)據(jù)綁定后，通常不會以編程方式創(chuàng)建部件（節(jié)點(diǎn)或鏈接）。

 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的自然大小因?yàn)g覽器而異

由于不同的瀏覽器以不同方式測量畫布文本，因此TextBlocks是GoJS中唯一可能在瀏覽器或不同設(shè)備之間具有不一致的自然大小的對象。因此，如果您需要在所有瀏覽器中精確且一致地測量對象，則不應(yīng)使用沒有顯式大小的TextBlocks（GraphObject.desiredSize）來指示任何對象的大小（即，不應(yīng)具有明確大小的TextBlock不應(yīng)該是Panel.Auto類型Panel的主要元素。

尺寸和裁剪

TextBlock 的自然大小足以渲染具有給定字體的文本字符串。但是，TextBlock的實(shí)際大小在任一維度上都可以更大或更小。尺寸越大，沒有文字的區(qū)域; 較小的尺寸會導(dǎo)致削波。

為了證明這一點(diǎn)，下面的示例以自然大小的TextBlock開頭，后跟顯式大小減小的TextBlock。為了更好地顯示下面TextBlocks的實(shí)際大小，我們給它們淺綠色背景。

 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ù)量。當(dāng)沒有足夠的空間顯示所有文本時，您可以決定如何使用TextBlock.overflow的不同值的剩余空間。下面的包裝部分還有其他選項(xiàng)。

下面的示例以自然大小的TextBlock開頭，后面是使用默認(rèn)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)的字形的垂直對準(zhǔn)。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āng)文本占用多行時，無論是通過嵌入的換行符導(dǎo)致?lián)Q行還是換行，都會發(fā)生這種情況。您可以通過設(shè)置TextBlock.isMultiline來控制是否忽略以第一個換行符開頭的文本。默認(rèn)情況下，啟用多行和包裝。

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即可。

如果要提供用戶輸入的文本驗(yàn)證，可以將TextBlock.textValidation屬性設(shè)置為函數(shù)。您還可以通過設(shè)置TextBlock.textEditor屬性來提供更加自定義或復(fù)雜的文本編輯器。驗(yàn)證介紹頁面上有一個文本驗(yàn)證示例。

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)品最新資訊▼▼▼