Перемещение к определенным координатам X и Y и центру изображения svg-pan-zoom

Question

Я использую библиотеку ariutta svg-pan-zoom ( https://github.com/ariutta/svg-pan-zoom).

Я пытаюсь выполнить панорамирование определенной формы в точке (x:1000, y:20), когда пользователь нажимает кнопку. Я также хотел бы, чтобы изображение центрировалось в этой точке.

Проблема, с которой я сталкиваюсь, - это точка, в которой я пытаюсь перемещаться и центрироваться, исчезает с экрана.

Я в настоящее время использую:

panZoom.pan({x:1000, y:20});

но это не работает.

Пожалуйста, смотрите jsFiddle для получения дополнительной информации: http://jsfiddle.net/arjSharma/n6r55dp1/2/

Может кто-нибудь помочь с моей проблемой?

Спасибо

Answer 1

Мне удалось ответить на мой вопрос: я сначала перемещаюсь в точку 0,0, используя метод:

panZoom.pan({x:0,y:0});

Затем я получаю значение "реального увеличения":

var realZoom= panZoom.getSizes().realZoom;

Для панорамирования и центрирования по конкретным x и y используйте метод pan () и передайте координаты x и y, как в примере ниже:

panZoom.pan
({  
x: -(755*realZoom)+(panZoom.getSizes().width/2),
y: -(240*realZoom)+(panZoom.getSizes().height/2)
}); 

'+(PanZoom.getSizes(). Width/2)' и '+(panZoom.getSizes(). Height/2)' отвечают за добавление смещения к координатам x и y, которое обеспечивает центрирование изображения.

Не стесняйтесь задавать любые дополнительные вопросы относительно моего ответа.