摘要：使用類來(lái)顯示文本字體和顏色大小和文本的外觀風(fēng)格被指定。為了換行的情況發(fā)生，屬性不能為無(wú)，必須有一些限制寬窄文本塊默認(rèn)文本塊不換行剪裁文本塊換行文本塊清理邊距對(duì)齊方式屬性指定的尺寸內(nèi)繪制文字點(diǎn)排列方式。注驗(yàn)證稍后完善。

使用TextBlocks類來(lái)顯示文本.

大小和文本的外觀風(fēng)格被指定TextBlock.font。值可以是任何CSS字體符串。
文本顏色使用TextBlock.stroke。值可以是任何的CSS顏色字符串。默認(rèn)情況下，顏色為“黑”。
您也可以指定背景：GraphObject.background。默認(rèn)為無(wú)顏色，這會(huì)導(dǎo)致一個(gè)透明背景。背景總是矩形。
這些簡(jiǎn)單的演示，創(chuàng)建了文本塊，并將其添加到圖中

    diagram.add(G(
    go.Part,
    "Horizontal",
    G(
        go.TextBlock,
        {
            text: "文本塊"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊顏色",
            stroke: "#492"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊背景",
            background: "#492"
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊字體",
            font: "bold 22px serif"
        }
    )
));

TextBlock只是呈現(xiàn)文本字符串指定的字體。然而TextBlock的實(shí)際尺寸可以是任一尺寸，尺寸過(guò)大增加無(wú)文本區(qū)域; 尺寸過(guò)小產(chǎn)生文本的剪裁。
為了證明這一點(diǎn)，下面例子中的TextBlock，都具有明確的寬高。為了更好地展現(xiàn)下面的TextBlocks的實(shí)際大小，我們已經(jīng)給了他們淺綠背景。

diagram.add(G(
    go.Part,
    "Horizontal",
    G(
        go.TextBlock,
        {
            text: "文本塊寬度和高度",
            background: "#492",
            margin: 5
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊寬度和高度",
            background: "#492",
            margin: 5,
            width: 100,
            height: 30
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊寬度和高度",
            background: "#492",
            margin: 5,
            width: 60,
            height: 30
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊寬度和高度",
            background: "#492",
            margin: 5,
            width: 60,
            height: 20
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊寬度和高度",
            background: "#492",
            margin: 5,
            width: 60,
            height: 10
        }
    )
));

文本也可以通過(guò)自動(dòng)換到其他行。為了換行的情況發(fā)生，TextBlock.wrap屬性不能為無(wú)，必須有一些限制寬窄

diagram.add(G(
    go.Part,
    "Horizontal",
    G(
        go.TextBlock,
        {
            text: "文本塊默認(rèn)",
            background: "#492",
            margin: 1,
            width:40
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊不換行剪裁",
            background: "#492",
            margin: 1,
            width:75,
            wrap: go.TextBlock.None
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊換行  Wrap",
            background: "#492",
            margin: 1,
            width:75,
            wrap: go.TextBlock.WrapDesiredSize
        }
    ),
    G(
        go.TextBlock,
        {
            text: "文本塊清理邊距  Wrap",
            background: "#492",
            margin: 1,
            width:120,
            wrap: go.TextBlock.WrapFit
        }
    )
));

TextBlock.textAlign屬性指定的尺寸內(nèi)繪制文字點(diǎn)排列方式。
這比不同GraphObject.alignment屬性，它控制在哪里放置由父級(jí)分配區(qū)域。

diagram.add(G(
    go.Part,
    "Horizontal",
    G(
        go.Panel,
        "Vertical",
        {
            width: 150,
            defaultStretch: go.GraphObject.Horizontal
        },
        G(
            go.TextBlock,
            {
                text: "左對(duì)齊",
                background: "#492",
                textAlign: "left",
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: "居中",
                background: "#492",
                textAlign: "center",
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: "右對(duì)齊",
                background: "#492",
                textAlign: "right",
                margin: 2
            }
        )
    ),
    G(
        go.Panel,
        "Vertical",
        {
            width: 150,
            defaultStretch: go.GraphObject.None
        },
        G(
            go.TextBlock,
            {
                text: "左對(duì)齊",
                background: "#492",
                alignment: go.Spot.Left,
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: "居中",
                background: "#492",
                alignment: go.Spot.Center,
                margin: 2
            }
        ),
        G(
            go.TextBlock,
            {
                text: "右對(duì)齊",
                background: "#492",
                alignment: go.Spot.Right,
                margin: 2
            }
        )
    )
));

GoJS也支持由用戶就地編輯文字。你只需要在設(shè)置TextBlock.editable屬性設(shè)置為true。
如果你希望提供用戶的輸入文本驗(yàn)證，可以設(shè)置TextBlock.textValidation屬性的功能。您也可以提供通過(guò)設(shè)置更加個(gè)性化的或復(fù)雜的文本編輯器TextBlock.textEditor屬性。注：驗(yàn)證稍后完善。

diagram.add(G(
    go.Part,
    "Vertical",
    G(
        go.TextBlock,
        {
            text: "選中后，單擊編輯，不可換行",
            background: "#492",
            margin: 5,
            editable: true,
            isMultiline: false
        }
    ),
    G(
        go.TextBlock,
        {
            text: "允許嵌入換行",
            background: "#492",
            margin: 5,
            editable: true
        }
    )
));