1

キャンバスに相対的な X、Y 座標を取得したいと思います (マウス移動イベントで)。

私はこれを使用しています：

<canvas id='c' onmousemove="xy(event)" WIDTH=500 HEIGHT=300>

js:

function xy(e)
{
    x = e.offsetX||e.layerX;
    y = e.offsetY||e.layerY;
}

これは Chrome ではうまく機能しますが、Firefox では機能しません。canvas 要素が 0,0 の位置にある場合、Firefox でも機能します。

これを見てください：http://jsbin.com/ozowaz/10

FFでも動作させるにはどうすればよいですか？

4

4 に答える 4

4

コンテナには

position: relative;

スタイル。座標で +n px (n= ボーダー サイズ) を意味するため、ボーダーのスタイリングにそのコンテナーを使用しないでください。

おかげで: http://dev.opera.com/articles/view/html5-canvas-painting/

于 2012-08-08T14:43:13.787 に答える
1

あなたはそれを計算しようとすることができます：

// ...
var x = e.pageX - canvas.offsetTop;

canvas は canvas dom 要素です。それはFFで動作するはずです。

于 2012-08-08T14:11:59.740 に答える
1

@2astalavista評判のためにコメントできないので、これをここに入れますが、これを行うことは想定されていません。

私は受け入れられた答えを試しましたが、キャンバスの左/上に配置された他の要素からの問題のみを解決します。私にとっては、キャンバスの余白は考慮されていませんでした。私がそれを正しくやったかどうかはわかりません。また、Html 側のソリューションのアイデアも好きではありません。誰かが Html を変更し、"position: relative;" を忘れています。その結果、追跡がほとんど不可能なバグが発生します。

Nech のソリューションを使用しましたが、要素をキャンバスの左または上に配置すると正しく機能しないことに気付きました。キャンバスのマージンなどのみが考慮されます。

私は次のコードで回避しました.Chromeの部分と比較して、Firefoxの部分はまだ約95〜99％の正確さです. しかし、それは仕事を成し遂げます：

function getEventX(event){
    if (event.offsetX) {
        return event.offsetX;
    }
    if (event.clientX) {
        var currentElement = event.currentTarget;
        var offsetLeft = currentElement.offsetLeft;

        while(currentElement.parentElement && currentElement.parentElement.offsetLeft){
            currentElement = currentElement.parentElement;
            offsetLeft += currentElement.offsetLeft;
        }     

        return event.clientX - offsetLeft;
    }
    return null;
};

function getEventY(event){
    if (event.offsetY) {
        return event.offsetY;
    }
    if (event.clientY) {
        var currentElement = event.currentTarget;
        var offsetTop = currentElement.offsetTop;

        while(currentElement.parentElement && currentElement.parentElement.offsetTop){
            currentElement = currentElement.parentElement;
            offsetTop += currentElement.offsetTop;
        }     

        return event.clientY - offsetTop;  
    }
    return null;
};

関数に渡されるキャンバスも削除しました。次のコマンドでキャンバスを取得できます。

event.currentTarget;

複数のキャンバスを扱う場合はおそらくより良いでしょう。

于 2014-06-04T07:47:32.550 に答える
1

これは私のために働いた（純粋なjs）

function getX(event, canvas){
     if(event.offsetX){
       return event.offsetX;
     }
     if(event.clientX){
     return event.clientX - canvas.offsetLeft;
     }
    return null;
 }

function getY(event, canvas){
    if(event.offsetY){//chrome and IE
        return event.offsetY;
    }
    if(event.clientY){// FF
        return event.clientY- canvas.offsetTop;
    }
    return null;    
}
于 2014-02-16T12:05:08.953 に答える