javascript - HTML5 Canvas マウス座標

Question

要素を含む HTML ファイルがあり、イベント<canvas>でマウス座標を取得しようとしています。click私はこのコードを使用しています：

secondCanvas.addEventListener('click', function(e) {
    console.log(e.pageX)
}, false);

左上のポイントをクリックすると、コンソールに 0 ではなく 500~ の数値が表示されます...キャンバス上のマウスの座標を取得するにはどうすればよいですか?

Answer 1

イベント オフセット (e.pageXおよびe.pageY) からキャンバス要素のオフセットを差し引いて、キャンバス マウスの位置を計算する必要があります。dom 内の要素の位置を取得する方法を説明するリンク
を 次に示します。コードは次のようになります。

secondCanvas.addEventListener('click', function(e) {
   var pos = {
       x : e.pageX - canvasOffsetX,
       y : e.pageY - canvasOffsetY
   };
   console.log(pos.x)
}, false);

Answer 2

ページ座標を取得しているためです。2 つのキャンバスのいずれかで現在のマウスの位置が必要だと思いますか? うまくいけば、これで問題が解決します：

http://www.html5canvastutorials.com/advanced/html5-canvas-mouse-coordinates/

また、このスタックオーバーフローはあなたのものに似ており、理解を深めることができます: 周囲の要素が存在しない場合のキャンバスでのマウス位置の追跡

ユーザー別の解決策: lwburk

function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return { x: curleft, y: curtop };
    }
    return undefined;
}

$('#canvas').mousemove(function(e) {
    var pos = findPos(this);
    var x = e.pageX - pos.x;
    var y = e.pageY - pos.y;
    var coordinateDisplay = "x=" + x + ", y=" + y;
    writeCoordinateDisplay(coordinateDisplay);
});

Answer 3

私はこのコードを使用していますが、私にとっては完璧に機能します。キャンバス マウス イベントが追加されると、適切にマッピングされた canvasX と canvasY の 2 つの新しいプロパティが追加されます。canvas 要素を取得したら、canvas.extendMouseEvents() を呼び出すことを忘れないでください。

HTMLCanvasElement.prototype.extendMouseEvents = function() {
    this.mapMouseEvent = function(ev) {
        var r = this.getBoundingClientRect();
        ev.canvasX = ev.pageX - r.left;
        ev.canvasY = ev.pageY - r.top;
    };
    this.addEventListener("mousemove", this.mapMouseEvent);
    this.addEventListener("click", this.mapMouseEvent);
    this.addEventListener("contextmenu", this.mapMouseEvent);
    this.addEventListener("dblclick", this.mapMouseEvent);
    this.addEventListener("mousedown", this.mapMouseEvent);
    this.addEventListener("mouseenter", this.mapMouseEvent);
    this.addEventListener("mouseleave", this.mapMouseEvent);
    this.addEventListener("mouseover", this.mapMouseEvent);
    this.addEventListener("mouseout", this.mapMouseEvent);
    this.addEventListener("mouseup", this.mapMouseEvent);
}