二维码
搜索 ×

文本(Text)

  在图形系统中，文本对象通常指的是在图形界面中呈现的文字元素。用于标注、说明、展示信息等目的。因此图形基本形状中还应包括文本类型，从而方便的在图形中绘制文字。 AnyGraph 中文本的属性如下表所示：

名称 类型 说明
uid String 唯一ID
type String 类型
rotation float 旋转角度
x float X坐标值
y float Y坐标值
vectorSize Boolean 是否为矢量字体
width float 文字宽度
height float 文字高度
maxWidth float 文字可显示的最大宽度
vertical Boolean 是否垂直排列
style Object 样式
properties Object 属性

说明：

  1. 文字大小优先由 style.fontSize 指定；
  2. vectorSize的缺省属性是true，即文字大小跟随着图形的缩放而缩放；
  3. 如果没有指定fontSize，也可由 width 和 height 属性确定文字大小；

初始化

1
constructor(options)

  该类的构造函数接受一个 Object 类型的参数，其值包含了上述所有属性 (type除外) 。

空间信息

  文本的空间属性通过坐标 x 和 y 确定位置，通过样式中的 fontSize 确定大小，这几个属性均为浮点类型。此外样式中的水平对齐 textAlign和垂直对齐 textBaseline 也会影响文本的位置，其格式如下：

1
{ "x":50, "y":20, "style": {"fontSize": 100 }}

示例

  下面这个示例在图形增加了几个文本对象，通过图层数据源的 add()方法增加至图层中，源代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="module">
    import { Graph, Text } from "../../src/index.js";

    // graph对象
    let graph = new Graph({
        "target": "graphWrapper"
    });

    // 新建绘图图层
    let layer = graph.addLayer();

    // 绘制填充的文字
    layer.getSource().add(new Text({ "x": 65, "y": 60, "text": "40px中文", style: { "fillColor": "red", "fontSize": 40, "fontName": "黑体" } }));
    layer.getSource().add(new Text({ "x": 260, "y": 60, "text": "30px中文", style: { "fillColor": "red", "fontSize": 30, "fontName": "黑体" } }));
    layer.getSource().add(new Text({ "x": 420, "y": 60, "text": "20px中文", style: { "fillColor": "red", "fontSize": 20, "fontName": "黑体" } }));
    layer.getSource().add(new Text({ "x": 540, "y": 60, "text": "14px绘制基本图形", style: { "fillColor": "red", "fontSize": 14, "fontName": "黑体" } }));

    // render
    graph.render();
</script>

  这段代码运行的结果如下图所示：

数据格式

   AnyGraph 中文本类的数据格式如下：

1
2
3
4
5
6
[
    {"type":"Text","x":65,"y":60,"text":"40px中文","vectorSize":true, "style":{"fillColor":"red","fontSize":40,"fontName":"黑体"}},
    {"type":"Text","x":260,"y":60,"text":"30px中文","vectorSize":true, "style":{"fillColor":"red","fontSize":30,"fontName":"黑体"}},
    {"type":"Text","x":420,"y":60,"text":"20px中文","vectorSize":true, "style":{"fillColor":"red","fontSize":20,"fontName":"黑体"}},
    {"type":"Text","x":540,"y":60,"text":"14px绘制基本图形","vectorSize":true, "style":{"fillColor":"red","fontSize":14,"fontName":"黑体"}},
]

样式

  通过从 Geometry 类继承的 style 属性指定渲染样式，可通过 getStyle() 获取样式，或通过 setStyle() 设置样式，文本样式包括了以下属性：

名称 类型 说明
color StringColor 颜色
lineWidth float 线宽
fontName String 字体名称
fontSize int 字体大小
fontItalic Boolean 是否斜体
fontBold Boolean 是否粗体
fontWeight String 粗细程度
textAlign String 水平对齐方式
textBaseline String 垂直对齐方式
minFontSize int 最小显示的字号大小
fillPrior Boolean 是否强制填充文本
letterSpacing int 字间距
wordSpacing int 字母间距
fontBorder Boolean 是否带有边框
borderColor StringColor 边框颜色
borderOpacity float 边框透明度

注意：当图形缩放导致字体大小小于minFontSize时，不显示该文本。