Question

我可以在mousedown和mouseup事件中获取鼠标坐标。现在我想使用这些坐标在mousemove上绘制一条线（拖动）。我尝试使用move,start,up，但它没有用，所以我暂时把它留空了。

这是jsbin演示：https://jsbin.com/kuhisesede/edit?html,console,output

raphael中没有使用元素的点击事件。我的意思是我无法通过点击事件获得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>

Answer 1

我希望这会对你（或其他人）有所帮助。

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

需要注意的一些重要事项：

如果你想能够拖动一些元素，它必须填充一些颜色（否则你将无法拖动它）
我没有处理拖动或元素，只处理线条的绘制。
＆＃34; drop＆＃34; function（endDragFunction）仅指示元素已被删除。它没有关于丢弃点的信息。为此，我们使用draggingFunction。
拖动功能的x，y值是原点的差异。

如何使用鼠标坐标在拖动上绘制线条

1 个答案: