Comments 3
Изменять высоту и ширину картинки это такая себе идея, потому что на практике это очень не удобно и ведет за собой ненужные сайд эффекты. Лучше всего использовать `scale`, тогда картинка не будет влиять на соседей, и шустрее в целом работает.
style={{
transform: `translate(${dragPosition.x}px, ${
dragPosition.y
}px) scale(${rectSize.width / source.width}, ${
rectSize.height / source.height
})`,
transformOrigin: "50% 50%",
}}
Так-же остается одна проблема, что картинка масштабируется относительно левого верхнего угла. Для конечного пользователя это тоже очень не удобно. Как самое просто решение, это сделать `transformOrigin: 50% 50%`, чтоб масштабировалась относительно своего центра. Но лучше всего вычислять эту точку динамически.
Относительно смещения при ресайзе согласен, забыл добавить это в статью. Я это решал через смещение на { x: -1 * rectSize.width / 2, x: -1 * rectSize.height / 2 } - в моей задаче нужно было рендерить в canvas параллельно
Относильное сайд эффектов с модификаций width/height не сталкивался, можно примеры? Но решение со scale имеет право на жизнь
Реализуем touch жесты на vanilla js. Часть 2 (drag, resize)