[Feature]: zoom放大怎么从中心点放大

[wangdan-fit2cloud]

背景&目的

因为目前用.zoom()，画布上的整体组件会随着方法从左上角向下走，如果是用触摸屏或者鼠标滚轮 其实可以控制在中心点放大缩小，这个zoom要怎么设置呢

[ChangeSuger]

zoom() 方法是支持设置缩放的基准点的，可以看下文档。

也可以参考 LogicFlow 内部实现鼠标滚轮控制画布缩放的逻辑：

LogicFlow/packages/core/src/view/overlay/CanvasOverlay.tsx

Lines 87 to 96 in 27c10a4

	// 如果没有禁止缩放画布，那么进行缩放. 在禁止缩放画布后，按住 ctrl、cmd 键也不能缩放了。
	if (!editConfigModel.stopZoomGraph) {
	ev.preventDefault()
	const position = graphModel.getPointByClient({
	x: ev.clientX,
	y: ev.clientY,
	})
	const { x, y } = position.canvasOverlayPosition
	transformModel.zoom(ev.deltaY < 0, [x, y])
	}

我理解您想做的可能是控制按钮点击缩放的时候按照画布中心去缩放，这可能需要获取当前画布中心点的坐标。这里可以使用 lf.getTransform() 方法，获取画布偏移与缩放比例，结合画布实际高宽就可以计算出当前画布中心点的坐标。这块文档里返回参数写的不是很详细，具体可以参考：

LogicFlow/packages/extension/src/components/mini-map/index.ts

Lines 474 to 488 in 27c10a4

	/**
	* 获取视口范围
	*/
	private updateViewPortBounds() {
	const { TRANSLATE_X, TRANSLATE_Y, SCALE_X, SCALE_Y } =
	this.lf.getTransform()
	const { width, height } = this.lf.graphModel
	this.viewPortBounds = {
	left: -TRANSLATE_X / SCALE_X,
	right: (-TRANSLATE_X + width) / SCALE_X,
	top: -TRANSLATE_Y / SCALE_Y,
	bottom: (-TRANSLATE_Y + height) / SCALE_Y,
	}
	}