二维码
搜索 ×

点（Point）

  点是一种最简单的几何形状，其信息包括：x坐标、y坐标、大小size和旋转角度rotation等。 AnyGraph 中点的属性如下表所示：

名称 类型 说明
uid String 唯一ID
type String 类型
x float X坐标值
y float Y坐标值
size float 大小
rotation float 旋转角度
pointType int 点类型
centerAsOrigin Boolean 坐标点是否位于图标的中心，默认:true
style Object 样式
properties Object 属性

初始化

1
constructor(options)

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

空间信息

  点是0维的几何体，其空间属性通过坐标 x 和 y 确定位置，通过 size 确定大小，这几个属性均为浮点类型，其格式如下：

1
{ "x":50, "y":20, "size":5 }

示例

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

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

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

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

    // 在画布中绘制图像
    layer.getSource().add(new Point({ "x": x, "y": y, "size": 20, "style": { "fillColor": "red"} }));

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

图形

  ，在渲染点时 AnyGraph 提供了内置类型和图标两种渲染方式。

内置类型

  根据点类型（pointType）的值渲染为不同的形状。 AnyGraph 提供了20种不同形状，如下所示：

  在构造Point对象时指定pointType属性，其取值范围为 0~19，即可将点渲染为内置形状。其数据格式定义如下：

1
2
3
4
5
6
[
    {"type":"Point","x":50,"y":60,"pointType":2,"size":20,"style":{"fillColor":"red","color":"none"}},
    {"type":"Point","x":164,"y":60,"pointType":3,"size":20,"style":{"fillColor":"red","color":"none"}},
    {"type":"Point","x":278,"y":60,"pointType":4,"size":20,"style":{"fillColor":"red","color":"none"}},
    {"type":"Point","x":392,"y":60,"pointType":5,"size":20,"style":{"fillColor":"red","color":"none"}}
]

图标

  ，在渲染点时 AnyGraph 提供了内置类型和图标两种渲染方式。

  在构造Point对象时指定src属性，将其指向一个图标文件路径，即可将点渲染为图标。其数据格式定义如下：

1
2
3
4
5
6
[
    {"type":"Point","x":50,"y":60,"size":32,"src":"./images/marker/marker_1.png","centerAsOrigin":true},
    {"type":"Point","x":164,"y":60,"size":32,"src":"./images/marker/marker_2.png","centerAsOrigin":true},
    {"type":"Point","x":278,"y":60,"size":32,"src":"./images/marker/marker_3.png","centerAsOrigin":true},
    {"type":"Point","x":392,"y":60,"size":32,"src":"./images/marker/marker_4.png","centerAsOrigin":true}
]

  默认情况下点坐标(x,y)位于图标的中心，可通过centerAsOrigin=false将点坐标指向图标的底部中央位置。

  如果没有指定src属性，也没有指定pointType属性，则按照 pointType 等于0，输出一个 “填充圆” 。

样式

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

名称 类型 说明
color StringColor 描边颜色
fillColor StringColor 填充颜色
lineWidth float 线宽