Центрирование чертежа в определенной области просмотра - PullRequest
Новая
       5

Центрирование чертежа в определенной области просмотра

0 голосов
/ 21 ноября 2018

Я использую скрипт ariutta svg-pan-zoom.Параметры fit и center установлены на true.У меня в SVG есть определение viewbox: 

viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"

svg ширина и высота установлены в размер экрана.

, что на самом деле является границей географических координат.Необходимо отцентрировать в определенном точке в географической координате, например: 27,81 -43,221, а затем увеличить на уровне 4. Насколько я понимаю, я должен предоставить пиксельную координату для функции панорамирования.Как я могу рассчитать их в моем случае?

Ниже приведен полный источник SVG 

<svg id="svg" width="1174" height="735" viewBox="27.7333333 -43.2233334 0.2183334 0.0566667">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>
<script>
var PTZ = svgPanZoom('#svg', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            contain:true,
            minZoom:1,
            maxZoom: 300,
            viewportSelector: '.svg-pan-zoom_viewport'

        });
    PTZ.zoom(2);
    PTZ.panBy({x: -220, y: 0})
</script>

Я хочу, чтобы центрировать и масштабировать область круга с ID: «маркер», давая правильное значениедля масштабирования и панорамирования.

обновление - я создаю фрагмент кода, чтобы проиллюстрировать мою проблему 

var PTZ = svgPanZoom('#svg', {
            zoomEnabled: true,
            controlIconsEnabled: true,
            fit: true,
            center: true,
            contain:true,
            minZoom:1,
            maxZoom: 300,
            viewportSelector: '.svg-pan-zoom_viewport'

        });

 PTZ.zoom(2);
PTZ.panBy({x: -220, y: 0})
<script src="https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <svg 
	id="svg" class="mapNavSVG"
	width="400" height="300"
	viewBox="27.7333333 -43.2233334 0.2183334 0.0566667"
	preserveAspectRatio="xMidYMid meet" 
	xmlns="http://www.w3.org/2000/svg" 
	xlink="http://www.w3.org/1999/xlink" 
	ev="http://www.w3.org/2001/xml-events" 	
	shape-rendering="geometricPrecision"
	
	>
	
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>

1 Ответ

0 голосов
/ 21 ноября 2018

Итак, viewBox - это просто прямоугольник (x, y, width, height), который вы хотите разместить над вашей общей сценой SVG.Поэтому, если вам просто нужно центрировать и увеличивать круг без какого-либо javascript (непрограммным способом), вам нужно:

  1. определить размер ограничивающего прямоугольника для вашего круга (так как онимеет r = 0,001. Размеры ограничительной рамки легко найти: ширина: 0,002, высота: 0,002)

  2. определить координату верхнего левого угла этой ограничительной рамки.Для этого вам нужно взять координату центра вашего круга и вычесть радиус (который равен половине ограничительной рамки для круга):

    cx = "27.9426815914392" cy = "- 43.1805954054158"

    ограничивающий прямоугольник х тогда: 27,9426815914392 - 0,01 = 27,9416815914392;ограничивающий прямоугольник y: -43.1805954054158 - 0.01 = -43.1815954054158;

Так что теперь ваш общий viewBox можно построить следующим образом: 

viewBox="27.9416815914392 -43.1815954054158 0.002 0.002"

Если вам нужно программное решение, что может быть проще, вам просто нужно использовать API ограничивающего прямоугольника, который существует в спецификации SVG: 

function init() {
  var mainSVG = document.getElementById('svg');
  var circle = document.getElementById('marker');
  var boundingBox = `${circle.getBBox().x} ${circle.getBBox().y} ${circle.getBBox().width} ${circle.getBBox().height}`
  mainSVG.setAttribute('viewBox', boundingBox)
}
<svg id="svg" width="1174" height="735" viewBox="27.9416815914392 -43.1815954054158 0.002 0.002" onload="init()">
<g id="holder" class="svg-pan-zoom_viewport">
<circle cx="27.9426815914392" cy="-43.1805954054158" r="0.001" id="marker" vector-effect="non-scaling-stroke" stroke-width="1" stroke="#ff0" fill="#d9d900"></circle>
</g>
</svg>

Я не знаю точного позиционирования, которого вы хотите достичь, но я надеюсь, что этот ответ поможет вам с направлением

...