裁剪时图像居中问题

Question

我有一个简单的组件，可以裁剪单个图像。但是我在正确居中裁剪后的图像时遇到问题。

看看我的工作代码：https://codesandbox.io/s/sharp-mayer-b371f?from-embed

您会看到图像裁剪效果非常好，裁剪后的图像显示在父图像下方。

但是，您还会注意到裁剪后的图像没有正确居中，有时向右移动太多，有时向左移动等等。

您还会看到裁剪后的图像的高度和宽度以及父图像上的标记区域是相同的。仍然很艰难，缺少一些小部分。

寻求帮助，谢谢！

P.S。无法在堆栈溢出片段中删除代码，因为它太复杂并且依赖于名为 'Jcrop' 的 npm 包。 要测试它，只需单击父图像并移动光标。

Answer 1

您的图片发生偏移是因为您使用 background-position-x: ((x / width) * 100) %（y 类似）来显示裁剪后的图片，这是错误的。

要移动背景 n 个像素，您不能使用百分比（原因如下：）。 相反，您可以使用：

background-position: -x px

因此将您的反应代码更改为：

const marginLeft = - pos.x + "px";
const marginTop = - pos.y + "px";

沙盒：link