Diagnose zoom/rotation bug in React Native app
- or -
Post a project like this$100
- Posted:
- Proposals: 1
- Remote
- #1987041
- Expired
Description
Experience Level: Intermediate
I have just built a relatively complex image editing UI in React Native.
The experience is intended to be quite similar to Instagram, and has pinch-to-zoom, pan, and rotate functionality.
Transformations are stored as data, eg:
transformation: {
bottomBoundary: 1989,
leftBoundary: 410,
rightBoundary: 1634,
topBoundary: 765,
rotation: 0,
},
Wherein `topBoundary` and `bottomBoundary` are both offsets from the top of the image, and `leftBoundary` and `rightBoundary` are both offsets from the left of the image.
When rotating, because React Native uses the centre of objects as a transform origin, images need to be offset when in the 90° or 270° orientations, so that they are still "sticky" to the top/left corner and can be offset:
**calculateRotationOffset.js**
export default function (width, height) {
const transform = [
{ rotate: `${this.rotation}deg` },
]
/*
RN rotates around centre point, so we need to
manually offset the rotation to stick the image
to the top left corner so that our offsets will
work.
*/
if (this.rotation === 90) {
transform.push(
{ translateX: -((width - height) / 2) },
{ translateY: -((width - height) / 2) },
)
} else if (this.rotation === 270) {
transform.push(
{ translateX: ((width - height) / 2) },
{ translateY: ((width - height) / 2) },
)
}
return transform
}
Something about my rotation and zoom implementation are not working together.
[Here is the complete snack example.](https://snack.expo.io/@isaachinman/zoom-+-rotation-bug).
To reproduce the bug:
1. Rotate the image once
2. Pinch to zoom in or out
3. Rotate the image again
The image will now be flipped and offset incorrectly.
There are a minimum of three transformations happening sequentially here to reproduce the bug, so I have not been able to track down the issue.
The price here is to simply fix the bug. However, I am aware the code is not the most robust. I am also open to the proposal of a total rewrite, and we can discuss budget for that.
The experience is intended to be quite similar to Instagram, and has pinch-to-zoom, pan, and rotate functionality.
Transformations are stored as data, eg:
transformation: {
bottomBoundary: 1989,
leftBoundary: 410,
rightBoundary: 1634,
topBoundary: 765,
rotation: 0,
},
Wherein `topBoundary` and `bottomBoundary` are both offsets from the top of the image, and `leftBoundary` and `rightBoundary` are both offsets from the left of the image.
When rotating, because React Native uses the centre of objects as a transform origin, images need to be offset when in the 90° or 270° orientations, so that they are still "sticky" to the top/left corner and can be offset:
**calculateRotationOffset.js**
export default function (width, height) {
const transform = [
{ rotate: `${this.rotation}deg` },
]
/*
RN rotates around centre point, so we need to
manually offset the rotation to stick the image
to the top left corner so that our offsets will
work.
*/
if (this.rotation === 90) {
transform.push(
{ translateX: -((width - height) / 2) },
{ translateY: -((width - height) / 2) },
)
} else if (this.rotation === 270) {
transform.push(
{ translateX: ((width - height) / 2) },
{ translateY: ((width - height) / 2) },
)
}
return transform
}
Something about my rotation and zoom implementation are not working together.
[Here is the complete snack example.](https://snack.expo.io/@isaachinman/zoom-+-rotation-bug).
To reproduce the bug:
1. Rotate the image once
2. Pinch to zoom in or out
3. Rotate the image again
The image will now be flipped and offset incorrectly.
There are a minimum of three transformations happening sequentially here to reproduce the bug, so I have not been able to track down the issue.
The price here is to simply fix the bug. However, I am aware the code is not the most robust. I am also open to the proposal of a total rewrite, and we can discuss budget for that.
Isaac H.
40% (1)Projects Completed
1
Freelancers worked with
1
Projects awarded
67%
Last project
22 Jun 2016
United States
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies