二维码
搜索 ×

矩形(Rect)

  矩形是一种常见的几何形状。 AnyGraph 中矩形的属性如下表所示：

名称 类型 说明
uid String 唯一ID
type String 类型
x float X坐标值
y float Y坐标值
width float 宽
height float 高
rx float 水平轴向的圆角半径尺寸
ry float 垂直轴向的圆角半径尺寸
rotation float 旋转角度
style Object 样式
properties Object 属性

初始化

1
constructor(options)

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

空间信息

  矩形的空间属性通过坐标 x 和 y 确定位置，通过 width 和 height 确定大小，这几个属性均为浮点类型，其格式如下：

1
{ "x":50, "y":20, "width": 200, "height": 100 }

示例

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

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

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

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

    // 绘制矩形
    layer.getSource().add(new Rect({ "x": 50, "y": 50, "width": 200, "height": 100, "style":{"lineWidth":4 , "color":"blue"} }));
    layer.getSource().add(new Rect({ "x": 350, "y": 50, "width": 200, "height": 100, "rx":10, "ry":10, "style":{ "fillColor" : "#9FFFFF", "fillStyle":1, "lineWidth":4 , "color":"red" } }));

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

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

数据格式

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

1
2
3
4
[
    {"type":"Rect","x":50,"y":50,"width":200,"height":100,"style":{"lineWidth":4,"color":"blue"}},
    {"type":"Rect","x":350,"y":50,"width":200,"height":100,"rx":10,"ry":10,"style":{"fillColor":"#9FFFFF","fillStyle":1,"lineWidth":4,"color":"red"}}
]

样式

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

名称 类型 说明
color StringColor 描边颜色， 当值等于 “none” 时表示不用描边
lineWidth float 描边线宽
fillColor StringColor 填充颜色
fillStyle int 填充风格，1为填充，2为不填充
dash Array 虚线样式
dashOffset int 虚线偏移量
lineCap String 描边属性，边框终点的形状
lineJoin String 连接属性，控制两条描边线段之间连接属性
miterLimit int 斜接长度