点击下载GoJS最新试用版
设置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 })
));
想要购买GoJS正版授权的朋友可以。
更多精彩内容，欢迎关注下方的微信公众号，及时获取产品最新资讯▼▼▼
标签：
本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
文章转载自：
彩票走势图 
10次
相关产品
最新文章 
彩票走势图相关的文章 
微信
在线咨询
渝公网安备
50010702500608号
客服热线