Проблемы панорамирования большого SVG в PaperJS - PullRequest
Новая
       29

Проблемы панорамирования большого SVG в PaperJS

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

var path = new Path.Circle({
  center: view.center,
  radius: 10,
  strokeColor: 'red',
  strokeWidth: 3,
  applyMatrix: false,
  strokeScaling: false
});

var svgItem;

project.importSVG("https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=", {
  onLoad : function (item) {
    item.center = view.center;
    svgItem = item;
  }
});

console.log(svgItem);

tool.onMouseMove = function(event) {
  //on mouse move the position of 'path' var changes to underneath cursor again
  path.position = event.point;
  //console.log(event.point); //debug
}

var toolSize = document.getElementById("tool");

console.log(toolSize);
toolSize.addEventListener("change", function(event) {
  console.log("Radius slider change detected! " + event.target.value + ". path.radius is: " + path.bounds.width);
  //path.radius = event.target.value;
  path.scaling = this.value;
});

tool.onMouseDrag = function(event) {
  //test to see of the shift key was held whilst a mouse drag action was peformed
  if (event.modifiers.shift)
  {
    //move the image the distance of the mouse drag
    svgItem.position = view.center + event.delta;
  }
}
body,
html {
  width: 100%;
  height: 100%;
  margin: 0px;
}

body {
  min-height: 100%;
}

main {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

canvas {
  width: 90vw;
  height: 90vh;
  border: 1px solid;
}

#opts {
  position: absolute;
  right: 10vw;
  bottom: 10vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.8/paper-full.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <link href="svg_style.css" type="text/css" rel="stylesheet" />
</head>
<body>
  <div id="opts">
    <input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" id="toolSize" />
    <input id="smooth" type="range" name="flatten" min="1" max="10" value="1" step="1" id="smooth" />
    <input id="flatten" type="range" name="flatten" min="1" max="10" value="1" step="1" id="flatten" />
  </div>
  <main>
    <canvas id="canvas" resize></canvas>
  </main>
  <script type="text/paperscript" src="paper_script.js" canvas="canvas">
  </script>
</body>

</html>

Я не могу заставить свой пример работать где-либо, кроме localhost , но у меня есть большой SVG внутри холста paperJS, который выходит за границы холста.

Когда я пытаюсь панорамировать его, нажимая shift и перетаскивая мышь, svg перемещается, но в конечном итоге привязывается к определенной позиции и отвечает, но всегда после этого пингует обратно в это место

1 Ответ

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

Ваша ошибка в этой строке: 

svgItem.position = view.center + event.delta;

Внутри функции обработчика событий mousedrag, event.delta фактически представляет вектор между последней точкой и текущей точкой. Вы неправильно вычислили нужную позицию, просто добавив этот вектор для просмотра центральной точки.

Вместо этого вы хотите добавить этот вектор к текущей позиции элемента. 

svgItem.position += event.delta;

Вот эскиз , демонстрирующий решение. 

// draw a circle
var item = new Path.Circle({
    center: view.center,
    radius: 50,
    fillColor: 'orange'
});

// on mouse drag...
function onMouseDrag(event) {
    // ...if shift is pressed...
    if (event.modifiers.shift) {
        // ...move item
        item.position += event.delta;
    }
}

// display instructions
new PointText({
    content: 'press shift and drag to move the circle',
    point: view.center + [0, -50],
    justification: 'center'
});
...