AntV G6根据节点id,定位到节点位置

需求:搜索某个节点,移动画布,至节点位于视图中心位置。
代码:

// 根据id定位到节点
const handleGotoNode: (id: string) => void = (id) => {
    // 找到视口中心
    const viewCenter = {
        x: graph?.get('width') / 2,
        y: graph?.get('height') / 2
    };
    const node = graph?.findById(id);
    const modelCenter = graph?.getPointByCanvas(viewCenter.x, viewCenter.y);
    if (node && modelCenter) {
        const { x, y, width, height } = node.getBBox();
        const scale = treeGraph.current?.getZoom() || 1
        // 画布平移的目标位置,最终目标是graph.translate(dx, dy);
        const dx = modelCenter.x - x;
        const dy = modelCenter.y - y;
        treeGraph.current?.translate((dx - width / 2) * scale, (dy - height / 2) * scale)
    }
};

效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值