Как нарисовать линию на перетаскивании с помощью координат мыши

Я могу получить координаты мыши на mousedown и mouseup события. Теперь я хочу использовать эти координаты, чтобы нарисовать линию на mousemove (drag). Я пробовал с move,start,up, но это не сработало, поэтому я оставил его пустым.Как нарисовать линию на перетаскивании с помощью координат мыши

Вот jsbin демо: https://jsbin.com/kuhisesede/edit?html,console,output

Там нет событий мыши в Рафаила с, используя элемент. Я имею в виду, что я не могу получить координаты экрана в raphael только по событию клика. Щелчок всегда должен быть связан с элементом, например, прямоугольником или кругом, чтобы получить координаты.

Теперь, когда я могу получить координаты, как я рисую линию на мыши перетащить/мышь двигаться

Любые идеи, если какой-либо орган уже реализовали?

код:

<!doctype html> 
<html> 
    <head> 
     <title>Editor</title> 
     <meta http-equiv="x-ua-compatible" content="ie=9"/> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script> 
     <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
     <script type="text/javascript"> 
      window.onload = function() 
      { 
       var paper = new Raphael(Raphael("container", "100%", "100%")); 
       var line = paper.path(); 

       //Get coordinates 
       $("svg").mousedown(function (e) { 
        console.log("Mouse down: " + e.offsetX + " " + e.offsetY); 
        var x = e.offsetX; 
        var y = e.offsetY; 
        line = paper.path("M" + x + "," + y); 
       }); 
       $("svg").mouseup(function (e) { 
        console.log("Mouse up: " + e.offsetX + " " + e.offsetY); 
        var x = e.offsetX; 
        var y = e.offsetY; 
        line = paper.path("L" + x + "," + "L" + y); 
       }); 

       paper.set(line); 
       line.drag(move,start,up); 
       var start = function (x, y, event) 
       { 
        this.ox = this.attr("x"); 
        this.oy = this.attr("y"); 

       }, 
        move = function (dx, dy) 
       { 
        this.attr({ 
         x1: this.x + dx, 
         y1: this.x + dy 
        }); 

       }, 
        up = function() 
       { 

       }; 
      }; 
     </script> 
    </head> 
    <body> 
     <div id="container"> 
      <div id="header" style="margin-bottom: 0;"> 
       <h1 id="title">Editor</h1> 
       <div id="footer"></div> 
      </div> 
     </div> 
    </body> 
</html>

источник

2015-07-07 Anonymous

Я надеюсь, что это поможет Вам (или кому-либо еще).

<!doctype html> 
<html> 
<head> 
    <title>Editor</title> 
    <meta http-equiv="x-ua-compatible" content="ie=9"/> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
    <script type="text/javascript"> 
    var paper; 
    $(function(){ 
     paper = new Raphael("container", "100%", "100%"); 
     c = paper.circle(50, 50, 40).attr({fill: "#29ECC7", stroke: "none", opacity: .5}); 

     startPoint = {} 
     endPoint = {} 

     startDragFunction = function(x, y, e) { 
      startPoint.x = x; 
      startPoint.y = y; 
     } 
     endDragFunction = function(x, y, e) { 
      paper.path("M"+ startPoint.x +","+ startPoint.y +"L"+ (startPoint.x+endPoint.x) +","+(startPoint.y+endPoint.y)); 
     } 
     draggingFunction = function(x, y) { 
      endPoint.x = x; 
      endPoint.y = y; 
     } 
     paper.set(c).drag(draggingFunction, startDragFunction, endDragFunction); 
    }); 
    </script> 
</head> 
<body> 
    <div id="container"> 
     <div id="header" style="margin-bottom: 0;"> 
      <h1 id="title">Editor</h1> 
      <div id="footer"></div> 
     </div> 
    </div> 
</body> 
</html>

Несколько важных вещей, чтобы отметить:

Если вы хотите, чтобы иметь возможность перетащить некоторые Element он должен быть наполнен какой-то цвет (в противном случае вы не сможете перетащить его)
Я не обрабатывал перетаскивание или элемент, только чертеж линии.
Функция «drop» (endDragFunction) указывает только, что элемент был удален. У него нет информации о точке падения. Для этого мы используем функцию draggingFunction.
Значения x, y функции перетаскивания - это разность между исходной точкой.

источник

2015-07-07 22:14:34 Dekel

Как нарисовать линию на перетаскивании с помощью координат мыши

ответ

Смежные вопросы