二维码
搜索 ×

多边形(Polygon)

  多边形是一种基本的几何图形，由三个或三个以上的顶点坐标连线所围成的封闭图形。 AnyGraph 中矩形的属性如下表所示：

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

初始化

1
constructor(options)

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

空间信息

  多边形的空间属性是通过多个 LineRing 组成， 第一个环是多边形的外边界，所有后续环都是内孔。LineRing（线环）是一种闭合的 LineString（折线）。其格式如下：

1
2
3
4
[
    [[620,250],[510,441],[290,441],[180,250],[290,59],[510,59],[620,250]],
    [[550,250],[475,120],[325,120],[250,250],[325,380],[475,380],[550,250]]
]

示例1

  下面这个示例在图形增加了7个多边形对象(七巧板)，通过图层数据源的 loadData()方法增加至图层中，源代码如下：

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

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

    // 数据
    let data = [
        { "type": "Polygon", "coords": [[[380, 220], [267, 333], [267, 220]]], "style": { "fillStyle": 1, "fillColor": "#caff67" }, "uid": "G000003T" },
        { "type": "Polygon", "coords": [[[345, 257], [425, 177], [505, 257]]], "style": { "fillStyle": 1, "fillColor": "#67becf" }, "uid": "G000003U" },
        { "type": "Polygon", "coords": [[[509, 177], [453, 121], [453, 64], [509, 121]]], "style": { "fillStyle": 1, "fillColor": "#ef3d61" }, "uid": "G000003V" },
        { "type": "Polygon", "coords": [[[265, 171], [265, 251], [225, 211]]], "style": { "fillStyle": 1, "fillColor": "#f9f51a" }, "uid": "G0000040" },
        { "type": "Polygon", "coords": [[[466, 136], [506, 176], [466, 216], [426, 176]]], "style": { "fillStyle": 1, "fillColor": "#a54c09" }, "uid": "G0000041" },
        { "type": "Polygon", "coords": [[[551, 162], [511, 202], [511, 122]]], "style": { "fillStyle": 1, "fillColor": "#fa8ccc" }, "uid": "G0000042" },
        { "type": "Polygon", "coords": [[[425, 259], [505, 259], [505, 339]]], "style": { "fillStyle": 1, "fillColor": "#f6ca29" }, "uid": "G0000043" }
    ]

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

    // 图形渲染
    graph.render();
</script>

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

示例2

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

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

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

    // 增加数据层
    let layer = graph.addLayer({"name":"数据层"});
        
    // 多边形坐标
    let coord1 = circle2LineRing([300, 200], 180, 6);
    let coord2 = Coordinate.reverse(circle2LineRing([300, 200], 120, 6));

    // 增加多边形
    layer.getSource().add(new Polygon({ "coords": [coord1, coord2], "style":{"fillStyle":1, "fillColor": "blue", "color":"none"} }));

    // 图形渲染
    graph.render();
</script>

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

注意：要绘制这种带孔的多边形，需注意坐标的顺序，该图中的外框多边形坐标是顺时针的，内孔多边形坐标是逆时针的。

数据格式

   AnyGraph 中多边形类的数据格式如下：

1
2
3
4
5
6
7
8
9
[
    {
        "type":"Polygon",
        "coords":[
            [[480,200],[390,356],[210,356],[120,200],[210,44],[390,44],[480,200]],
            [[420,200],[360,96],[240,96],[180,200],[240,304],[360,304],[420,200]]],
        "style":{"fillStyle":1,"fillColor":"blue","color":"none"}
    }
]

样式

  多边形样式属性与矩形样式属性相同。