draw line on mouse drag in raphael js

问题

This is what I have tried:

 <!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="<%=request.getContextPath()%>/connector.js"></script>
            <link rel="stylesheet" href="<%=request.getContextPath()%>/style.css" />

            <script type="text/javascript">
                window.onload = function ()
        {
            var paper = new Raphael(Raphael("container", "100%", "100%"));
            var line = paper.path();
            var start = function (x, y) {
                this.ox = this.attr("x");
                this.oy = this.attr("y");
                var line = paper.path("M", this.ox, this.oy);
            },
                    move = function (dx, dy) {
                        this.attr({
                            x: this.ox + dx,
                            y: this.oy + dy
                        });
                       paper.path("L",x,y);
                    },
                    up = function () {
                        this.animate({
                            opacity: 0
                        }, 500);
                    };
                    paper.set(line).drag(move, start, up);
        };
            </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>

Here's the live demo: https://jsbin.com/giqufilusu/1/edit?html,output

I don't know why its not working. Is there a syntax problem or I didn't code the correct way. There are some examples on web but most of them use jquery + raphael js to draw line on mouse events but I want to draw with drag() method of raphael. How do I fix this?

回答1:

I don't know if I got you right.

I guess this is what you want to achieve?

You defined the line variable only in the scope of the start function. To adapt the line you need to make it available to all functions. The jsBin is a quick and dirty approach which should give you a hint how you can do this line drawing with Raphael.

来源：https://stackoverflow.com/questions/31233474/draw-line-on-mouse-drag-in-raphael-js

标签

svg

raphael