1

Raphael を使用して簡単な描画アプリを作成しています。現時点では、波線を描画しようとしています(これにはもっと良い言葉があります)ので、マウスダウンとマウスアップの間のすべての x と y をキャプチャしたいと思います。このスタックオーバーフローの質問jQuery 連続マウスダウンには、イベントの間に何かを行うための解決策がありますが、x と y を正しく動作させることができません。mousemove() を使用して取得しようとしていますが、関数が終了しても mousemove() は停止しません。そして、x と y が自分自身を呼び出す関数を持っていると、無限ループが発生します。つまり、x と y を継続的に取得する方法と、無限ループを回避する方法の 2 つです。私はそれを配列に入れて波線を作成する方法を知っていますが、マウスリスナーを行う方法は知りません。私が今持っているコードは次のとおりです。

var paper = new Raphael($('#canvas')[0], 500, 500);
var canvas =$('#canvas');

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
    whileDown();
});

function whileDown(){
    if(!stillDown){return;}else{
    console.log("Still in down.");
        canvas.mousemove(function(e){
        //console.log("X: " + e.offsetX + " Y: " + e.offsetY);
    });
    whileDown();
    }
}

canvas.mouseup(function(){
    stillDown = false;
});

私の現在の目標は、それがダウンしていること、すべての x と y がダウンしている間、それがアップしていること、そしてその後はコンソールに何も表示しないことです。次に、その情報を処理します。とにかく、どんな助けでも素晴らしいでしょう！

4

1 に答える 1

1

マウスダウンで、ブール値のフラグを設定するだけです:

var stillDown = false;
canvas.mousedown(function(){
    console.log("down");
    stillDown = true;
});

フラグが設定されている場合、mousemove で座標を配列にプッシュします。

var coords = [];
canvas.mousemove(function(e){
    if(!stillDown) return;
    console.log("moving");
    coords.push({x: e.offsetX, y: e.offsetY});
    // and/or do whatever you need with the coordinates  
}

マウスアップで、フラグの設定を解除します:

canvas.mouseup(function(){
    stillDown = false;
});
于 2013-04-03T04:08:55.167 に答える