2

Есть большая svg-схема масштабирует она по принципу ссылка на источник

Есть функционал drag для перемещения, но при перетаскивании схемы мышкой она ничем не ограничена и ее можно просто переместить над шапкой и залепить на подвал. Так вот как можно ограничить областью что бы она перемещалось только в своем окне зумаровалась и перемещалась?

var leftArrow  = 37
  , upArrow    = 38
  , rightArrow = 39
  , downArrow  = 40
  , panRate    = 10
  , zoomRate   = 1.1
  , dragScale = 1
  , x, y, theSvgElement;
    
function processKeyPress(e) {
  e.preventDefault();
  var viewBoxValues = theSvgElement.getAttribute('viewBox').split(' ');
  viewBoxValues[0] = parseFloat(viewBoxValues[0]);
  viewBoxValues[1] = parseFloat(viewBoxValues[1]);
  var offset = panRate / dragScale;
  switch (e.keyCode) {
    case leftArrow:
      viewBoxValues[0] += offset;
      break;
      
    case rightArrow:
      viewBoxValues[0] -= offset;
      break;
      
    case upArrow:
      viewBoxValues[1] += offset;
      break;
      
    case downArrow:
      viewBoxValues[1] -= offset;
      break;         
  }
  theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));
}
    
function zoom(zoomType) { 
  var viewBoxValues = theSvgElement.getAttribute('viewBox').split(' ');
  viewBoxValues[2] = parseFloat(viewBoxValues[2]);
  viewBoxValues[3] = parseFloat(viewBoxValues[3]);
  if (zoomType === 'zoomIn') {
    viewBoxValues[2] /= zoomRate;
    viewBoxValues[3] /= zoomRate;	
  }
  else if (zoomType === 'zoomOut') {
    viewBoxValues[2] *= zoomRate;
    viewBoxValues[3] *= zoomRate;	
  }
  theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));
  dragScale = svgViewBoxWidth / parseFloat(viewBoxValues[2]);
}
        
function zoomViaMouseWheel(e) {
  e.preventDefault();      
  e.wheelDelta > 0 ? zoom('zoomIn') : zoom('zoomOut');
}
    
function mouseDown(e) {
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
  var viewBoxValues = theSvgElement.getAttribute('viewBox').split(' ');
  x = e.pageX + parseFloat(viewBoxValues[0]) * dragScale;
  y = e.pageY + parseFloat(viewBoxValues[1]) * dragScale;
  theSvgElement.querySelector('circle').classList.add('dragging');
}
    
function mouseMove(e) {
  var viewBoxValues = theSvgElement.getAttribute('viewBox').split(' ');
  viewBoxValues[0] = (x - e.pageX) / dragScale;
  viewBoxValues[1] = (y - e.pageY) / dragScale;
  theSvgElement.setAttribute('viewBox', viewBoxValues.join(' '));
}
    
function mouseUp(e) {
  document.removeEventListener('mousemove', mouseMove);
  document.removeEventListener('mouseup', mouseUp);
  theSvgElement.querySelector('circle').classList.remove('dragging');
};
  
function initialize() {        
  window.addEventListener('keydown', processKeyPress, true);
  window.addEventListener('mousewheel', zoomViaMouseWheel, false);
  theSvgElement = document.getElementById('svg-id');
  document.addEventListener('mousedown', mouseDown);
  theSvgElement.setAttribute('viewBox', '0 0 ' + svgViewBoxWidth + ' ' + svgViewBoxHeight);	
}

var svgViewBoxWidth = window.innerWidth
  , svgViewBoxHeight = window.innerHeight;
initialize();
<svg id="svg-id">
  <defs>
    <style>
      circle {
        cursor: grab;
        cursor: -moz-grab;
        cursor: -webkit-grab;
      }
      circle.dragging {
        cursor: grabbing;
        cursor: -moz-grabbing;
        cursor: -webkit-grabbing;
      }
    </style>
  </defs>
  <circle class="circle" cx="311" cy="107" r="50" stroke="black" stroke-width="4" fill="red" />
</svg>

Поменял код на пример маленького svg

5
  • Uncaught Type Error: Can't read property classList of null
    – Eugen Eray
    27 апр 2017 в 7:24
  • Кода svg нет, он очень большой что бы в ректор вставить (25к строчек кода) 27 апр 2017 в 7:30
  • Нифига, огромный SVG. Что же в нем такое нарисовано?
    – Eugen Eray
    27 апр 2017 в 7:32
  • большая svg-схема предприятия, 4,7мб была в визио перевел в svg что бы в sharepoint-e отображалась как интерактивная карта, да еще и под ие без лагов работала...это пцзд 27 апр 2017 в 7:37
  • Поменял код на пример маленького svg 27 апр 2017 в 7:59

1 ответ 1

2

var leftArrow = 37
  , upArrow = 38
  , rightArrow = 39
  , downArrow = 40
  , panRate = 10
  , zoomRate = 1.1
  , dragScale = 1
  , dragX, dragY, dragRelX, dragRelY, scene, target, dragBounds;

function getBounds() {
  var rectSvg = scene.getBoundingClientRect()
    , rectTarget = target.getBoundingClientRect();
  return {
    left: rectTarget.left - rectSvg.left,
    top: rectTarget.top - rectSvg.top,
    right: svgViewBoxWidth - rectTarget.right,
    bottom: svgViewBoxHeight - rectTarget.bottom
  };
}

function processKeyPress(e) {
  e.preventDefault();
  var viewBoxValues = scene.getAttribute('viewBox').split(' ');
  viewBoxValues[0] = +viewBoxValues[0];
  viewBoxValues[1] = +viewBoxValues[1];
  var offset = panRate
    , bounds = getBounds();
  switch (e.keyCode) {
    case leftArrow:
      if (bounds.left - offset < 0) {
        offset += bounds.left - offset;
      }
      viewBoxValues[0] += offset / dragScale;
      break;

    case rightArrow:
      if (bounds.right - offset < 0) {
        offset += bounds.right - offset;
      }
      viewBoxValues[0] -= offset / dragScale;
      break;

    case upArrow:
      if (bounds.top - offset < 0) {
        offset += bounds.top - offset;
      }
      viewBoxValues[1] += offset / dragScale;
      break;

    case downArrow:
      if (bounds.bottom - offset < 0) {
        offset += bounds.bottom - offset;
      }
      viewBoxValues[1] -= offset / dragScale;
      break;
  }
  scene.setAttribute('viewBox', viewBoxValues.join(' '));
}

function zoom(zoomType) {
  var viewBoxValues = scene.getAttribute('viewBox').split(' ');
  viewBoxValues[2] = +viewBoxValues[2];
  viewBoxValues[3] = +viewBoxValues[3];
  if (zoomType === 'zoomIn') {
    viewBoxValues[2] /= zoomRate;
    viewBoxValues[3] /= zoomRate;
  }
  else if (zoomType === 'zoomOut') {
    viewBoxValues[2] *= zoomRate;
    viewBoxValues[3] *= zoomRate;
  }
  scene.setAttribute('viewBox', viewBoxValues.join(' '));
  dragScale = svgViewBoxWidth / +viewBoxValues[2];
}

function zoomViaMouseWheel(e) {
  e.preventDefault();
  e.wheelDelta > 0 ? zoom('zoomIn') : zoom('zoomOut');
}

function mouseDown(e) {
  document.addEventListener('mousemove', mouseMove);
  document.addEventListener('mouseup', mouseUp);
  dragBounds = getBounds();
  var viewBoxValues = scene.getAttribute('viewBox').split(' ');
  dragX = e.pageX + +viewBoxValues[0] * dragScale;
  dragY = e.pageY + +viewBoxValues[1] * dragScale;
  dragRelX = e.pageX;
  dragRelY = e.pageY;
  scene.classList.add('dragging');
}

function mouseMove(e) {
  var viewBoxValues = scene.getAttribute('viewBox').split(' ');
  viewBoxValues[0] = (dragX - e.pageX) / dragScale;
  viewBoxValues[1] = (dragY - e.pageY) / dragScale;
  var left = dragBounds.left - dragRelX + e.pageX;
  if (left < 0) {
    viewBoxValues[0] += left / dragScale;
  }
  var right = dragBounds.right + dragRelX - e.pageX;
  if (right < 0) {
    viewBoxValues[0] -= right / dragScale;
  }
  var top = dragBounds.top - dragRelY + e.pageY;
  if (top < 0) {
    viewBoxValues[1] += top / dragScale;
  }
  var bottom = dragBounds.bottom + dragRelY - e.pageY;
  if (bottom < 0) {
    viewBoxValues[1] -= bottom / dragScale;
  }
  scene.setAttribute('viewBox', viewBoxValues.join(' '));
}

function mouseUp(e) {
  document.removeEventListener('mousemove', mouseMove);
  document.removeEventListener('mouseup', mouseUp);
  scene.classList.remove('dragging');
};

function initialize() {
  window.addEventListener('keydown', processKeyPress, true);
  window.addEventListener('mousewheel', zoomViaMouseWheel, false);
  document.addEventListener('mousedown', mouseDown);
  scene = document.getElementById('svg-id');
  target = scene.getElementsByTagName('circle')[0];
  scene.setAttribute('viewBox', '0 0 ' + svgViewBoxWidth + ' ' + svgViewBoxHeight);
}

var svgViewBoxWidth = window.innerWidth
  , svgViewBoxHeight = window.innerHeight;

initialize();
svg {
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;
  position: absolute;
}

.dragging {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
<svg id="svg-id">
  <circle class="circle" cx="311" cy="107" r="50" stroke="black" stroke-width="4" fill="red"/>
</svg>

2
  • Выручаешь в который раз)) Был бы в Новокузнецке, коньяк бы поставил)) спасибо огромное)) 28 апр 2017 в 1:39
  • Где ты так svg изучил?? 28 апр 2017 в 1:45

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.