二维码
搜索 ×

椭圆(Ellipse)

  椭圆是由所有满足到两个定点（即焦点）距离之和等于常数的点组成的平面图形。 AnyGraph 中矩形的属性如下表所示：

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

初始化

1
constructor(options)

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

空间信息

  椭圆的空间属性是由圆心(x,y)和半径(radius)确定。其格式如下：

1
{ "x":300, "y":220, "radiusX": 200, "radiusY": 120 }

示例

  下面这个示例在图形增加了两个椭圆对象，通过图层数据源的 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 Ellipse({ "x": 150, "y": 150, "radiusX": 100, "radiusY": 120, "style": { "lineWidth": 8, "color": "green" } }));
    layer.getSource().add(new Ellipse({ "x": 450, "y": 150, "radiusX": 160, "radiusY": 100, "style": { "color": "none", "fillStyle":1, "fillColor":"gold" } }));

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

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

数据格式

   AnyGraph 中椭圆的数据格式如下：

1
2
3
4
[
    {"type":"Ellipse","x":150,"y":150,"radiusX":100,"radiusY":120,"style":{"lineWidth":8,"color":"green"}},
    {"type":"Ellipse","x":450,"y":150,"radiusX":160,"radiusY":100,"style":{"color":"none","fillStyle":1,"fillColor":"gold"}}
]

样式

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