二维码

图像(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除外) 。

空间信息

  图像的空间属性通过坐标 xy 确定位置,通过 widthheight 确定大小,这几个属性均为浮点类型,其格式如下:

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” : 高