Recalculating X and Y coordinates drawn onto an image after rotating device to landscape

  image, javascript, react-native, resize, scale
this._size = { width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height }
let imageWidth = width;
let imageHeight = height;
let imageRatio = width/height;
let targetRatio = this._size.width / this._size.height;

let scaleFactor = targetRatio > imageRatio ? this._size.height / imageHeight : this._size.width / imageWidth;

let newWidth = imageWidth * scaleFactor;
let newHeight = imageHeight * scaleFactor;

let OldX = parseFloat(xy[0]);
let OldY = parseFloat(xy[1]);
let newX = (OldX * newWidth)/self.state.portraitWidth + (self._size.width-newWidth)/2;
let newY = OldY - this._offset.y;

I’m having trouble re-calculating X and Y points drawn onto an image. Specifically for a photo that has a landscape orientation W: 4000 H: 3000.

The way I’m redrawing it is taking the x and y of points drawn on the portrait version and recalculating and redrawing when rotated to landscape. In the pictures below, you can see that the landscape photo has the right X value but the Y value is definitely off. It’s almost as if the path is compressed. I checked the proper y values, the end of the path should be at Y: 330 to reach the bottom of the cup vs 255. This is because the Y – offset is incorrect and returns a wrong value.

portrait example photo

landscape example photo

Source: Ask Javascript Questions

LEAVE A COMMENT