将设备旋转为横向后重新计算绘制到图像上的 X 和 Y 坐标

Question

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;

我无法重新计算绘制到图像上的 X 和 Y 点。特别适用于横向 W: 4000 H: 3000 的照片。

我重绘的方式是取纵向版本上绘制的点的 x 和 y，并在旋转到横向时重新计算和重绘。在下面的图片中，您可以看到风景照片具有正确的 X 值，但 Y 值肯定是关闭的。就好像路径被压缩了一样。我检查了正确的 y 值，路径的末端应该在 Y: 330 到达杯子底部 vs 255。这是因为 Y - 偏移量不正确并返回错误值。

portrait example photo

landscape example photo