Skip to Content

平移和缩放

¥Panning and Zooming

React Flow 的默认平移和缩放行为受 slippy 地图  启发。你可以通过拖动来平移,通过滚动来缩放。你可以使用提供的属性轻松自定义此行为:

¥The default pan and zoom behavior of React Flow is inspired by slippy maps . You pan by dragging and zoom by scrolling. You can customize this behavior easily with the provided props:

  • panOnDrag:默认:true

    ¥panOnDrag: default: true

  • selectionOnDrag:默认:false(自 11.4.0 起可用)

    ¥selectionOnDrag: default: false (available since 11.4.0)

  • panOnScroll:默认:false(覆盖 zoomOnScroll

    ¥panOnScroll: default: false (Overwrites zoomOnScroll)

  • panOnScrollSpeed:默认:0.5

    ¥panOnScrollSpeed: default: 0.5

  • panOnScrollMode:默认:'free''free'(所有方向)、'vertical'(仅垂直)或 'horizontal'(仅水平)

    ¥panOnScrollMode: default: 'free'. 'free' (all directions), 'vertical' (only vertical) or 'horizontal' (only horizontal)

  • zoomOnScroll:默认:true

    ¥zoomOnScroll: default: true

  • zoomOnPinch:默认:true

    ¥zoomOnPinch: default: true

  • zoomOnDoubleClick:默认:true

    ¥zoomOnDoubleClick: default: true

  • preventScrolling:默认:true(阻止浏览器滚动行为)

    ¥preventScrolling: default: true (browser scroll behavior is prevented)

  • zoomActivationKeyCode:默认 'Meta'

    ¥zoomActivationKeyCode: default 'Meta'

  • panActivationKeyCode:默认 'Space'(自 11.4.0 起可用)

    ¥panActivationKeyCode: default 'Space' (available since 11.4.0)

默认视口控件

¥Default Viewport Controls

如上所述,默认控件是:

¥As mentioned above, the default controls are:

  • 平移:拖动鼠标

    ¥pan: drag mouse

  • 缩放:scroll

    ¥zoom: scroll

  • 创建选择:Shift + 拖动

    ¥create selection: Shift + drag

import { useCallback } from 'react'; import { ReactFlow, addEdge, useEdgesState, useNodesState, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import { initialNodes } from './nodes'; import { initialEdges } from './edges'; function Flow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect = useCallback( (connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges], ); return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} /> ); } export default Flow;

类似 Figma 的视口控件

¥Figma-like Viewport Controls

如果你更喜欢 figma/sketch/design 工具控件,你可以设置 panOnScroll={true}selectionOnDrag={true}

¥If you prefer figma/sketch/design tool controls you can set panOnScroll={true} and selectionOnDrag={true}:

  • 平移:空格 + 鼠标拖动、滚动、鼠标中键或右键

    ¥pan: Space + drag mouse, scroll, middle or right mouse

  • 缩放:pitch 或 cmd + scroll

    ¥zoom: pitch or cmd + scroll

  • 创建选择:拖动鼠标

    ¥create selection: drag mouse

import { useCallback } from 'react'; import { ReactFlow, addEdge, SelectionMode, useEdgesState, useNodesState, } from '@xyflow/react'; import '@xyflow/react/dist/style.css'; import { initialNodes } from './nodes'; import { initialEdges } from './edges'; const panOnDrag = [1, 2]; function Flow() { const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes); const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const onConnect = useCallback( (connection) => setEdges((eds) => addEdge(connection, eds)), [setEdges], ); return ( <ReactFlow nodes={nodes} edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} onConnect={onConnect} panOnScroll selectionOnDrag panOnDrag={panOnDrag} selectionMode={SelectionMode.Partial} /> ); } export default Flow;

在此示例中,我们还设置了 selectionMode={SelectionMode.Partial} 以便能够将节点添加到仅部分选中的选择中。

¥In this example we also set selectionMode={SelectionMode.Partial} to be able to add nodes to a selection that are only partially selected.

Last updated on