GoJS 繪圖 (二) ：TextBlocks

使用TextBlocks類來顯示文本.

字體和顏色

大小和文本的外觀風格被指定TextBlock.font。值能夠是任何CSS字體符串。
文本顏色使用TextBlock.stroke。值能夠是任何的CSS顏色字符串。默認狀況下，顏色爲「黑」。
您也能夠指定背景：GraphObject.background。默認爲無顏色，這會致使一個透明背景。背景老是矩形。
這些簡單的演示，建立了文本塊，並將其添加到圖中

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只是呈現文本字符串指定的字體。然而TextBlock的實際尺寸能夠是任一尺寸，尺寸過大增長無文本區域; 尺寸太小產生文本的剪裁。
爲了證實這一點，下面例子中的TextBlock，都具備明確的寬高。爲了更好地展示下面的TextBlocks的實際大小，咱們已經給了他們淺綠背景。

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

換行

文本也能夠經過自動換到其餘行。爲了換行的狀況發生，TextBlock.wrap屬性不能爲無，必須有一些限制寬窄

diagram.add(G(
    go.Part,
    'Horizontal',
    G(
        go.TextBlock,
        {
            text: '文本塊默認',
            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屬性指定的尺寸內繪製文字點排列方式。
這比不一樣GraphObject.alignment屬性，它控制在哪裏放置由父級分配區域。

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

編輯

GoJS也支持由用戶就地編輯文字。你只須要在設置TextBlock.editable屬性設置爲true。
若是你但願提供用戶的輸入文本驗證，能夠設置TextBlock.textValidation屬性的功能。您也能夠提供經過設置更加個性化的或複雜的文本編輯器TextBlock.textEditor屬性。注：驗證稍後完善。

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