Stack Overflow Asked by Leem.fin on February 8, 2021
I am developing an React Native project. Our backend returns a URL which points to a remote SVG image. I need to not only show the SVG but also be able to pan and zoom it in the mobile app.
Here is what I tried:
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>
)
When run my app, the remote SVG image is shown & I can zoom in and out based on the configuration. But when zoom in, the SVG image is not sharp. It looks more like a bitmap being scaled. Here is an example how it looks like when I zoom in to the max scale (in above code snippet you can see maxScale={10}
).
So, how can I zoom a remote SVG image ? If the libraries I am using is not a good choice, anyone can suggest me other libraries to solve my problem?
==== Update 02.02.2021 ====
I tried react-native-image-zoom-viewer as @Minh Vo suggested. However I get blank screen, the remote svg image is not rendered by the library.
const svgImage = [{url: data.image.url}];
return (
<ImageViewer
enableImageZoom={true}
ref={() => {}}
onChange={() => {}}
renderIndicator={() => null}
backgroundColor={'transparent'}
imageUrls={svgImage} />);
...
If you feel I should provide the URL of SVG for my question, you can use this as an example https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg
According to the documentation you provide for react-native-simple-svg-pan-zoom
,
It is recommended not to set maxScale above 1 as this results in blurred react-native-svg elements. Instead, increase your SVG element dimensions and set minScale lower.
So I guess you should choose a maxScale
below 1 and try lower values for minScale
coupled with higher values for canvasWidth
and canvasHeight
until you get the zoom levels you need.
Answered by vqf on February 8, 2021
i have same problem and i find a library can help this. I suggest this react-native-image-zoom-viewer. You can easy zoom in and zoom out even though url is 1 image or multi image. More infomation in that link. Here is code demo:
const images = "www.abc.com/image.svg"
<ImageViewer
ref={() => {}}
onChange={() => {}}
renderIndicator={() => null}
backgroundColor={'transparent'}
index={this.state.index}
imageUrls={this.images} />
Answered by Minh Vo on February 8, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP