工具栏定位 - 配置工具栏位置和方向

工具栏位置配置

功能概述

本示例演示图画布内不同工具栏定位选项。工具栏可以定位在任何边缘（上、下、左、右）并水平或垂直定向。该示例包括 UI 控件以动态更改工具栏位置和方向。

核心特性实现

工具栏位置选项

const graphOptions: RGOptions = {
    toolBarPositionH: 'left',   // 'left' | 'center' | 'right'
    toolBarPositionV: 'top',    // 'top' | 'center' | 'bottom'
    toolBarDirection: 'v'       // 'h' (水平) | 'v' (垂直)
};

动态位置更改

const changeToolbarPosition = (positionH: string, positionV: string, direction: string) => {
    graphInstance.updateOptions({
        toolBarPositionH: positionH,
        toolBarPositionV: positionV,
        toolBarDirection: direction
    });
};

位置控制 UI

<select onChange={(e) => changeToolbarPosition(e.target.value, 'top', 'v')}>
    <option value="left">Left</option>
    <option value="center">Center</option>
    <option value="right">Right</option>
</select>

创意使用场景

响应式布局：针对不同屏幕尺寸调整工具栏位置。

可访问性：为不同用户方便访问而定位工具栏。

屏幕空间：移动工具栏以避免覆盖重要节点。

从右到左语言：为 RTL 布局调整工具栏。

触摸界面：在移动设备上为拇指友好访问而定位工具栏。