Jquery ui 固定位置鼠标光标

当我将svgred拖动到屏幕上的另一个位置时，光标鼠标失去了原始的角度位置滞后，并指向空白区域。。。我在var point e.clientx中使用了var dx和dy来修复它，但没有成功。。。有什么建议吗

代码：

展示：

---

创建偏移量对我的测试有效

代码：

工作：

增加了函数getCenter

这将获得SVG对象的真实中心。看起来cx和cy属性没有更新

更新的函数updateSVG

这将使用新的偏移常量变量和正确的中心点

JavaScript

---

通过测试，我稍微调整了draggable，这样div.img包装器就是draggable，里面的svg就是句柄。我不确定这里是否有好处，但我不想让它被忽视。

可以看出，它在被拖动后似乎没有跟随鼠标。我想知道中心点是否报告了奇数值。将添加一些报告和测试。即使在拖动SVG后，centerPoint似乎也不会更改。请参见：这修复了中心点问题并创建了一个巨大的新问题：因此，相对于中心的角度正在正确计算。还有一些东西正在改变，那就是将该路径移动到另一个位置。我认为问题在于，相对于SVG边界提供了X和Y，在拖动SVG之后，需要计算偏移量。请看：同样，tks非常好，它在firefox中运行良好，但chrome失败了。。。tks@RebecaP.getBoundingClientRect应适用于FF和Chrome；但我只测试了由@Michael Geary提出的FF.Change.x到left，.y到top，使其功能全面。看见天气真好：好吧，我猜在x和y仅为FF的情况下，Chrome可以使用顶部和左侧。

function updateSVG(e) {
    if (follow) {
      var centerPoint = new Point(center[0].getAttribute("cx"), center[0].getAttribute("cy"));
      var point = new Point(e.clientX, e.clientY);
      var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
      var distance = Math.round(getDistance(point, centerPoint));
      var d = "M " + centerPoint.X + " " + centerPoint.Y + " L " + point.X + " " + point.Y;
      path.attr("d", d);
      txt.attr("x", point.X);
      txt.attr("y", point.Y);
      txt.html(distance + arrows + " (" + angle + degree + ")");
      txt.attr("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
      dynamic.attr("r", distance);
    }
    fitSVG();
  }

  function getCenter(target) {
    var b, x, y, w, h, cx, cy;
    b = target[0].getBoundingClientRect();
    console.log(target, b);
    x = b.x;
    y = b.y;
    w = b.width;
    h = b.height;
    cx = x + (w / 2);
    cy = y + (h / 2);
    console.log(x, y, w, h, cx, cy);
    return {
      X: cx,
      Y: cy
    };
  }

  function updateSVG(e) {
    if (follow) {
      var centerPoint = getCenter(center);
      var point = new Point(e.clientX, e.clientY);
      var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
      var distance = Math.round(getDistance(point, centerPoint));
      var od = {
        p: {
          X: point.X - offset.X,
          Y: point.Y - offset.Y
        },
        cp: {
          X: centerPoint.X - offset.X,
          Y: centerPoint.Y - offset.Y
        }
      };
      var d = "M" + od.p.X + "," + od.p.Y + " L" + od.cp.X + "," + od.cp.Y;
      path.attr("d", d);
      txt.attr("x", point.X);
      txt.attr("y", point.Y);
      txt.html(distance + arrows + " (" + angle + degree + ")");
      txt.attr("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
      dynamic.attr("r", distance);
    }
    fitSVG();
  }

$(function() {
  var center = $("#center"),
    dynamic = $("#dynamic"),
    path = $("#deg"),
    svg = $("svg"),
    txt = $("#txt"),
    svgNS = svg[0].namespaceURI,
    degree = String.fromCharCode(176),
    arrows = String.fromCharCode(845),
    follow = true,
    startPos,
    endPos,
    offset = {
      X: 0,
      Y: 0
    };

  function Point(x, y) {
    return {
      "X": x,
      "Y": y
    };
  }

  function getCenter(target) {
    var b, x, y, w, h, cx, cy;
    b = target[0].getBoundingClientRect();
    console.log(target, b);
    x = b.x;
    y = b.y;
    w = b.width;
    h = b.height;
    cx = x + (w / 2);
    cy = y + (h / 2);
    console.log(x, y, w, h, cx, cy);
    return {
      X: cx,
      Y: cy
    };
  }

  // Credits goes to Stackoverflow: http://stackoverflow.com/a/14413632
  function getAngleFromPoint(point, centerPoint) {
    var dy = (point.Y - centerPoint.Y),
      dx = (point.X - centerPoint.X);
    var theta = Math.atan2(dy, dx);
    var angle = (((theta * 180) / Math.PI)) % 360;
    angle = (angle < 0) ? 360 + angle : angle;
    return angle;
  }
  // Credits goes to http://snipplr.com/view/47207/
  function getDistance(point1, point2) {
    var xs = 0;
    var ys = 0;

    xs = point2.X - point1.X;
    xs = xs * xs;

    ys = point2.Y - point1.Y;
    ys = ys * ys;

    return Math.sqrt(xs + ys);
  }

  function fitSVG() {
    var width = window.innerWidth,
      height = window.innerHeight;
    svg.width(width);
    svg.height(height);
  }

  function updateSVG(e) {
    if (follow) {
      //var centerPoint = new Point(center[0].getAttribute("cx"), center[0].getAttribute("cy"));
      var centerPoint = getCenter(center);
      var point = new Point(e.clientX, e.clientY);
      var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
      var distance = Math.round(getDistance(point, centerPoint));
      var od = {
        p: {
          X: point.X - offset.X,
          Y: point.Y - offset.Y
        },
        cp: {
          X: centerPoint.X - offset.X,
          Y: centerPoint.Y - offset.Y
        }
      };
      var d = "M" + od.p.X + "," + od.p.Y + " L" + od.cp.X + "," + od.cp.Y;
      $("#mouse").html(e.clientX + "," + e.clientY);
      $("#svgPos").html(svg.position().left + "," + svg.position().top);
      $("#offset").html(offset.X + "," + offset.Y);
      $("#centerPoint").html(centerPoint.X + "," + centerPoint.Y);
      $("#point").html(point.X + "," + point.Y);
      $("#path").html(d);
      $("#angle").html(angle);
      $("#distance").html(distance);
      path.attr("d", d);
      txt.attr("x", point.X);
      txt.attr("y", point.Y);
      txt.html(distance + arrows + " (" + angle + degree + ")");
      txt.attr("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
      dynamic.attr("r", distance);
    }
    fitSVG();
  }

  grid_size = 10;

  svg
    .mousemove(updateSVG)
    .click(function() {
      follow = !follow;
      return true;
    });
  $(".img").draggable({
    handle: "svg",
    classes: {
      "ui-draggable-dragging": "opac"
    },
    cursor: "grab",
    grid: [grid_size, grid_size],
    start: function(e, ui) {
      $(this).find(".text").hide();
      follow = false;
      startPos = ui.position;
    },
    stop: function() {
      follow = true;
      endPos = svg.position();
      offset.X = endPos.left;
      offset.Y = endPos.top;
    }
  });
});