Используя svg.js и svg-pan-zoom, как я могу получить текущую центральную точку "области просмотра"?

Я использую svg.js и отличный плагин svg-pan-zoom ( https://github.com/ariutta/svg-pan-zoom).

Теперь я хочу иметь кнопку, которая, когда я нажимаю на нее, рисует круг в текущей центральной точке области просмотра, которую я вижу (поэтому положение является динамическим в зависимости от того, что я сделал панорамированием / масштабированием).

Я установил быстрый пример, который рисует круг статически в указанной позиции.

Обратите внимание, что у меня есть особые потребности: я показываю фоновое изображение с коэффициентом масштабирования, подобным этому:

var map = mainWindow.group();
map.addClass('seatMap');
map.image('http://upload.wikimedia.org/wikipedia/commons/b/b3/World-map-2004-cia-factbook-large-1.7m-whitespace-removed.jpg').loaded(function () {
    map.cx(viewboxW / 2);
    map.cy(viewboxH / 2);
}).scale(0.70);

Итак, как я могу получить текущую центральную точку?

Источник

3 ответа

Решение

Найдите начальные позиции centerX и centerY (перед увеличением), используя код ниже.

var viewPort = document.getElementsByClassName("viewport")[0];
var bbox = viewPort.getBBox();
var initX = (bbox.x+bbox.width)/2,
    initY = (bbox.y+bbox.height)/2;

Вы можете вычислить центральную точку после увеличения, используя код, написанный ниже.

var pt =  draw.node.createSVGPoint();
pt.x = initX;
pt.y = initY;
pt = pt.matrixTransform(viewPort.getCTM());

pt.x будет центр X и pt.y будут центральные позиции.

Надеюсь это поможет.

Источник

У svg-pan-zoom есть 2 метода API, которые могут вам помочь:

  • getSizes
  • getPan

Вы можете быть в основном заинтересованы в getSizes так как он вернет текущий размер ограничивающего прямоугольника, реальный масштаб и размеры области просмотра и позиции.

Источник

У меня была похожая проблема: я хотел добавить прямоугольник в верхнем левом углу фактического увеличенного холста (масштабируемого SVG), поэтому я сделал это следующим образом:

var positionX = -1*svgPanZoom.getPan.x/svgPanZoom.getSizes.realZoom;
var positionY = -1*svgPanZoom.getPan.y/svgPanZoom.getSizes.realZoom;

Надеюсь, поможет

Источник
Другие вопросы по тегам