如何使用 react-zoom-pan-pinch 允许用户查看所有根据用户输入更改大小的图表？

Question

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

我目前正在使用 react-zoom-pan-pinch 来允许用户缩放和平移图表。当组织结构图没有扩展太多时，它工作得很好，但在更大的图表比例下会出现问题。

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

这是为了工作，所以我不能 post 在不违反大量协议的情况下编写代码。相反，我已链接到 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 适用于图像，而不是改变大小和纵横比的东西，但它是一个很好的包，我更愿意继续使用它。

有没有人对这个包足够熟悉，知道我应该使用哪些设置来允许无限缩小，如果是的话，这些设置是什么？

Answer 1

我找到了我自己问题的答案。事实证明 minScale、maxScale 和其他道具没有正确传递给组件。一旦它们正确通过，包就可以很好地工作。这是我的 explanation/fix

文档建议这样做：


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>
    );
  }
}

平移、滚轮和缩放选项也是如此。如果按照文档的建议直接在组件中设置，它们将不起作用，但如果您像我上面那样创建对象，它们就会起作用。

如何使用 react-zoom-pan-pinch 允许用户查看所有根据用户输入更改大小的图表？

How can I use react-zoom-pan-pinch to allow users to view all of a chart that changes size based on user input?

javascript

reactjs

zooming

panning