У меня есть представление, встроенное в React. В упрощенном виде он состоит из рабочей области, расположенной абсолютно по отношению к области просмотра. Окно просмотра имеет тот же размер, что и окно браузера. Обычно (но не всегда) рабочая область больше окна просмотра, как показано на рисунке ниже.
Пользователь может панорамировать рабочее пространство, открывая различные его области в окне просмотра. Панорамирование устанавливает отрицательное смещение рабочей области по отношению к области просмотра, выраженное в пикселях (PanX и PanY).
Пользователь также может увеличивать и уменьшать масштаб. Масштабирование выполняется с фиксированными шагами, в данном примере с коэффициентом 0,25, т. е. +0,25 для увеличения и -0,25 для уменьшения. Это влияет на масштаб, который, в свою очередь, влияет на размер рабочей области. На рисунке 2 ниже пользователь увеличил масштаб на один шаг (масштаб +0,25).
Каждый объект в рабочей области масштабируется пропорционально рабочей области. В этом примере зеленый треугольник представляет объект в рабочей области. Таким образом, после увеличения треугольник будет больше. Когда объект станет больше, его смещение в окне просмотра изменится. В этом примере он будет выглядеть так, как будто он растет вниз и вправо.
Что я хочу сделать, так это то, что центр области просмотра должен оставаться в центре после того, как пользователь увеличил или уменьшил масштаб. Для этого мне нужно настроить PanX и PanY, чтобы окно просмотра оставалось в центре той точки рабочей области, где оно было центрировано до масштабирования.
Итак, мой вопрос: Как мне удерживать область просмотра в центре одной и той же точки в рабочей области при увеличении и уменьшении масштаба?
Вычисление должно привести к новым значениям, которые я могу установить для PanX и PanY для рабочей области, которая центрирует окно просмотра. Имейте в виду, что окно просмотра можно расположить где угодно, если ни одно из его краев не находится за пределами рабочей области (как на рисунке ниже).
Заранее спасибо!
