Проблема с центрированием изображения при кадрировании

Question

У меня есть простой компонент с обрезкой одного изображения. Но у меня проблема с правильным центрированием обрезанного изображения.

Посмотрите на мой рабочий код: https://codesandbox.io/s/sharp-mayer-b371f?from-embed

Вы увидите, что обрезка изображения работает очень хорошо, обрезанные изображения появляются под родительским изображением.

Однако , вы также заметите, что обрезанное изображение не по центру, иногда оно перемещается слишком вправо, иногда слишком лево и так далее.

Вы также увидите, что высота и ширина обрезанного изображения, а также отмеченная область на родительском изображении одинаковы. Все еще трудно, какая-то небольшая часть отсутствует.

Обращаюсь за помощью, спасибо!

P.S. Не удалось удалить код из фрагментов переполнения стека, поскольку он слишком сложен и основан на пакете npm под названием «Jcrop». Чтобы проверить это, просто нажмите на родительское изображение и переместите курсор.

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";

Песочница: ссылка