drag-and-drop - SVG 组翻译问题

Question

出于特定原因，我必须进行群组翻译 (SVG)。我不知道为什么我不能正确地完成它，因为在完成翻译之后，在另一个组上单击它会在开始位置重置翻译并让我在 SVG Canvas 上跑来跑去。我在链接中编写准系统示例:http://www.atarado.com/en/stripboard-layout-software/group-translation-problem.svg ，这是代码:

<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
function startMove(evt){
 x1=evt.clientX;
 y1=evt.clientY;
 group=evt.target.parentNode;
 group.setAttribute("onmousemove","moveIt(evt)");
}
function moveIt(evt){
 dx=evt.clientX-x1;
 dy=evt.clientY-y1;
 group.setAttributeNS(null,"transform","translate("+ dx + ", " + dy +")");
}
function drop(){
 group.setAttributeNS(null, "onmousemove",null);
}
]]></script>
<rect x="0" y="0" width="100%" height="100%" fill="dodgerblue"/>

<g id="BC" transform="translate(0, 0)" onmousedown="startMove(evt)" onmouseup="drop()"><circle id="C" cx="60" cy="60" r="22" fill="lightgrey" stroke="black" stroke-width="8"/><circle id="B" cx="120" cy="60" r="22" fill="orange" stroke="black" stroke-width="8" /></g>
</svg>

欢迎任何愿意提供帮助的人。

Answer 1

组在第二次移动时重置位置的原因是您将转换设置为平移，其中 (dx, dy) 等于移动开始位置 ( x1, y1) 和当前位置 (evt.clientX, evt.clientY)。这意味着当您第二次单击并且他们稍微移动鼠标时，dx 和 dy 是小数字。然后使用它们将变换设置为稍微偏离初始位置的位置。请记住，任何时候应用于组的变换都必须描述从组的初始位置的变换。

解决该问题的一种方法是存储到目前为止应用到该组的所有移动的总增量，并使用这个累积的 (dx, dy) 构建转换。例如:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<script><![CDATA[
function startMove(evt){
  group=evt.target.parentNode;
  x1=evt.clientX - group.$x;
  y1=evt.clientY - group.$y;
  group.setAttribute("onmousemove","moveIt(evt)");
}
function moveIt(evt){
  dx=evt.clientX-x1;
  dy=evt.clientY-y1;
  group.setAttributeNS(null,"transform","translate("+ dx + ", " + dy +")");
  group.$x = dx; 
  group.$y = dy; 
}
function drop(){
  group.setAttributeNS(null, "onmousemove",null);
}
]]></script>
<rect x="0" y="0" width="100%" height="100%" fill="dodgerblue"/>
<g id="BC" transform="translate(0, 0)" onmousedown="startMove(evt)" onmouseup="drop()">
  <circle id="C" cx="60" cy="60" r="22" fill="lightgrey" stroke="black" stroke-width="8"/>
  <circle id="B" cx="120" cy="60" r="22" fill="orange" stroke="black" stroke-width="8" />
</g>
<script><![CDATA[
var group=document.getElementById("BC");
group.$x = 0;
group.$y = 0;
]]></script>
</svg>

我们在组元素中添加了两个属性:$x 和 $y 来存储元素的当前位置(或所有移动的累积增量)远，取决于你看待它的方式)。在定义 ID 为“BC”的元素之后的脚本中，它们被初始化为零。它们在 moveIt() 中更新并在 startMove() 中使用。由于我们在 startMove() 中从 (x1, y1) 中减去新的增量 ($x, $y)，这些新增量有效地得到稍后在 moveIt() 中添加到 (dx, dy)。这确保 (dx, dy) 考虑到目前的所有移动以及当前的移动。