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