Question

我希望创建一个迭代图表供人们将圆圈拖动到图表的某个部分然后提交。然后，该圆圈将显示在图表上供其他人查看。这背后的想法是确定项目最重要的方面是利益相关者。

我有 jsfiddle 显示此功能的一部分。我想要“记录”的是圈子完成移动后的位置，然后在提交时将其放在某处（CSV）。然后我想让CSV中的所有圆圈显示在图表上。

检查元素（圆圈）将显示其位置。

这有意义吗？有人有主意吗？有更好的方法吗？

示例代码拼凑而成的各种在线教程：

<svg xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     version="1.1"
     width="970"
     height="450">

    <script type="text/ecmascript"><![CDATA[
    var selectedElement = 0;
    var currentX = 0;
    var currentY = 0;
    var currentMatrix = 0;

    function selectElement(evt) {
      selectedElement = evt.target;
      currentX = evt.clientX;
      currentY = evt.clientY;
      currentMatrix = selectedElement.getAttributeNS(null, "transform").slice(7,-1).split(' ');

      for(var i=0; i<currentMatrix.length; i++) {
        currentMatrix[i] = parseFloat(currentMatrix[i]);
      }

      selectedElement.setAttributeNS(null, "onmousemove", "moveElement(evt)");
      selectedElement.setAttributeNS(null, "onmouseout", "deselectElement(evt)");
      selectedElement.setAttributeNS(null, "onmouseup", "deselectElement(evt)");
    }

    function moveElement(evt) {
      var dx = evt.clientX - currentX;
      var dy = evt.clientY - currentY;
      currentMatrix[4] += dx;
      currentMatrix[5] += dy;

      selectedElement.setAttributeNS(null, "transform", "matrix(" + currentMatrix.join(' ') + ")");
      currentX = evt.clientX;
      currentY = evt.clientY;
    }

    function deselectElement(evt) {
      if(selectedElement != 0){
          selectedElement.removeAttributeNS(null, "onmousemove");
          selectedElement.removeAttributeNS(null, "onmouseout");
          selectedElement.removeAttributeNS(null, "onmouseup");
          selectedElement = 0;
          }
        }

    ]]> </script>

    <rect x="0.5" y="0.5" width="970" height="399" fill="#ecf0f1" stroke="black"/>
    <rect x="0.5" y="0.5" width="970" height="299" fill="none" stroke="black"/>
    <rect x="0.5" y="0.5" width="970" height="199" fill="#ecf0f1" stroke="black"/>
    <rect x="0.5" y="0.5" width="970" height="99" fill="none" stroke="black"/>




    <circle
        id ="circleitem"
        cx="50" 
        cy="50" 
        r="20" 
        stroke="black" 
        stroke-width="2" 
        fill="#c0392b" 
        transform="matrix(1 0 0 1 0 0)"
        onmousedown="selectElement(evt)"/>


</svg>

<input name="position1" class="inputfield" id="position1" readonly="readonly">
<input name="position2" class="inputfield" id="position2" readonly="readonly">



<script type="text/javascript">

position1.value = currentMatrix[4];
position2.value = currentMatrix[5];  


</script>

非常感谢

埃里克

Answer 1

应该在评论中，但它很长：尝试使用节点服务器的实时架构：

与socket.io一起（检查实时聊天编码，以此为基础）。

在deselectElement()上，POST ID,x,y（其中ID=random_sessionID, x=currentMatrix[4], y=currentMatrix[5]）到服务器。调整聊天服务器以将其记录到关联数组，例如users[ID] = [x,y];和＆＃34;广播＆＃34;数据到所有连接的客户端。

A）连接到服务器的新客户端将收到users数组的JSON版本。

B）已连接的客户端将收到ID,x,y的更新，这两种方案是：

如果是现有ID，请更新x，y值。
如果是新ID，请在x，y位置创建一个id=ID的新圈子。

注意：您可以使用其他后端服务器，只需在节点服务器上简化使用websocket实现实时更新。

交互式可拖动图表

1 个答案: