0

キャンバスの平行移動と拡大縮小の後で、画像上でマウスをクリックしたときのxおよびyピクセル値を取得するにはどうすればよいですか？イベントxとyから必要な計算は何ですか？

私はこの回答のパンとズームのコードを使用しています：

var zoom = function(clicks) {
    var pt = ctx.transformedPoint(lastX,lastY);
    ctx.translate(pt.x,pt.y);
    var factor = Math.pow(scaleFactor,clicks);
    ctx.scale(factor,factor);
    ctx.translate(-pt.x,-pt.y);
    redraw();
}

var handleScroll = function(evt) {
    var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
    if (delta) zoom(delta);
    return evt.preventDefault() && false;
};

ウェブサイトの例

4

1 に答える 1

-3

クリック後にマウスの X と Y の位置を取得しようとしているだけの場合はmousedown、Javascript でイベントに関数を添付する必要があります。これは、イベント バインディングと呼ばれます。つまり、DOM では、ページ内の要素にイベントをバインドできます。 これは、要素にバインドされたイベントを示す私が作成した例です。#box

document.getElementById("box").onmousedown = function() {
    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY)     {
        posx = e.pageX;
        posy = e.pageY;
    }
    else if (e.clientX || e.clientY)     {
        posx = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
        posy = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
    }

    alert("Mouse x: " + posx + "\nMouse y: " + posy);
};​

このコードは、ID が の要素を検索しbox、マウスが押されるたびに関数内のコードを実行するように指示します。この例では、古いシステムにもフォールバックして、クロスプラットフォームおよびクロスブラウザーで動作することを確認します。このイベントを要素だけでなく Web ページ全体にバインドする場合はdocument.getElementById("box")、window.

ただし、これは DOM 要素内の相対位置を計算しません。ここでは詳しく説明しませんが、いくつかの方法を以下に示します。頑張ってください！

資力

于 2012-10-26T00:46:26.427 に答える