二维码
搜索 ×

折线（Polyline）

  折线由若干点连接而成，其中每两个点之间称之为线段（lineSegment）。在GIS中折线对应类型为 LineString，在SVG中对应类型为 polyline 或 line。 AnyGraph 中折线的属性如下表所示：

名称 类型 说明
uid String 唯一ID
type String 类型
rotation float 旋转角度
coords Array 坐标数组
style Object 样式
properties Object 属性

初始化

1
constructor(options)

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

空间信息

  折线类的空间属性 通过坐标 coords 属性确定，其格式为坐标点数组类型，而各个点也是一个浮点类型数组，其格式如下：

1
[[50,50], [150,80], [250,50], [350,80], [450,50]]

示例

  下面这个示例在图形增加了几个折线对象，通过图层数据源的 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, Polyline } from "../../src/index.js";
    
    // graph对象
    let graph = new Graph({
        "target": "graphWrapper"
    });

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

    // 在画布中绘制图像
    layer.getSource().add(new Polyline({ "coords" : [[50, 50], [150, 80], [250, 50], [350, 80], [450, 50], [550, 80], [650, 50], [750, 80]], "style":{"lineWidth": 2, "color":"red"}}));
    layer.getSource().add(new Polyline({ "coords" : [[50, 110], [150, 140], [250, 110], [350, 140], [450, 110], [550, 140], [650, 110], [750, 140]], "style":{"lineWidth": 8, "color":"gold"}}));
    layer.getSource().add(new Polyline({ "coords" : [[50, 170], [150, 200], [250, 170], [350, 200], [450, 170], [550, 200], [650, 170], [750, 200]], "style":{"lineWidth": 4, "color":"green", "dash": [8, 8, 8, 8] }}));
    layer.getSource().add(new Polyline({ "coords" : [[50, 230], [150, 270], [250, 230], [350, 270], [450, 230], [550, 270], [650, 230], [750, 270]], "style":{"lineWidth": 4, "color": "blue", "dash": [20, 8, 8, 8]}}));

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

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

数据格式

   AnyGraph 中折线类的数据格式如下：

1
2
3
4
5
6
[
    {"type":"Polyline","coords":[[50,50],[150,80],[250,50],[350,80],[450,50],[550,80],[650,50],[750,80]],"style":{"lineWidth":2,"color":"red"}},
    {"type":"Polyline","coords":[[50,110],[150,140],[250,110],[350,140],[450,110],[550,140],[650,110],[750,140]],"style":{"lineWidth":8,"color":"gold"}},
    {"type":"Polyline","coords":[[50,170],[150,200],[250,170],[350,200],[450,170],[550,200],[650,170],[750,200]],"style":{"lineWidth":4,"color":"green","lineType":"dash","dash":[8,8,8,8]}},
    {"type":"Polyline","coords":[[50,230],[150,270],[250,230],[350,270],[450,230],[550,270],[650,230],[750,270]],"style":{"lineWidth":4,"color":"blue","lineType":"dash","dash":[20,8,8,8]}}
]

样式

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

名称 类型 说明
color StringColor 颜色
lineWidth float 线宽
dash Array 虚线样式
dashOffset int 虚线偏移量
lineCap String 描边属性，边框终点的形状
lineJoin String 连接属性，控制两条描边线段之间连接属性
miterLimit int 斜接长度

linecap 属性的值有三种可能值：

  • butt用直边结束线段，它是常规做法，线段边界 90 度垂直于描边的方向、贯穿它的终点。(default)
  • square的效果差不多，但是会稍微超出实际路径的范围，超出的大小由stroke-width控制
  • round表示边框的终点是圆角，圆角的半径也是由stroke-width控制的。

lineJoin 连接属性，控制两条描边线段之间,它有三个可用的值:

  • miter: 默认值，表示用方形画笔在连接处形成尖角(default)
  • round: 表示用圆角连接，实现平滑效果
  • bevel: 连接处会形成一个斜接