我正在开发一个 React Native 项目。我们的后端返回一个指向远程 SVG 图像的 URL。我不仅需要显示 SVG,还需要在移动应用程序中平移和缩放它。
- 为了显示远程 SVG 图像,我使用react-native-svg库。
- 为了平移和缩放 SVG,我使用react-native-simple-svg-pan-zoom库。
这是我尝试过的:
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