Как панорамировать и масштабировать, чтобы соответствовать элементу с SvgPanZoom - PullRequest
Новая
       69

Как панорамировать и масштабировать, чтобы соответствовать элементу с SvgPanZoom

1 голос
/ 05 марта 2020

Я использую библиотеку svg-pan-zoom и мне нужно панорамировать / масштабировать изображение, чтобы соответствовать определенному элементу. Я мог бы использовать метод fit, но он подходит для всего содержимого, в этом случае мне нужно разместить только один конкретный элемент. Другим вариантом может быть расчет необходимого панорамирования и масштабирования и использование пользовательского элемента управления, но как настроить масштабирование панорамирования / масштабирования элемента в соответствии с окном?

ОБНОВЛЕНИЕ

Я пытался следовать более простому решению @bumbu. Это была моя первая мысль, но я столкнулся с некоторыми проблемами, связанными с положением точки увеличения.

Это скрипка, показывающая ожидаемое поведение и попытку расчета.

http://jsfiddle.net/mgv5fuyw/2/

это расчет: 

var bb=$("#target")[0].getBBox();
var x=bb.x+bb.width/2;
var y=bb.y+bb.height/2;

calculation

Но как-то ожидаемый центр масштабирования (225,225) не подходит один.

Ответы [ 2 ]

1 голос
/ 07 марта 2020

Я нашел решение панорамирования перед масштабированием, я не смог найти правильный способ использования метода zoomAtPoint ().

http://jsfiddle.net/mgv5fuyw/3/

var bb=$("#target")[0].getBBox();
var vbb=panZoomInstance.getSizes().viewBox;
var x=vbb.width/2-bb.x-bb.width/2;
var y=vbb.height/2-bb.y-bb.height/2;
var rz=panZoomInstance.getSizes().realZoom;
var zoom=vbb.width/bb.width;
panZoomInstance.panBy({x:x*rz,y:y*rz});
panZoomInstance.zoom(zoom);
0 голосов
/ 07 марта 2020

Не вдаваясь в детали, я бы попробовал 2 подхода:

Проще:

  • Инициировать библиотеку svg-pan-zoom
  • Подогнать и отцентрировать ваш SVG
  • Вычисление положений (верхний левый и нижний правый, или центр и размер) интересующих вас элементов
  • Теперь, основываясь на размере области просмотра, вы сможете рассчитать уровень масштабирования и центральная точка каждого элемента

Сложнее:

  • Определить относительное положение исходных объектов относительно исходного окна просмотра
  • На основе текущего размера окна просмотра вам следует уметь рассчитывать уровень масштабирования и центральную точку каждого элемента
...