二维码
搜索 ×

图像(Image)

  图像（位图）是指由像素（图片元素）组成的矩形。这些像素可以进行不同的排列和染色以构成图像，每个像素都有固定的位置和特定的颜色值，它们共同决定了图像的形状、颜色和细节。 AnyGraph 中图像的属性如下表所示：

名称 类型 说明
uid String 唯一ID
type String 类型
rotation float 旋转角度
x float X坐标值
y float Y坐标值
width float 宽
height 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
19
20
21
22
23
24
25
26
<script type="module">
    import { Graph, Image } from "../../src/index.js";

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

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

    // 绘制图像
    layer.getSource().add(new Image({ "x": 50, "y": 50, "src": "./images/square2.png" }));
    
    // 缩小的图像
    layer.getSource().add(new Image({ "x": 50, "y": 250, "src": "./images/square2.png", "width": 100, "height": 100 }));
    
    // 拉伸变形的图像
    layer.getSource().add(new Image({ "x": 200, "y": 250, "src": "./images/square2.png", "width": 100, "height": 50 }));

    // 放大的图像
    layer.getSource().add(new Image({ "x": 350, "y": 50, "src": "./images/square2.png", "width": 300, "height": 300 }));

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

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

数据格式

   AnyGraph 中图像类的数据格式如下：

1
2
3
4
5
6
[
    {"type":"Image","src":"./images/square2.png","x":50,"y":50},
    {"type":"Image","src":"./images/square2.png","x":50,"y":250,"width":100,"height":100},
    {"type":"Image","src":"./images/square2.png","x":200,"y":250,"width":100,"height":50},
    {"type":"Image","src":"./images/square2.png","x":350,"y":50,"width":300,"height":300}
]

样式

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

名称 类型 说明
borderColor StringColor 颜色
border float 线宽
imageSmoothingEnabled Boolean 是否平滑
imageSmoothingQuality String 平滑度

imageSmoothingQuality 的可选值包括：

  • “low” ： 低；
  • “medium” ：中
  • “high” ： 高