Question

           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").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);
            });

上面是我的代码的一部分，我的问题是这个功能在第一次移动时效果很好，但是当我第二次尝试移动它时，元素对象会在第一次移动之前突然回到它的原点位置，如何修复那个问题？任何帮助表示赞赏。

Answer 1

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

问题由我自己解决，问题的原因在于，当我尝试第二次移动时，开始位置没有考虑第一次转换，因此在更改后的代码中，＆＃34; mousedown＆＃34;处理程序，问题解决了。

将SVG元素拖动到新位置

1 个答案: