如何使用 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?

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

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

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

这是为了工作,所以我不能 post 在不违反大量协议的情况下编写代码。相反,我已链接到 react-zoom-pan-pinch 文档并将复习我尝试更改的内容。

我首先看到的是文档的 TransformWrapper Props 部分。

在那里我找到了 inititalScaleminScalemaxScale 道具。

我可以将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 适用于图像,而不是改变大小和纵横比的东西,但它是一个很好的包,我更愿意继续使用它。

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

我找到了我自己问题的答案。事实证明 minScalemaxScale 和其他道具没有正确传递给组件。一旦它们正确通过,包就可以很好地工作。这是我的 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>
    );
  }
}

上面的方法不起作用,minScalemaxScale 属性没有传递给组件。如果您在浏览器中打开 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>
    );
  }
}

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