wie implementieren ziehbare Funktion in Svg Bild?

Question

In diesem Code habe ich Jquery-draggable verwendet, um das Tag zu setzen. Es hat funktioniert, wie Sie unter https://jsbin.com/yekukar/edit?html,css,js

sehen können

Aber ich möchte, dass beim Klicken auf die Linie ("in Code für den Winkel"), das Ereignis "onmousemove" nicht mehr den Winkelwert an der Stelle markiert. Ich habe das Ereignis "onclick" versucht, aber nicht, dass die Messung am angeklickten Punkt reibungslos abläuft.

Bitte, ich brauche jemand suggestion.tks viel !!!

SNIPPET HTML - CODIGO COMPLETO EM https://jsbin.com/yekukar/edit?html,css,js

<svg class="ang" width="100%" height="500"> 

       <path d="M 1000 300 L 800 300" class="deg45" transform="rotate(0 300 300)"> 
      </path> 
       <text text-anchor="left" x="850" y="300" style="font-size: 15pt;" transform="rotate(0 300 300)">0 degrees</text> 

      <circle cx="900" cy="300" id="center" r="2" /> 
      <circle cx="900" cy="300" id="dynamic" r="2" fill="none" /> 
       <path id="deg" d="M 300 300 L 400 300" stroke="#000" stroke-width="1px" /> 
       <text text-anchor="left" x="0" y="100" id="txt" style="font-size: 20pt;" transform="rotate(45 100 100)"></text> 

Snippet JS

   var center = document.querySelector("#center"), 
      dynamic = document.querySelector("#dynamic"), 
      path = document.querySelector("#deg"), 
      svg = document.querySelector("svg"), 
      txt = document.querySelector("#txt"), 
      svgNS = svg.namespaceURI, 
      degree = String.fromCharCode(176), 
      arrows = String.fromCharCode(845); 

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

      // 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.setAttribute("width", width); 
      svg.setAttribute("height", height); 
      } 

      svg.onmousemove = function (e) { 
      var centerPoint = new Point(center.getAttribute("cx"), center.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.setAttribute("d", d); 
      txt.setAttribute("x", point.X); 
      txt.setAttribute("y", point.Y); 
      txt.textContent = distance + arrows + " (" + angle + degree + ")"; 
      txt.setAttribute("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")"); 

      dynamic.setAttribute("r", distance); 
      fitSVG(); 
      } 

      //JQUERY DRAGGABLE 

      grid_size = 10; 

      $(" .ang") 
      .draggable({ 
      grid: [grid_size, grid_size] 
      }) 

      .on("mouseover", function() { 
      $(this).addClass("move-cursor") 
      }) 

      .on("mousedown", function() { 
      $(this) 
      .removeClass("move-cursor") 
      .addClass("grab-cursor") 
      .addClass("opac"); 

      $(" .text ").hide(); 

      }) 

      .on("mouseup", function() { 
      $(this) 
      .removeClass("grab-cursor") 
      .removeClass("opac") 
      .addClass("move-cursor"); 
      }); 

Answer 1

Es ist nicht klar, was Sie versuchen zu erreichen, aber ich vermute, dass es so etwas wie dieses:

1. Als Benutzer die Maus bewegt, berechnen Winkel
2. Wenn der Benutzer die Maus klickt, stoppen Winkelberechnungs
3. Benutzer erlauben svg herum zu ziehen, und nicht Winkel zu berechnen, wie dies
geschieht

this helps:

Code: https://jsfiddle.net/Twisty/8fy76yrt/24/

Show: https://jsfiddle.net/Twisty/8fy76yrt/24/show/

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; 

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

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

    grid_size = 10; 

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

Es gibt viele Änderungen. Ich bevorzuge es, so viel jQuery zu behalten, wie ich kann und Code nicht zu mischen, wenn möglich. Also habe ich alle jQuery Objects den Variablen zugewiesen. Um die richtigen SVG-Attribute zu verwenden, kann der 1. Elementindex [0] nach Bedarf aufgerufen werden. Sie werden dies in der updateSVG() sehen. Ich wechselte auch nach Bedarf zu .attr().

follow ist eine hilfreiche Variable zu verfolgen, ob wir der Mausbewegung folgen sollten. Ein click Ereignis auf der svg schaltet diesen Wert um. Auch schalten wir es in start und wieder in stop.