0

マウス リスナーからマウス座標を取り込もうとしていますが、未定義になっています。マウス リスナーが Canvas に追加され、リスナーが onMouseMove 関数をトリガーしていますが、渡されたイベントにはマウス位置の x または y 座標が定義されていないようです。

次の変数を試しました: event.pageX、event.pageY、event.clientX、event.clientY、event.x、event.y

マウス座標が未定義になるために私が間違っていることについてのアイデアはありますか? 助けてくれてありがとう！

<script>
var boxes;
var canvas;
var context;

$(document).ready(function() {

    canvas = document.getElementById("requirement_tree");
    context = canvas.getContext("2d");

    // Add mouse listener
    canvas.addEventListener("mousemove", onMouseMove, false);
});

// Get the current position of the mouse within the provided canvas
function getMousePos(event) {
    var rect = canvas.getBoundingClientRect();


    if (event.pageX != undefined && event.pageY != undefined) {
        x = event.pageX;
        y = event.pageY;
    } else {
        x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
        y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }

    console.log("X:" + x);
    console.log("Y:" + y);

    return {
        X: x - rect.left,
        Y: y - rect.top
    };
}

function onMouseMove(event) {
    var mousePos = getMousePos(canvas, event);
    var message = 'Mouse position: ' + mousePos.X + ',' + mousePos.Y;
    context.font = '10pt Arial'
    context.fillStyle = 'black';
    context.textAlign = 'left';
    context.clearRect(0, 0, 200, 200);
    context.fillText(message, 100, 100);
}
</script>
4

1 に答える 1

0

少なくとも、mouseMove イベントのハンドラーにエラーがあります。handler の 2 番目の引数で送信されるイベント オブジェクト。

// ...
// Get the current position of the mouse within the provided canvas
function getMousePos(element, event) {
    var rect = canvas.getBoundingClientRect();
// ...
于 2013-11-14T13:49:38.977 に答える