Question

这就是我的尝试：

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

这是现场演示：https://jsbin.com/giqufilusu/1/edit?html,output

我不知道为什么它不起作用。是否存在语法问题或者我没有以正确的方式编码。网上有一些例子，但大多数都使用jquery + raphael js来绘制鼠标事件线，但我想用drag() raphael方法绘制。我该如何解决这个问题？

Answer 1

我不知道我是否帮助你。

我想this是你想要达到的目标吗？

您仅在start函数的范围内定义了line变量。要调整线路，您需要使其适用于所有功能。 jsBin是一种快速而肮脏的方法，它可以提示你如何使用Raphael进行这种线条绘制。

在raphael js中拖动鼠标拖动线

1 个答案: