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