Я создаю редактор, в котором вы можете выбрать одну арт-доску из списка нескольких арт-досок.
Когда вы выбираете арт-доску, в верхнем левом углу прокрутки art-board / canvasRef к верхний левый из области просмотра / mainRef.
Проблема, с которой я столкнулся, заключается в том, что когда я увеличиваю / уменьшаю масштаб, он больше не располагается правильно.
Это, конечно, потому что соотношение 1: 1 изменилось, и поэтому x и y позиционируют scrollTo(x,y) функция принимает, должна отражать вновь рассчитанные значения пикселей.
Это вычисления, которые я должен правильно расположить на выбранной арт-доске с 1: 1 отношение (т.е. 100%)
const scroll2X = canvasRef.current.offsetLeft - (MainRef.current.clientWidth / 2 -
MainRef.current.offsetLeft) * (1 / zoomLevel);
const scroll2Y =
canvasRef.current.offsetTop -
(MainRef.current.clientHeight / 2 - MainRef.current.offsetTop * 5) * (1 / zoomLevel);
MainRef.current.scrollTo({ top: scroll2Y, left: scroll2X, behavior: 'smooth' });
Для позиционирования это работает как шарм.
Для позиции x я беру offsetLeft арт-доски (canvasRef.current.offsetLeft) минус ширина mainRefs, деленная на 2, минус ее offsetLeft ((MainRef.current.clientWidth / 2 - MainRef.current.offsetLeft)), принимая предыдущее значение, умноженное на коэффициент масштабирования (1 / zoomLevel). Положение у в основном одинаковое, но я использую offsetTop и clientHeight, и необходимо взять MainRef.current.offSetTop * 5 из-за его отношения к его родителю (т.е. я не совсем уверен, где я получаю это число но пока работает) Он должен правильно вычислять верхний левый угол, но вместо этого он отключается на много пикселей при уменьшении масштаба.
При уменьшении масштаба и выборе артборда он заикается или прыгает.
В этот момент я слепо смотрю на свой код и падаю в червоточину расчета, чтобы понять это.
Fre sh пара глаз, которая может направить меня в правильном направлении, высоко ценится!