JS SVG панорамирование не работает должным образом при масштабировании (с использованием преобразований) - PullRequest
Новая
       50

JS SVG панорамирование не работает должным образом при масштабировании (с использованием преобразований)

0 голосов
/ 23 апреля 2020

Я пытаюсь увеличить и панорамировать группу SVG, используя функции перевода и масштабирования. Панорамирование работает правильно, когда масштаб равен 1. Но при увеличении / уменьшении панорамирование на определенное расстояние, а затем увеличение / уменьшение снова вызывает непреднамеренные изменения положения элемента scg g (#wrapper). Здесь я использовал прямоугольник (#panner) как ссылку для перевода группы svg (#wrapper). Это мой код. 

//html
<div>
 <svg width="100%" height="100%" class="canvasArea">
      <rect id="panner" height="100%" width="100%" fill="transparent"></rect>
      <g id="wrapper" transform="translate(0,0) scale(1)">
         <g class="group1" transform="translate(0, 0)"></g>
         <g class="group2" transform="translate(0, 0)"></g>
      </g>
 </svg>
</div>

//js
var startPosition = {}
//pan function
function drag(startPosition,event){
   var movedX = event.clientX - startPosition.clientX;
   var movedY = event.clientY - startPosition.clientY;

   // adding pan distance to old position
   panned.x = startPosition.translateX + movedX;
   panned.y = startPosition.translateY + movedY;
   $('#wrapper').attr("transform","translate("+ panned.x +","+ panned.y + ") scale("+startPosition.scale+")");

//zoom function
function zoom(scale) {

   if(zoomIn) scale += 0.125;
   else scale -= 0.125;

   var bbox = $('#panner')[0].getBBox();
   var cx = bbox.x+(bbox.width/2);           
   var cy = bbox.y+(bbox.height/2);

   // adding current panned distance to zoomed translate positions
   transform.x = cx * (1 - scale) + panned.x;
   transform.y = cy * (1 - scale) + panned.y;

   $('#wrapper').attr('transform', "translate(" + transform.x + "," + transform.y + ") scale(" + scale + ")");
}

Это хорошо работает для масштаба 1. При увеличении / уменьшении панорамирование на определенное расстояние, а затем увеличение / уменьшение снова вызывает элемент g (#wrapper) для двигаться в непредусмотренные позиции. Нужно ли включать масштабный коэффициент в панорамирование при увеличении?

...