Javascript PaperJS中平移大型svg的问题

var path=新路径。圆({
中心：view.center，
半径：10，
strokeColor:'红色'，
冲程宽度：3，
applyMatrix:false，
冲程标定：错误
});
var svgItem；
project.importSVG（“https://svgshare.com/getbyhash/sha1-yxefOEotn9oAUgg+1qfc5gNw4Bs=“{
onLoad：功能（项）{
item.center=view.center；
svgItem=项目；
}
});
console.log（svgItem）；
tool.onMouseMove=函数（事件）{
//鼠标移动时，“路径”变量的位置再次变为光标下方
path.position=event.point；
//console.log（event.point）；//调试
}
var toolSize=document.getElementById（“工具”）；
控制台日志（工具大小）；
toolSize.addEventListener（“更改”，函数（事件）{
console.log（“检测到半径滑块更改！”+event.target.value+”。path.Radius为：“+path.bounds.width”）；
//path.radius=event.target.value；
path.scaling=this.value；
});
tool.onMouseDrag=函数（事件）{
//按住shift键的测试，同时执行鼠标拖动操作
if（event.modifiers.shift）
{
//将图像移动到鼠标拖动的距离
svgItem.position=view.center+event.delta；
}
}

body，
html{
宽度：100%；
身高：100%；
边际：0px；
}
身体{
最小高度：100%；
}
主要{
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
帆布{
宽度：90vw；
高度：90vh；
边框：1px实心；
}
#选择{
位置：绝对位置；
右：10vw；
底部：10vh；
}

---

您的错误在这一行：

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

---

请更换

http://localhost:8080/PCB-trace.svg

，带有要使用的文件的路径。您可以尝试使用类似于托管文件的服务。

我的示例实际上无法正常运行

看起来代码片段已丢失。对我来说，我得到了一个503（服务不可用）。代码片段无法工作，因为你打电话到

http://localhost:8080/

。请重构您的代码，使其具有可复制性。@NinoFiliu代码段停止运行，

http://localhost:8080/

当代码段处于运行状态时，这当然是个问题。@Keith，谢谢你提供的信息。当我发表我的评论时，你的评论还没有发表。我不知道为什么它会给我这样的行为，但还是要谢谢你！