使用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
}
)
));
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。