msand / zoomable-svg Goto Github PK
View Code? Open in Web Editor NEWPinch to pan-n-zoom react-native-svg components using a render prop.
Pinch to pan-n-zoom react-native-svg components using a render prop.
Hello,
Thanks for building this good and simple package.
There are two things I am looking to do with my react-native app.
First, I would like my Svg Rect to have static borders, so that the Rect is always at least as big as the max width of the Svg View. There could be a built in way to do this already, but since there is not much documentation it's taking a while to figure it out just with the source code.
Second, I need elements on my Svg to be clickable, while also using a pinch zoom. For example, user pinch zooms a rectangle, taps to place a piece, then zooms back out. All with a seamless flow. I see that this is nearly achievable with the "Drawing Example", but I don't want the user to need to toggle on and off all the time - bad UX.
I'm open to fixing these with a PR, but it would be helpful to have some direction.
Any recommendations?
Hi, thank you for your excellent work. I try the Basic ZoomableSvg Example , it seem work fine. But when I press the Circle,it don't work. While I remove ZoomableSvg , Circle is onPress work.
React Native : 0.56.0
react-native-svg : 6.5.3
zoomable-svg : 5.0.1
I am sorry that my English is not good.
When running on Android Emulator, the focus point of the zoom is not in the middle, but on the left side of the screen. Any ideas why? :) I can post screenshots, but the code is the same as in the example.
Hi! ๐
Firstly, thanks for your work on this project! ๐
Today I used patch-package to patch [email protected]
for the project I'm working on.
Here is the diff that solved my problem:
diff --git a/node_modules/zoomable-svg/index.js b/node_modules/zoomable-svg/index.js
index 1b3f5e2..1667658 100644
--- a/node_modules/zoomable-svg/index.js
+++ b/node_modules/zoomable-svg/index.js
@@ -238,6 +238,7 @@ function getDerivedStateFromProps(props, state) {
}
function getZoomTransform({
+ angle,
left,
top,
zoom,
@@ -247,6 +248,7 @@ function getZoomTransform({
translateY,
}) {
return {
+ angle,
translateX: left + zoom * translateX,
translateY: top + zoom * translateY,
scaleX: zoom * scaleX,
@@ -258,6 +260,7 @@ class ZoomableSvg extends Component {
constructor(props) {
super();
this.state = getDerivedStateFromProps(props, {
+ angle: props.angle || 0,
zoom: props.initialZoom || 1,
left: props.initialLeft || 0,
top: props.initialTop || 0,
@@ -430,7 +433,7 @@ class ZoomableSvg extends Component {
initialTop: top,
initialLeft: left,
initialZoom: zoom,
- initialDistance: distance,
+ initialDistance: distance
});
} else {
const {
@@ -451,10 +454,14 @@ class ZoomableSvg extends Component {
const top = (initialTop + dy - y) * touchZoom + y;
const zoom = initialZoom * touchZoom;
+ let angle = (Math.atan2(y2-y1, x2-x1) * 180) / Math.PI
+ console.log("??????tempAngle", angle)
+
const nextState = {
zoom,
left,
top,
+ angle
};
this.setState(constrain ? this.constrainExtent(nextState) : nextState);
@@ -473,7 +480,7 @@ class ZoomableSvg extends Component {
initialY: y,
});
} else {
- const { initialX, initialY, initialLeft, initialTop, zoom } = this.state;
+ const { initialX, initialY, initialLeft, initialTop, zoom, angle } = this.state;
const { constrain } = this.props;
const dx = x - initialX;
@@ -483,6 +490,7 @@ class ZoomableSvg extends Component {
left: initialLeft + dx,
top: initialTop + dy,
zoom,
+ angle
};
this.setState(constrain ? this.constrainExtent(nextState) : nextState);
@@ -494,6 +502,7 @@ class ZoomableSvg extends Component {
top: initialTop,
left: initialLeft,
zoom: initialZoom,
+ angle
} = this.state;
const { constrain } = this.props;
@@ -505,6 +514,7 @@ class ZoomableSvg extends Component {
zoom,
left,
top,
+ angle
};
this.setState(constrain ? this.constrainExtent(nextState) : nextState);
This issue body was partially generated by patch-package.
Almost appears to be triggering a re-render of the component which causes the Image to flicker. This doesn't happen with react-native-svg and only seems to occur when wrapped with the ZoomableSvg component.
<ZoomableSvg
align="mid"
width={width}
height={height}
vbWidth={100}
vbHeight={100}
initialTop={0}
initialLeft={0}
initialZoom={1}
meetOrSlice="meet"
constrain={{
combine: 'dynamic',
scaleExtent: [1, 2],
translateExtent: [[-10, -10], [110, 110]],
}}
svgRoot={({ transform }) => (
<>
<Svg
style={styles.absfill}
width={width}
height={height}
preserveAspectRatio="xMinYMin meet"
>
<G transform={transform}>
<Image
width="100"
height="100"
preserveAspectRatio="none"
href={{ uri: diagram.image }}
/>
</G>
</Svg>
<Svg
style={styles.absfill}
width={width}
height={height}
preserveAspectRatio="xMinYMin meet">
<G transform={transform}>
{diagram.polygons.map((polygon) => (
<Polygon
key={polygon.$id}
points={polygon.points.toString()}
fill="none"
stroke={activeSegment === segment.$id ? `red` : 'none'}
strokeWidth="1"
onPress={() => setActiveSegment(segment.$id)}
/>
))}
</G>
</Svg>
</>
)} />
I'm really interested in using this lib but I can''t seem to get the example working using Expo or in my own app.
The Expo viewer on the web or my phone just crashes and my app is throwing the following error: undefined is not an object (evaluating 'Component.propTypes')
This tracks back to line 10 which is: const AnimatedRect = Animated.createAnimatedComponent(Rect);
Thoughts?
Hello,
I would like to ask, is it possible to configure the ZoomableSvg component so that the zoom is always the same for each direction and the zoom point is in the center of the image view?
Thank you for any answer.
Regards,
Marcin
I use the zoomable-svg
to draw many item with pan and zoom, but it has bad performance.
This is the gif:
Hey,
First of all great component ๐
I had some questions:
Hope you will understand what I mean :) if not please let me know and I will try to explain more.
Thanks in advance :)
This might sound odd, but is it possible to re-render the SVG after the zoom-gesture is released? This would help a lot with complex SVG-trees considering that the tree is updating 24/7 while you're performing pan-gestures.
What I had in mind was that while you're zooming in the SVG, it'll have to be a bit blurry despite zooming in. However, once the gesture is released, the SVG will have to update.
Thoughts? Possible to do this?
Hi
I'm trying to use your library but some properties are not clear for me what they do.
I did read software-mansion/react-native-svg#374 where some properties are explained but I don't understand them all.
Could you elaborate a bit more on what the above properties do?
Thanks in advance!
I've implemented zoomable-svg in a react native project, but compilation fails due to missing react-native-web and react-dom dependencies.
i see the platform check at the top of index.js, but it doesn't seem to be working correctly?
I'm using RN 0.59.9
Hello again,
I have created a canvas where a certain object is displayed. Users can zoom in, scale, etc. I have a button that when pressed, it changes the canvas to its initial position.
Any idea how I could achieve this? I tried resetting the transform object but without luck.
Thanks in advance!
Kind regards
When the doubleTapThreshold prop is set, touch events never get passed through to the underlying SVG.
shouldRespond
returns a truthy value when doubleTapThreshold is set, causing the view to always set the pan responder.
!lock &&
(evt.nativeEvent.touches.length === 2 ||
dx * dx + dy * dy >= moveThreshold ||
doubleTapThreshold)
In my case I removed doubleTapThreshold from ZoomableSvg props.
If this is by design, could you add to the homepage docs?
Thanks for your great work @msand, saved me many hours!
It would be great if you add a type definition file for supporting typescript projects.
Thanks.
Hi, i implemented ZoomableSvg with SVG and it works great Android and iOS, but when i wrap the implementation with FlatList it is not work as expected...
can you please provide an example of implementation with flatlist?
Hi, In my app I need to pass some variable data to be drawn.
Example:
<Ellipse cy={this.state.y} cx={this.state.x} />
But I am unable to do this since svgRoot does not inherit properties from parent component.
Moreover, I want svgRoot to execute render on state change, but, as written above, I can't pass any state to it, hence this component is not reactive.
Is there any workaround for my issue?
Hi,
i try to keep the translateX and translateY to be the same when reaching the max zoom when scaleX or scaley === 3.
how can we do that?
but i also want it to be able to drag
Object {
"scaleX": 3,
"scaleY": 3,
"translateX": -528.1742063998316, - > this keep changing when user keep doing zoom in
"translateY": -173.31884437708027 - > this keep changing when user keep doing zoom in
}
tnx
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.