SVGPanZoom удаляет оригинальный viewBox - PullRequest
Новая
       53

SVGPanZoom удаляет оригинальный viewBox

0 голосов
/ 16 мая 2019

Я использую SVGPanZoom для управления масштабированием SVG-изображения в моем гибридном приложении Android (для всех целей и задач, аналогично поведению в Chrome).Хотя масштабирование работает хорошо, я обнаружил странную проблему.Мой оригинальный встроенный элемент SVG выглядит следующим образом: 

 <svg id='puzzle' viewBox='0 0 1600 770' preserveAspectRatio='none'
  width='100vw' height='85.5vh' fill-rule='evenodd' clip-rule='evenodd' 
  stroke-linejoin='round' stroke-miterlimit='1.414' 
  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http:// 
  www.w3.org/1999/xlink'>

Изначально этот элемент SVG пуст и заполняется программно из JavaScript во время выполнения, после чего я запускаю SVGPanZoom следующим образом 

var panZoom = svgPanZoom('#puzzle', 
{panEnabled:false,controlIconsEnabled:false,
zoomEnabled:true,dblClickZoomEnabled:true,onZoom:postZoom});

panZoom.refreshRate = 10;
panZoom.zoomScaleSensitivity = 0.02;

ПроблемаЯ столкнулся с этим - я хочу, чтобы мое SVG-изображение заполнило доступную область, 100vw x 85.5vh полностью, чтобы сделать это, и я проинструктировал его через атрибут preserveAspectRatio="none" выше вместе с атрибутом viewBox="0 0 1600 770" attribute. I have found that this works - so long as I don't use SVGPanZoom. As soon as I initiate panZoom the zoomBox`attribute, и я заканчиваюс изображением, которое не совсем ведет себя с точки зрения поведения растяжения / заполнения по умолчанию.

SVGPanZoom широко используется, поэтому я предполагаю, что это поведение не совсем правильно для меня.Окунувшись в код, который я нашел, SVGPanZoom создает cacheViewBox, а затем переходит к удалению исходного атрибута zoomBox.

Что хорошо, если после этого работает масштабирование и исходное поведение приложения не меняется, что нечто я нахожуЧто я тут не так делаю?

Ответы [ 2 ]

0 голосов
/ 26 мая 2019

Примечание для всех, кто сталкивается с этой темой.В конце концов, я отказался от SVGPanZoom и решил полностью отказаться от использования любой библиотеки панорамирования / масштабирования.В то же время я решил полностью прекратить использование SVG viewBox и полностью обрабатывать все масштабирование / панорамирование с помощью SVG-преобразований.Основные этапы

  • Оберните все содержимое SVG в группу, чтобы упростить управление преобразованием.Я использую атрибут id gOuter для этой группы
  • Установите начальный масштаб для SVG, чтобы он занимал нужный клиентский прямоугольник.В моем случае у меня был оригинальный viewBox из 0 0 1600 770, предназначенный для того, чтобы занимать 100% ширины экрана и 85% высоты экрана.Таким образом, мое масштабирование было scaleX = 1600/window.innerWidth и scaleY = 770/)0.85*window.innerHeight).
  • . Примените это начальное преобразование к внешней обертывающей группе, gOuter.setAttribute('transform','0 0 scaleX,scaleY)
  • Теперь, чтобы приблизиться к объекту, виртуальный верхний левыйкоординаты руки в исходном окне просмотра были Ox,Oy, вы бы использовали преобразование

gOuter.setAttribute('transform',
scale(scaleX,scaleY) translate(-Ox,-Oy) scale(2*scaleX,2*scaleY) translate(Ox,Oy))

для увеличения с коэффициентом x 2.Важные вещи, которые нужно понять здесь

  • В SVG преобразования применяются справа налево.
  • Здесь мы переводим точку масштабирования в верхнее масштабирование lhs, а затем переводим ее обратно в исходныйlocation.
  • Проблема заключается в том, что нам также необходимо разрешить исходный уровень масштабирования при начальном масштабировании, поэтому мы помечаем его как одно последнее преобразование

.управление процессом масштабирования и, в качестве дополнительной выгоды, операция становится значительно более плавной, чем при использовании библиотеки панорамирования / масштабирования.

0 голосов
/ 21 мая 2019

Недавно я тоже столкнулся с этой проблемой.По моим исследованиям, именно так работает библиотека.Я решил жить с этим ограничением на данный момент, но я нашел пару других библиотек, которые могут работать так, как вы собираетесь (я еще не пробовал):

  • jquery.panzoom это библиотека jquery, которая предоставляет эту функциональность, а также имеет несколько приятных функций.Я знаю, что многие люди стараются избегать jquery, но он довольно маленький и может делать то, что вы хотите.Он обрабатывает SVG, но я не знаю, что он делает с атрибутом viewBox.
  • react-svg-pan-zoom - это компонент реагирования, который может быть полезен, если вы работаете в реагировании.

Я также пробовал библиотеку PanZoom , но она также страдает тем же ограничением viewBox.

...