如何在react-zoom-pan-pinch库中使用KeepScale组件

• 核心逻辑：库默认会对容器内所有元素应用缩放变换，要固定标签盒子的尺寸，就得让标签元素抵消容器的缩放影响——用当前容器的缩放比例反向缩放标签本身。

• 获取实时缩放值：通过库提供的useControls钩子拿到当前的缩放比例scale：

  import { useControls } from "react-zoom-pan-pinch";
  
  // 在组件内部
  const { scale } = useControls();
  

• 反向缩放标签元素：给每个标签盒子设置样式，用transform: scale(1/scale)抵消容器的缩放，同时设置transform-origin保证元素位置不偏移：

  <div 
    className="tag-box"
    style={{
      transform: `scale(${1 / scale})`,
      transformOrigin: "center", // 或者"top left"，根据布局调整
    }}
  >
    {/* 标签内容 */}
  </div>
  

• 间距自动适配：容器缩放后，标签之间的布局间距（不管是flex/grid的间距还是绝对定位的坐标）会跟着缩放，而标签自身被反向缩放回原尺寸，最终视觉上就呈现出“标签大小固定，间距随缩放变化”的效果，正好符合需求。

• 性能优化小技巧：如果标签数量较多，用useMemo缓存反向缩放比例，避免每次渲染都重复计算：

  import { useMemo } from "react";
  
  const reverseScale = useMemo(() => 1 / scale, [scale]);
  

内容的提问来源于stack exchange，提问作者Jeremy