裁剪时出现图像居中问题

Question

我有一个简单的组件，可以进行单幅图像裁剪。但是我对正确定位裁切后的图像有问题。

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

您将看到图像裁剪效果很好，裁剪后的图像出现在父图像下方。

但是，您还会注意到裁剪后的图像未正确居中，有时图像向右移动，有时向左移动，依此类推。

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

寻求帮助，谢谢！

P.S。无法将代码放入堆栈溢出摘要中，因为它太复杂并且依赖于名为“ Jcrop”的npm软件包。 要对其进行测试，只需单击父图像并移动光标。

Answer 1

由于使用background-position-x: ((x / width) * 100) %（和y相似）显示裁剪后的图像，因此图像发生了偏移。

要移动背景n像素，您不能使用百分比（这就是原因：https://stackoverflow.com/a/47329797/4718434）。  相反，您可以使用：

background-position: -x px

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

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

沙箱：link