Fix position mouse cursor

Question

When I drag the svg(red) to another position on the screen, the cursor mouse loses the original angular position (lag) and points to blank area ... I used a var dx and dy in "var point e.clientx" to fix it, unsuccessfully ... any suggestions?

code: http://jsfiddle.net/rebecavascon/evgLhdz3/2/

show: http://jsfiddle.net/rebecavascon/evgLhdz3/2/show/

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

Answer 1

Creating an offset worked for my testing.

Code: http://jsfiddle.net/Twisty/8zx8p2wf/19/

Working: http://jsfiddle.net/Twisty/8zx8p2wf/19/show/

Added Function getCenter()

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

This gets the true center of an SVG Object. Looks like the cx and cy attributes do not get updated.

Updated function updateSVG()

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

This uses a new offset constant variable and the correct center points.

JavaScript

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

Through testing, I adjusted the draggable a little bit, such that, the div.img wrapper is the draggable and the svg inside is the handle. I'm not sure if there is a benefit here, yet I didn't want it to go unnoticed.