在 PaperJS 中平移大 svg 的问题

Question

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 之外，我实际上无法让我的示例在任何地方工作，但我的 paperJS canvas 中有一个大的 SVG，它延伸到canvas 界限。

当我尝试通过按住 shift 键并拖动鼠标来平移它时，svg 会移动但最终会捕捉到特定位置并做出响应，但之后总是会 ping 回该位置

Answer 1

你的错误在这一行：

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

在 mousedrag 事件处理函数内部，event.delta 实际上表示最后一个点和当前点之间的向量。您通过简单地将此矢量添加到视图中心点而错误地计算了所需的位置。

您要做的是将此向量添加到项目当前位置。

svgItem.position += event.delta;

这里是 sketch 演示解决方案。

// 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'
});

在 PaperJS 中平移大 svg 的问题

Problems panning large svg in PaperJS

html

javascript

css

svg

paperjs