Перемещение событий SVG по значениям viewBox - PullRequest
Новая
       2

Перемещение событий SVG по значениям viewBox

1 голос
/ 28 мая 2020

Мне не удается сохранить положение изображения для следующего изменения. Кажется, что svg сбрасывает позицию каждый щелчок, как мне сохранить позицию? Это сбивает меня с толку, и в inte rnet не так много информации об этом, кроме этого перетаскиваемого изображения , но этот учебник предназначен для 'x' и 'y' внутреннего объекта, а не для значений viewBox . 

	let image = document.querySelector("#parImage");
    	let svg = image.querySelector("svg");
    	let vbVals = svg.getAttribute("viewBox").split(" ");
    	let CTM = svg.getScreenCTM();

    	let x = 0;
    	let y = 0;
    	let z = 0;
    	let w = 0;

    	window.onload = function()
    	{
    		image.addEventListener('mousedown', startDrag);
	        image.addEventListener('mouseup', endDrag);
	        image.addEventListener('mouseleave', endDrag);
    	}

   		function drag()
   		{
   			event.preventDefault();

   			//x += 0.1;

			let X = (-((event.clientX - CTM.e) / CTM.a)) + 40;
			let Y = (-((event.clientY - CTM.f) / CTM.d)) + 30;

			svg.setAttribute("viewBox", 
				(X - x) 	+ " " + 
				(Y - y) 	+ " " + 
				vbVals[2] 	+ " " + 
				vbVals[3]);
   		}


   		function startDrag()
   		{
   			image.addEventListener('mousemove', drag);

   			x = (-((event.clientX - CTM.e) / CTM.a)) + 40;
   			y = (-((event.clientY - CTM.f) / CTM.d)) + 30;
   			x -= parseFloat(vbVals[0]);
   			y -= parseFloat(vbVals[1]);

   			z = parseFloat(vbVals[2]);
   			w = parseFloat(vbVals[3]);
   		}

   		function endDrag()
   		{
   			image.removeEventListener("mousemove", drag);
   		}
figure {
        width: 300px;
        background: wheat;
        margin: 0 auto;
    }

    .static {
        cursor: not-allowed;
    }

    .draggable {
        cursor: move;
    }
<!DOCTYPE html>
<html>

<head>
    <title></title>
</head>

<body>
    <div class="section-library-detailbox">
        <div class="inner">
            <figure id="parImage"><svg class="draggable" viewBox="-15 -10 400 440">
                      <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
  <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text>
                </svg></figure>
        </div>
    </div>
</body>

</html>

1 Ответ

3 голосов
/ 28 мая 2020

Вам нужно читать vbVals при каждом перетаскивании, а не только изначально. Как сказал @Robert Longson в комментарии, вы можете полагаться на существующий API для управления окном просмотра; 

let image = document.querySelector("#parImage");
let svg = image.querySelector("svg");
//let vbVals = svg.getAttribute("viewBox").split(" ");

let CTM = svg.getScreenCTM();

let x = 0;
let y = 0;
let z = 0;
let w = 0;

window.onload = function() {
  image.addEventListener('mousedown', startDrag);
  image.addEventListener('mouseup', endDrag);
  image.addEventListener('mouseleave', endDrag);
}

function drag() {
  event.preventDefault();

  //x += 0.1;

  let X = (-((event.clientX - CTM.e) / CTM.a)) + 40;
  let Y = (-((event.clientY - CTM.f) / CTM.d)) + 30;

  svg.viewBox.baseVal.x = (X - x);
  svg.viewBox.baseVal.y = (Y - y);
  /*svg.setAttribute("viewBox",
    (X - x) + " " +
    (Y - y) + " " +
    vbVals[2] + " " +
    vbVals[3]);*/
}


function startDrag() {
  image.addEventListener('mousemove', drag);

  x = (-((event.clientX - CTM.e) / CTM.a)) + 40;
  y = (-((event.clientY - CTM.f) / CTM.d)) + 30;

  //vbVals = svg.getAttribute("viewBox").split(" "); /* added this */
  x -= /*parseFloat(vbVals[0])*/ svg.viewBox.baseVal.x;
  y -= /*parseFloat(vbVals[1])*/ svg.viewBox.baseVal.y;

  z = /*parseFloat(vbVals[2])*/ svg.viewBox.baseVal.width;
  w = /*parseFloat(vbVals[3])*/ svg.viewBox.baseVal.height;
}

function endDrag() {
  image.removeEventListener("mousemove", drag);
}
figure {
  width: 300px;
  background: wheat;
  margin: 0 auto;
}

.static {
  cursor: not-allowed;
}

.draggable {
  cursor: move;
}
<div class="section-library-detailbox">
  <div class="inner">
    <figure id="parImage"><svg class="draggable" viewBox="-15 -10 400 440">
                      <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
  <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text>
                </svg></figure>
  </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...