javascript - 我如何使用 react-zoom-pan-pinch 来允许用户查看根据用户输入大小变化的整个图表？

我设计并构建了一个互动式组织结构图，允许用户以分层格式查看业务组织。默认情况下，图表根节点下的第一行是可见的，但用户可以点击以进一步展开图表，从而改变图表的大小。用户还可以拖放节点来模拟业务重组。

我目前正在使用 react-zoom-pan-pinch 来允许用户缩放和平移图表。当组织图没有被过多展开时，它的效果非常好，但在图表缩放较大时会出现问题。

问题在于，图表所代表的组织相比其深度非常庞大，这意味着完全展开的图表是一个水平矩形，而不是正方形。react-zoom-pan-pinch 只允许我缩小到图表的最大垂直范围，这意味着用户无法在不左右滚动的情况下查看完全展开的组织。这种行为是不可接受的。

这是用于工作的，所以我不能发布代码，否则会违反许多协议。相反，我已经链接到了 react-zoom-pan-pinch 文档，并将讲述我尝试过的更改。

我首先查看的地方是文档中的 TransformWrapper Props 部分。

在那里，我找到了 inititalScale、minScale 和 maxScale 属性。

我可以将 initialScale 属性设置为小于 1 的值，并在开始时获得接近我想要的结果。将其设置为 0.5 会导致图表比通常更远地缩小，但当我缩放到 1 的值时，却无法再缩小。这是意料之中的，因为 minScale 属性仍然设置为 1。

确认这些属性确实可用后，我继续将 minScale 设置为 0.5，假设我能够放大后缩回到设置 initialScale 为 0.5 时看到的初始视图。这似乎应该可行，但实际上并没有。即使将 minScale 属性设置为 0.5，在放大到 1 之后我仍然无法缩回。这对我来说非常奇怪，因为接受 0.5 作为 initialScale 属性并随后渲染图表表明小于 1 的值是可接受的。

我现在正在尝试文档中列出的其余属性，但还没有达到预期的效果（无限缩小）。

我认为问题的根源在于 react-zoom-pan-pinch 是为图像设计的，而不是为会改变大小和纵横比的东西设计的，但这是一个很好的库，我更愿意继续使用它。

我应该使用什么设置才能允许无限缩小？

答案＃1

我发现了我自己问题的答案。事实证明，minScale、maxScale以及其他属性并没有正确传递给组件。一旦它们被正确传递，这个包就能很好地工作。以下是我的解释/修复方法

文档建议这样做：

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        initialScale={1}
        minScale={0.5}
        maxScale={7}
        initialPositionX={200}
        initialPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={() => zoomIn()}>+</button>
              <button onClick={() => zoomOut()}>-</button>
              <button onClick={() => resetTransform()}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

上述方法不起作用，并且 minScale 和 maxScale 属性没有传递给组件。如果你在浏览器中打开 React 开发者工具并查看 TransformWrapper，你会看到 minScale 的默认值为 1，maxScale 的默认值为 8，而不是你在代码中输入的值。

你可以通过创建一个对象来解决这个问题：

  const transformOptions = {
    initialScale: 1,
    minScale: 0.5,
    maxScale: 2
  }

然后在 TransformWrapper 组件内将 options 属性设置为该对象，如下所示：

import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
  render() {
    return (
      <TransformWrapper
        initialScale={1}
        options={transformOptions}
        initialPositionX={200}
        initialPositionY={100}
      >
        {({ zoomIn, zoomOut, resetTransform, ...rest }) => (
          <React.Fragment>
            <div className="tools">
              <button onClick={() => zoomIn()}>+</button>
              <button onClick={() => zoomOut()}>-</button>
              <button onClick={() => resetTransform()}>x</button>
            </div>
            <TransformComponent>
              <img src="image.jpg" alt="test" />
              <div>Example text</div>
            </TransformComponent>
          </React.Fragment>
        )}
      </TransformWrapper>
    );
  }
}

同样的事情也适用于平移、旋转和缩放选项。如果按照文档建议直接在组件中设置，它们是无效的，但如果像我上面那样创建对象，它们就能工作。