时间戳

首页 > 解决方案 > 平移和缩放 SVG 图像，但放大图像时不清晰

react-native - 平移和缩放 SVG 图像，但放大图像时不清晰

问题描述

我正在开发一个 React Native 项目。我们的后端返回一个指向远程 SVG 图像的 URL。我不仅需要显示 SVG，还需要在移动应用程序中平移和缩放它。

这是我尝试过的：

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

// I hardcode the remote SVG URL here for illustration purpose, it is from backend in my code.
const imageSource = 'https://www.example.com/foo.svg';
...
return (
      <SvgPanZoom
          canvasHeight={windowHeight}
          canvasWidth={windowWidth}
          minScale={0.5}
          maxScale={10}
          initialZoom={1}
          onZoom={zoom => {
            console.log('onZoom:' + zoom);
          }}>
          <SvgUri width="100%" height="100%" uri={imageSource} />
        </SvgPanZoom>
  )

运行我的应用程序时，会显示远程 SVG 图像，我可以根据配置放大和缩小。但是放大时，SVG 图像不清晰。它看起来更像是一个被缩放的位图。这是一个示例，当我放大到最大比例时（在上面的代码片段中你可以看到maxScale={10}）。

在此处输入图像描述

那么，如何缩放远程 SVG 图像？如果我使用的库不是一个好的选择，任何人都可以建议我使用其他库来解决我的问题吗？

==== 2021 年 2 月 2 日更新 ====

我按照@Minh Vo 的建议尝试了 react-native-image-zoom-viewer 。但是我得到空白屏幕，远程 svg 图像不是由库渲染的。

const svgImage = [{url: data.image.url}];
return (
<ImageViewer
            enableImageZoom={true}
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
              imageUrls={svgImage} />);
    ...

如果您觉得我应该为我的问题提供 SVG 的 URL，您可以以此为例https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg

标签： react-nativesvgreact-native-svgsvgpanzoom

解决方案

我有同样的问题，我找到一个图书馆可以帮助解决这个问题。我建议这个react-native-image-zoom-viewer。即使 url 是 1 张图片或多张图片，您也可以轻松放大和缩小。该链接中的更多信息。这是代码演示：

        const images = "www.abc.com/image.svg"
        <ImageViewer
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
            index={this.state.index}
            imageUrls={this.images} />

推荐阅读