我设计并构建了一个交互式组织结构图，允许用户以分层格式查看业务组织。默认情况下，只有图表根节点下的第一行可见，但用户可以单击以进一步展开图表，从而更改图表的大小。用户还可以拖放节点来模拟业务重组。
我目前正在使用react缩放-平移-收缩来允许用户缩放和平移图表。当组织结构图没有扩展太多，但在较大的图表范围内会出现问题时，它的效果非常好。
问题是，与深度相比，图表所代表的组织非常广泛，这意味着完全展开的图表是一个水平矩形，而不是正方形。react缩放-平移-缩放只允许我缩小到图表的最大垂直范围，这意味着用户在不左右滚动的情况下无法查看完全展开的组织。这是不可接受的行为。
这是为了工作，所以我不能在不违反许多协议的情况下发布代码。相反，我已经链接到react缩放-缩放-缩放文档，并将查看我尝试更改的内容。
我看的第一个地方是文档的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缩放平移捏是针对图像的，而不是改变大小和纵横比的东西，但它是一个很好的包，我更喜欢继续使用它。
我应该使用哪些设置来允许无限缩小？
我发现了自己问题的答案。事实证明，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 dev工具并转到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>
);
}
}
这同样适用于平移、滚轮和缩放选项。如果按照文档的建议直接在组件中设置，它们就不起作用，但如果像我上面所做的那样创建对象，它们就会起作用。