g6/docs/api/graph/transform.zh.md
2020-11-13 22:33:15 +08:00

4.1 KiB
Raw Blame History

title order
视口操作 3

graph.getZoom()

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

该方法无参数。

返回值

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

用法

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

graph.zoom(ratio, center)

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

参数

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

用法

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

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

graph.zoomTo(toRatio, center)

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

参数

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

用法

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

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

graph.changeSize(width, height)

改变画布大小。

参数

名称 类型 是否必选 描述
width Number true 画布宽度
height Number true 画布高度

用法

graph.changeSize(600, 350);

graph.translate(dx, dy)

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

参数

名称 类型 是否必选 描述
dx Number true 水平方向位移
dy Number true 垂直方向位移

用法

graph.translate(100, 100);

graph.moveTo(x, y)

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

参数

名称 类型 是否必选 描述
x Number true 水平方向坐标
y Number true 垂直方向坐标

用法

graph.moveTo(200, 300);

graph.fitView(padding)

让画布内容适应视口。

参数

名称 类型 是否必选 描述
padding Number / Array false [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()

*v3.5.1 后支持。*平移图到中心将对齐到画布中心,但不缩放。优先级低于 fitView。

用法

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

graph.focusItem(item, animate, animateCfg)

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

参数

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

用法

graph.focusItem(item);

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

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