教你玩转流程图控件GoJS（一）：使用TextBlock类显示文本

GoJS是一款功能强大，快速且轻量级的流程图控件，可帮助你在JavaScript 和HTML5 Canvas程序中建立流程图。

GoJS最新版本2.1现已发布，包含许多新功能，可为图表的不一样组件制做动画并改进了对数据同步的支持，还有其余功能改进！

设置TextBlock.text属性是显示文本字符串的惟一方法。因为TextBlock继承自GraphObject，所以某些GraphObject属性会影响文本。可是，还有关于如何格式化和绘制文本的其余纯文本选项。

在这些简单的演示中，代码以编程方式建立一个Part并将其添加到Diagram中。了解模型和数据绑定后，一般不会以编程方式建立部件（节点或连接）。

字体和颜色

TextBlock.font 指定文本的大小和样式外观。该值能够是任何CSS字体说明符字符串。

使用TextBlock.stroke画笔绘制文本。值能够是任何CSS颜色字符串或画笔。默认状况下，笔划为“黑色”。

您还能够指定要用做背景的画笔：GraphObject.background。这默认为无刷，这致使透明背景。背景老是矩形的。

在这些简单的演示中，代码以编程方式建立一个Part并将其添加到Diagram中。了解模型和数据绑定后，一般不会以编程方式建立部件（节点或连接）。

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：“lightblue” }），
 $（go.TextBlock，{ text：“a Text Block”，font：“bold 14pt serif” }）
 ））;

extBlocks的天然大小因浏览器而异

因为不一样的浏览器以不一样方式测量画布文本，所以TextBlocks是GoJS中惟一可能在浏览器或不一样设备之间具备不一致的天然大小的对象。所以，若是您须要在全部浏览器中精确且一致地测量对象，则不该使用没有显式大小的TextBlocks（GraphObject.desiredSize）来指示任何对象的大小（即，不该具备明确大小的TextBlock不该该是Panel.Auto类型Panel的主要元素。

尺寸和裁剪

TextBlock 的天然大小足以渲染具备给定字体的文本字符串。可是，TextBlock的实际大小在任一维度上均可以更大或更小。尺寸越大，没有文字的区域; 较小的尺寸会致使削波。

为了证实这一点，下面的示例以天然大小的TextBlock开头，后跟显式大小减少的TextBlock。为了更好地显示下面TextBlocks的实际大小，咱们给它们浅绿色背景。

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：100，height：33 }），
 $（go.TextBlock，{ text：“a Text Block”，background：“lightgreen”，margin：2，
 width：60，height：33 }），
 $（go.TextBlock，{ text：“a Text Block”，background：“lightgreen”，margin：2，
 width：50，height：22 }），
 $（go.TextBlock，{ text：“a Text Block”，background：“lightgreen”，margin：2，
 width：40，height：9 }）
 ））;

最大线和溢出

您可使用GraphObject.desiredSize（宽度和高度）约束TextBlock的可用大小，但您也可使用TextBlock.maxLines限制垂直高度，这将限制容许的数量。当没有足够的空间显示全部文本时，您能够决定如何使用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 })
 ));

包装

文本也能够自动包装到其余行上。为了使包装发生，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属性指定要绘制的水平的大小内的字符的TextBlock。该值必须是CSS字符串。

这与GraphObject.alignment属性不一样，后者控制将对象放置在Panel分配的区域内的位置。

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属性控制的范围内的字形的垂直对准。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属性也颇有用。当文本占用多行时，不管是经过嵌入的换行符致使换行仍是换行，都会发生这种状况。您能够经过设置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" })
 ));

翻转

您可使用TextBlock.flip属性水平和垂直翻转文本：

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属性设置为true便可。

若是要提供用户输入的文本验证，能够将TextBlock.textValidation属性设置为函数。您还能够经过设置TextBlock.textEditor属性来提供更加自定义或复杂的文本编辑器。验证介绍页面上有一个文本验证示例。

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