Question

我正在拉斐尔画一条线。我有一个mousedown事件，我存储起始位置。当鼠标停止运行时，如果用户移动它，我会有一个mousemove事件，当鼠标移动时我会继续绘制线条。

现在释放鼠标按钮时，该行应该停止。即使按钮被释放，如果鼠标移动，也不会发生这种情况并继续行。此行必须在mouseup上停止。如果用户再次进行了mousedown，它应该开始一个新行。

我尝试过很多与unmouse *事件的组合，但我在这里遗漏了一些东西。

JSFiddle at：http://jsfiddle.net/zaphod013/P33FA/5/

（这是我与JS / Raphael的第一次约会。所以如果你认为我完全偏离这里，请告诉我）

var g_masterPaper;
var g_startX;
var g_startY;
var g_line;

function initDrawing() {
    g_masterPaper = Raphael(10,10,700,500);

    var masterBackground = g_masterPaper.rect(10,10,600,400);
    masterBackground.attr("fill", "#eee");

    var drawit = function(event) {
        x = event.pageX - 10;
        y = event.pageY - 10;
        var linepath = ("M"+g_startX+" "+g_startY+" L"+x+" "+y);
        g_line.attr("path", linepath);
    };

    var startit = function (event) {
        g_startX = event.pageX - 10;
        g_startY = event.pageY - 10;
        g_line = g_masterPaper.path("M"+g_startX+" "+g_startY+" L"+g_startX+" "+g_startY);
        masterBackground.mousemove(drawit);
    };

    masterBackground.mousedown(startit);
    masterBackground.mouseup(function (event) {
        this.unmousedown(startit);
        this.unmousemove(drawit);
    });

    return g_masterPaper;
}

window.onload = function () {
var paper=initDrawing();
paper.text(15,475,'Use your mouse to draw.').attr({fill:'#ff0000', 'font-size':24, 'stroke-width':1,'text-anchor':'start' });      
}

Answer 1

我认为你已经走上正轨并且看起来很好，我可能只是简化处理程序，而不是继续删除/添加它们，它使处理程序难以跟踪和调试。所以我只有一个处理器用于向下/向上/移动...

编辑： jsfiddle here或here可以捕获捕获mouseup事件的其他元素并使其正常工作。

var drawit = function(event) {
    event.preventDefault();

    x = event.pageX - 10;
    y = event.pageY - 10;
    var linepath = ("M"+g_startX+" "+g_startY+" L"+x+" "+y);
    if( g_line ) { g_line.attr("path", linepath) };
};

var startit = function (event) {
    event.preventDefault();
    g_startX = event.pageX - 10;
    g_startY = event.pageY - 10;
    g_line = g_masterPaper.path("M"+g_startX+" "+g_startY+" L"+g_startX+" "+g_startY);
};

var finish = function ( event ) {
    g_line = '';
}

Raphael：如何在mouseup上取消绑定mousemove功能？

1 个答案: