Fixed translation issue while the image is rotated

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2020-12-20 20:00:11 +01:00
parent 6758734593
commit 18de342fa1

View file

@ -242,11 +242,15 @@ export default class ImageView extends React.Component {
const zoomPercentage = this.state.zoom/100;
const translatePixelsX = this.state.translationX + "px";
const translatePixelsY = this.state.translationY + "px";
/* The order of the values is important!
* First, we translate and only then we rotate, otherwise
* we would apply the translation to an already rotated
* image causing it translate in the wrong direction. */
const style = {
transform: `rotate(${rotationDegrees})
transform: `translateX(${translatePixelsX})
translateY(${translatePixelsY})
scale(${zoomPercentage})
translateX(${translatePixelsX})
translateY(${translatePixelsY})`,
rotate(${rotationDegrees})`,
};
return (