如何使用 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 部分。
在那里我找到了 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 适用于图像,而不是改变大小和纵横比的东西,但它是一个很好的包,我更愿意继续使用它。
有没有人对这个包足够熟悉,知道我应该使用哪些设置来允许无限缩小,如果是的话,这些设置是什么?
我找到了我自己问题的答案。事实证明 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 来允许用户缩放和平移图表。当组织结构图没有扩展太多时,它工作得很好,但在更大的图表比例下会出现问题。
问题在于图表所代表的组织与其深度相比非常广泛,这意味着完全展开的图表是水平矩形,而不是正方形。 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 适用于图像,而不是改变大小和纵横比的东西,但它是一个很好的包,我更愿意继续使用它。
有没有人对这个包足够熟悉,知道我应该使用哪些设置来允许无限缩小,如果是的话,这些设置是什么?
我找到了我自己问题的答案。事实证明 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>
);
}
}
平移、滚轮和缩放选项也是如此。如果按照文档的建议直接在组件中设置,它们将不起作用,但如果您像我上面那样创建对象,它们就会起作用。