二维码
搜索 ×

圆(Circle)

  圆是一种基本的几何图形，它是由所有到固定点（即圆心）距离相等的点组成的集合。 AnyGraph 中矩形的属性如下表所示：

名称 类型 说明
uid String 唯一ID
type String 类型
x float X坐标值
y float Y坐标值
radius float 半径
startAngle float 圆弧的起始点，x 轴方向开始计算，单位以弧度表示
endAngle float 圆弧的终点，单位以弧度表示
anticlockwise Boolean 是否逆时针方向绘制圆（默认值为: false）
style Object 样式
properties Object 属性

初始化

1
constructor(options)

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

空间信息

  圆的空间属性是由圆心(x,y)和半径(radius)确定，此外圆弧的起始点 startAngle 属性和圆弧的终点 endAngle 属性也会影响圆的形状。其格式如下：

1
{ "x":300, "y":220, "radius": 200 }

示例

  下面这个示例在图形增加了两个圆对象，其中一个是描边圆（空心），另一个是填充的圆（实心），通过图层数据源的 add()方法增加至图层中，源代码如下：

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

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

    // 增加数据层
    let layer = graph.addLayer({"name":"数据层"});
        
    // 绘制圆
    layer.getSource().add(new Circle({ "x": 150, "y": 150, "radius": 100, "style": { "lineWidth": 8, "color": "green" } }));
    layer.getSource().add(new Circle({ "x": 420, "y": 150, "radius": 100, "style": { "color": "none", "fillStyle":1, "fillColor":"gold" } }));

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

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

数据格式

  AnyGraph 中圆的数据格式如下：

1
2
3
4
[
    {"type":"Circle","x":150,"y":150,"radius":100,"style":{"lineWidth":8,"color":"green"}},
    {"type":"Circle","x":420,"y":150,"radius":100,"style":{"color":"none","fillStyle":1,"fillColor":"gold"}}
]

样式

  圆的样式属性与矩形样式属性相同。