LogicFlow icon indicating copy to clipboard operation
LogicFlow copied to clipboard

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

Open wangdan-fit2cloud opened this issue 1 year ago • 1 comments

背景&目的

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

wangdan-fit2cloud avatar Aug 06 '24 03:08 wangdan-fit2cloud

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

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

https://github.com/didi/LogicFlow/blob/27c10a48c73696ae5d2f93b7b961d08cc5724202/packages/core/src/view/overlay/CanvasOverlay.tsx#L87-L96

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

https://github.com/didi/LogicFlow/blob/27c10a48c73696ae5d2f93b7b961d08cc5724202/packages/extension/src/components/mini-map/index.ts#L474-L488

ChangeSuger avatar Aug 09 '24 15:08 ChangeSuger