Question

我之前发布了这个问题，但这是一个混乱，并没有真正的意义。此外，我已经重新编写了代码，但我仍然遇到同样的问题。

解释;我有一个SVG元素，我可以当前点击并拖动，这将工作peachy，我很高兴，但是一旦用户取消点击鼠标按钮然后去移动鼠标并启动拖动功能， svg co-ords只需返回0，整个图像重新开始回到0.0。

这真的是我的错误，我觉得我错过了一些简单的事情。

编辑：JSFiddle按要求 - https://jsfiddle.net/2cu2jvbp/2/

这是我一起“哈希”的代码：

var states = '',  stateOrigin;
var root = document.getElementById("svgCanvas");
var viewport = root.getElementById("viewport");

function setAttributes(element, attribute)
{
    for(var n in attribute) //rool through all attributes that have been created.
    {
     element.setAttributeNS(null, n, attribute[n]);   
    }
}

function setupEventHandlers() //self explanatory;
{
  setAttributes(root, {
      "onmousedown": "mouseDown(evt)", //do function
      "onmouseup": "mouseUp(evt)",
      "onmousemove":  "mouseMove(evt)", 
  }); 
}


function setCustomTransMatrix(element, a,b,c,d,e,f) {
    var m = "matrix(" + a + " " + b + " " + c + " " +d + " " + e + " " + f + ")";

    element.setAttribute("transform", m);
}

function getMousePoint(evt) { //this creates an SVG point object with the co-ords of where the mouse has been clicked.
    var points = root.createSVGPoint();

    points.x = evt.clientX;
    points.Y = evt.clientY;

    return points;
}


function mouseDown(evt)
{
    if(evt.target == root || viewport)
    {
     states = "pan";   
     stateOrigin = getMousePoint(evt);
    }   
}

function mouseMove(evt)
{
    var pointsLive = getMousePoint(evt);
    var storedCo = [];

    if(states == "pan")
    {
    setCustomTransMatrix(viewport, 1,0,0,1, pointsLive.x - stateOrigin.x, pointsLive.Y - stateOrigin.Y);
     storedCo[0] = pointsLive.x - stateOrigin.x
     storedCo[1] = pointsLive.Y - stateOrigin.Y;
    }

    else if(states == "store")
    {
        stateOrigin = pointsLive;
        states = "stop";
    }


}

function mouseUp(evt)
{
    if(states == "pan")
    {
     states = "store"; 
        if(states == "stop")
        {
         states ='';   
        }
    }
}

function intialize() {
    var matrik = root.getCTM();
    setupEventHandlers();
    console.log(matrik);
    //setCustomTransMatrix(viewport, matrik.a, matrik.b, matrik.c, matrik.d, matrik.e,matrik.f);
}

intialize();

SVG Pan在视口周围 - onclick / onmove不断重置？

0 个答案: