CODEWITHSUNDEEP
javascriptjquerysvgraphaeljquery-svg
user2046417
user2046417

Reputation:

How to draw line on drag using mouse coordinates

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>

Upvotes: 0

Views: 4229

Answers (1)

Dekel
Dekel

Reputation: 62536

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:

  1. 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)
  2. I didn't handle the dragging or the element, only the drawing of the line.
  3. 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.
  4. The x, y values of the dragging function are the diff from the original point.

Upvotes: 2

Related Questions