0

javascript のキャンバスにカードの画像をドラッグ アンド ドロップしようとしていますが、main() 内にあるにもかかわらず、mouseup イベントが機能していないようです。カードが選択されると、マウスの周りをたどりますが、マウスを離しても手放すようには見えません。また、画面をクリアしないことから画像が繰り返されることも知っています。

function main(){
var ctx = cvs.getContext("2d");
var img = new Image();
img.src = "allcards.png";
var imgX = 75;
var imgY = 75;
draw();

function draw(){
    ctx.drawImage(img,0,0,97,129,imgX,imgY,100,100);    
}

cvs.addEventListener("mouseup", function(ev){
        greaterX = false;
        lessX = false;
        greaterY = false;
        lessY = false;
    }
);

cvs.addEventListener("mousedown", function(ev){
        if(ev.clientX <= (imgX + 97)){
            var greaterX = true;
        }
        if(ev.clientY <= (imgY + 129)){
            var greaterY = true;
        }
        if(ev.clientX >= imgX){
            var lessX = true;
        }
        if(ev.clientY >= imgY){
            var lessY = true;
        }
        if(greaterX == true)
            if(greaterY == true)
                if(lessX == true)
                    if(lessY == true)
                        cvs.addEventListener("mousemove", function(ev){
                            var offsetX = (ev.clientX - imgX);
                            var offsetY = (ev.clientY - imgY);
                            imgX = imgX + offsetX;
                            imgY = imgY + offsetY;
                            draw();
                        });
    });
};
4

1 に答える 1

3

greaterX、lessXなどはすべて関数var内で定義されますmousedown。つまり、スコープはmousedown関数のみに限定されます。

したがって、それらを関数false内に戻そうとしても無駄です。mouseup関数のメイン部分で変数を宣言する必要があります。

function main() {
    var greaterX, lessX, greaterY, lessY;
    var ctx = cvs.getContext("2D");
    //etc...

greaterX、などを false に戻すだけlessXでは十分ではありません。mousemove内部のイベント チェッカーmousedownがまだアクティブなためです。イベントリスナーを適用すると、削除するまでそこに残ります。

したがって、次のステップは、mousemoveイベント関数を独自の関数に分離し (名前に「mouseMoveHandler」を使用しました)、 の.removeEventListener(type, listener, useCapture)内部を使用してイベント リスナーを削除することですmouseup。

mousemove機能:

function mouseMoveHandler(ev) {
    offsetX = (ev.clientX - imgX);
    offsetY = (ev.clientY - imgY);
    imgX = imgX + offsetX;
    imgY = imgY + offsetY;
    draw();
}

機能(mousedown重要な部分):

  if (greaterX === true) { //you need the brackets for multi-line if statements
        if (greaterY === true) {
            if (lessX === true) {
                if (lessY === true) {
                    cvs.addEventListener("mousemove",mouseMoveHandler,false);
                }
            }
        }
    }

最後に、mouseup関数:

cvs.addEventListener("mouseup", function(ev) {
    greaterX = false;
    lessX = false;
    greaterY = false;
    lessY = false;
    cvs.removeEventListener('mousemove',mouseMoveHandler,false);
});

これはソリューションを備えたjsFiddleですが、画像は使用していません。

于 2012-08-28T03:25:43.093 に答える