6

私が使用するときは、次のJavascriptコードを使用します

function init() {
    var gameCanvas = document.getElementById("gameCanvas");
    document.getElementById("canvasWidth").innerHTML = gameCanvas.width;

    gameCanvas.addEventListener("mousemove", handleMouseEvent);
}


function handleMouseEvent(mouseEvent) {
    document.getElementById("mouseX").innerHTML = mouseEvent.offsetX;;
}

このhtmlで

<body>
    <div id="mainScreen">
        <div id="topScreen">
        <h1 id="canvasWidth">Score:</h1>
        <h1 id="mouseX">0</h1>
        </div>
        <div id="gameScreen">
            <canvas id="gameCanvas" onclick="init()">               
            </canvas>
        </div>
    </div>
</body>

キャンバスの幅は 300 に表示されていますが、キャンバスに残っている mouseX は 300 をはるかに超えています。スクリーンショットをリンクしました。Chrome では正常に動作しますが、Internet Explorer と Windows ストア アプリでは動作しません。

スクリーンショット: http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae

ポインターは右端近くにありましたが、スクリーンショットには表示されませんでした。そのため、マークを付けました。上部の最初の数値はキャンバスの幅で、2 番目の数値はポインターの offsetX を示しています。

なぜこれが起こっているのですか、どうすれば修正できますか？

更新(CSSコード追加)

CSS コード

#mainScreen {
    display: -ms-grid;
    -ms-grid-columns: 30px 1fr 30px;
    -ms-grid-rows: 30px 100px 20px 1fr 30px;
    height:inherit;
}

#topScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 2;
    -ms-grid-columns: 30px 150px 30px 60px 100px 1fr 30px;
    -ms-grid-rows: 20px 1fr 20px;
}

#canvasWidth {
    display: -ms-grid;
    -ms-grid-row: 2;
    -ms-grid-column: 2;
}

#mouseX {
    display: -ms-grid;
    -ms-grid-column: 4;
    -ms-grid-row: 2;
}

#gameScreen {
    display: -ms-grid;
    -ms-grid-column: 2;
    -ms-grid-row: 4;
    -ms-grid-rows:1fr;
    -ms-grid-columns: 1fr;
    height:inherit;
    width:inherit;
}
#gameCanvas {
    height:inherit;
    width:inherit;
    background-color:white;
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
4

1 に答える 1

6

offsetX、layerX、pageX、clientX、screenX プロパティの違いを確認してください これは役に立つかもしれません MouseEventsProperties .... 異なるブラウザは異なるプロパティをサポートします それらについて学習した後、これらのプロパティを使用してアプリケーションがすべてのプラットフォームで動作するようにする方法を知ることができます

さて、これは私が書いてクロム、サファリ、ファイアフォックス、さらにはiPadのようなタッチデバイスでテストしたコード（非常に単純化されたバージョン）です。コードはイベント オブジェクトを引数として取り、キャンバスに対して X と Y を持つ coord オブジェクトを返します。これが役立つことを願っています...

containerX = document.getElementById('container').offsetLeft;
containerY = document.getElementById('container').offsetTop;
//here container is the id of my canvas basically the above two lines are global 
// in my code 

function getX_Y(evt){
var coord={
    X: null,
    Y: null
}
var isTouchSupported = 'ontouchstart' in window;
if(isTouchSupported){                     // for touch devices
    coord.X = evt.clientX-containerX;
    coord.Y = evt.clientY-containerY;
    return coord;
}

else if(evt.offsetX || evt.offsetX == 0){    //for webkit browser like safari and chrome
    coord.X = evt.offsetX;
    coord.Y = evt.offsetY;
    return coord;
}

else if(evt.layerX || evt.layerX == 0){      // for mozilla firefox
    coord.X = evt.layerX;
    coord.Y = evt.layerY;
    return coord;
}
}
于 2013-06-14T12:04:07.860 に答える