裁剪時圖像居中的問題

Question

我有一個簡單的圖像裁剪組件。 但是我對正確定位裁切后的圖像有問題。

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

您會看到圖像裁剪效果很好，裁剪后的圖像出現在父圖像下方。

但是 ，您還會注意到裁剪后的圖像沒有正確居中，有時會向右移動，有時會向左移動等等。

您還將看到裁剪圖像的高度和寬度以及父圖像上的標記區域是相同的。 仍然很艱難，缺少一些小部分。

尋求幫助，謝謝！

PS無法將代碼放入堆棧溢出摘要中，因為它太復雜並且依賴於名為“ 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";

沙盒： 鏈接