拖SVG元素到新的位置

  if (action == "mousedown") { 
       startx = x; 
       starty = y; 
      } 

      if (action == "mousemove") { 
       if (!mouseisdown) { 
        return; 
       } else { 
        //console.log(target); 
        var transformX = x - startx; 
        var transformY = y - starty; 
        //    console.log(x, y, startx, starty); 
        var transformAttr = 'translate(' + transformX + ',' + transformY + ')'; 
        test.setAttribute('transform', transformAttr); 
       } 
      } 

      if (action == "mouseup") { 
       var transformX = x - startx; 
       var transformY = y - starty; 
       //    console.log(x, y, startx, starty); 
       var transformAttr = 'translate(' + transformX + ',' + transformY + ')'; 
       test.setAttribute('transform', transformAttr); 
      }

下面是我的方式来获得x，y位置：拖SVG元素到新的位置

  $("svg").on("mousedown", function (event) { 
       mouseisdown = true; 
       var offset = $("#center").offset(); //#center is the canvas 
       var x = event.pageX - offset.left; 
       var y = event.pageY - offset.top;     
       current_tool("mousedown", x, y, null); 
      });

以上是我的代码的一部分，我的问题是这样的功能运作良好的第一招，但是当我第二次尝试移动它时，元素对象会在第一次移动之前突然回到原点位置，如何解决该问题？任何帮助表示赞赏。

来源

2017-06-13 Steveeeeee

您未更新代码中的x和y。只需更新坐标 –

@kpsingh你的意思是我需要更新cx和cy的椭圆，x，y的rect？因为我还需要移动元素组，所以更新x，y似乎不适用于g元素.... – Steveeeeee

它在哪里获取transform属性转换的当前值？ –

  if (action == "mousedown") { 
       startx = x - test.transform.animVal["0"].matrix.e; //change 
       starty = y - test.transform.animVal["0"].matrix.f; // change2 
      } 

      if (action == "mousemove") { 
       if (!mouseisdown) { 
        return; 
       } else { 
        if (test.transform.animVal["0"]) { 
         console.log(test.transform.animVal["0"].matrix); 
         var transformX = x - startx; 
         var transformY = y - starty; 
         var transformAttr = 'translate(' + transformX + ',' + transformY + ')'; 
         test.setAttribute('transform', transformAttr); 
        } 
       } 
      } 

      if (action == "mouseup") { 
       var transformX = x - startx; 
       var transformY = y - starty; 
       //    console.log(x, y, startx, starty); 
       var transformAttr = 'translate(' + transformX + ',' + transformY + ')'; 
       test.setAttribute('transform', transformAttr); 
      }

问题由自己解决，这个问题的原因是，当我尝试了第二招，起始位置并没有采取先转化为考虑，这样的变化中“的mousedown”代码处理程序后，，问题解决了。

来源

2017-06-13 14:31:29 Steveeeeee

拖SVG元素到新的位置

回答

相关问题