标签：

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字符串。