How to draw line on drag using mouse coordinates

Question

I am able to get the mouse coordinates on mousedown and mouseup events. Now I want to use these coordinates to draw a line on mousemove(drag). I tried with move,start,up but it didn't work so I left it blank for now.

Here's the jsbin demo: https://jsbin.com/kuhisesede/edit?html,console,output

There's no click event in raphael with out using element. I mean I cannot get coordinates of screen in raphael just by click event. The click always has to be associated with a element like rectangle or circle to get the coordinates.

Now that I am able to get the coordinates, how do I draw a line on mouse drag/mouse move

Any ideas if any body already implemented it?

code:

<!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>

Answer 1

I hope this will help you (or someone else).

<!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>

A few important things to note:

If you want to be able to drag some Element it has to be filled with some color (otherwise you wont be able to drag it)
I didn't handle the dragging or the element, only the drawing of the line.
The "drop" function (endDragFunction) only indicate that the element was dropped. It has no information regarding the drop-point. For this we use the draggingFunction.
The x, y values of the dragging function are the diff from the original point.

How to draw line on drag using mouse coordinates

Question

1 answers

solution1
2 2015-07-07 22:14:34

How to draw line on drag using mouse coordinates

Question

1 answers

solution1 2 2015-07-07 22:14:34

solution1
2 2015-07-07 22:14:34