视口操作

阅读时间约 3 分钟

graph.getZoom()

获取当前视口的缩放比例。

该方法无参数。

返回值

  • 返回值类型:Number;
  • 返回值表示当前视口的缩放比例, 默认值为 1

用法

// 返回值zoom表示当前视口的缩放比例
const zoom = graph.getZoom();

graph.zoom(ratio, center)

改变视口的缩放比例,在当前画布比例下缩放,是相对比例。

参数

名称类型是否必选描述
ratioNumbertrue缩放比例
centerObjectfalsecenterxy 坐标为中心缩放,如果省略了 center 参数,则以元素当前位置为中心缩放

用法

// 以 (100, 100) 为中心点,放大3倍
graph.zoom(3, { x: 100, y: 100 });

// 以当前元素位置为中心,缩小到 0.5
graph.zoom(0.5);

graph.zoomTo(toRatio, center)

缩放视窗窗口到一个固定比例。

参数

名称类型是否必选描述
toRatioNumbertrue固定比例值
centerObjectfalsecenterxy 坐标为中心缩放,如果省略了 center 参数,则以元素当前位置为中心缩放

用法

// 以 (100, 100) 为中心点,放大3倍
graph.zoomTo(3, { x: 100, y: 100 });

// 以当前元素位置为中心,缩小到 0.5
graph.zoomTo(0.5);

graph.changeSize(width, height)

改变画布大小。

参数

名称类型是否必选描述
widthNumbertrue画布宽度
heightNumbertrue画布高度

用法

graph.changeSize(600, 350);

graph.translate(dx, dy)

采用相对位移来平移画布。

参数

名称类型是否必选描述
dxNumbertrue水平方向位移
dyNumbertrue垂直方向位移

用法

graph.translate(100, 100);

graph.moveTo(x, y)

采用绝对位移将画布移动到指定坐标。

参数

名称类型是否必选描述
xNumbertrue水平方向坐标
yNumbertrue垂直方向坐标

用法

graph.moveTo(200, 300);

graph.fitView(padding)

让画布内容适应视口。

参数

名称类型是否必选描述
paddingNumber / Arrayfalse[top, right, bottom, left] 四个方向上的间距值

用法

// padding 只设置为一个值,则表示 top = right = bottom = left = 20
graph.fitView(20);

// 等价于 graph.fitView(20)
graph.fitView([20]);

// padding 设置为数组,只传 2 个值,则 top = bottom = 20, right = left = 10
graph.fitView([20, 10]);

// padding 设置为数组,四个方向值都指定
graph.fitView([20, 10, 20, 15]);

graph.fitCenter()

平移图到中心将对齐到画布中心,但不缩放。优先级低于 fitView。

用法

// 在渲染和动画完成后调用
graph.fitCenter();

graph.focusItem(item, animate, animateCfg)

移动图,使得 item 对齐到视口中心,该方法可用于做搜索后的缓动动画。

参数

名称类型是否必选描述
itemstring / Objecttrue元素 ID 或元素实例
animatebooleanfalse是否带有动画。若未配置,则跟随 graph 的 animate 参数
animateCfgObjectfalse若带有动画,可配置动画,参见基础动画教程。若未配置,则跟随 graph 的 animateCfg 参数

用法

graph.focusItem(item);

// 动画地移动
graph.focusItem(item, true);

// 动画地移动,并配置动画
graph.focusItem(item, true, {
  easing: 'easeCubic',
  duration: 400,
});