0

簡単にするために、次のjavascriptとcssはChromeとFirefoxで正常に機能します。IEでテストした後、マウスポインターの変更など、マウスの位置に関連するコードをトリガーした後、Y値は完全に不安定になります。90ピクセルまたはほぼ2倍などを追加します。コードとスタイルは次のとおりです。

<style>
    #miContenedor{
        width:780px;
        height:1600px;
        margin:auto;
        margin-top:185px;
        position:relative;
        border: 4px solid black;
    }
    #miCanvas{
        background-image:url(Images/mat06pag34.png);
        background-repeat:no-repeat;
    }
</style>
<script>
canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.layerX;
    var posy = toi.layerY;
    if(toi.layerX == undefined || toi.layerY == undefined){
        posx = toi.offsetX;
        posy = toi.offsetY;
    }
}//ProcessClick

canvas.onmousemove = function(tamos){
    var posxX = tamos.layerX;
    var posyY = tamos.layerY;
    if(tamos.layerX == undefined || tamos.layerY == undefined){
        posxX = tamos.offsetX;
        posyY = tamos.offsetY;
    }
    var coords = posxX + "," + posyY; ctx.clearRect(700, 300, 80, 40); ctx.fillText(coords, 700, 320);
    if(posxX>=30 && posxX<=420 && posyY>=380 && posyY<=400){
        canvas.style.cursor = "help";
    }
    else{
        canvas.style.cursor = "default";
    }
}//onmousemove
</script>
4

1 に答える 1

0

私の座標を台無しにしたのはページのスクロールであることがわかりました。scrollLeftとscrollTopを試してみましたが、最終的にはもっと簡単な解決策が見つかりました。最初に offsetX/offsetY を試してから、layerX/layerY を試してください。

canvas.addEventListener('click',ProcessClick,false);
function ProcessClick(toi){
    var posx = toi.offsetX;
    var posy = toi.offsetY;
    if(toi.offsetX == undefined || toi.offsetY == undefined){
        posx = toi.layerX;
        posy = toi.layerY;
    }
    var coord = "Click en: " + posx + "," + posy;
    if(posx>=100 && posx<=200 && posy>=100 && posy<=200){
        ctx.clearRect(250, 235, 500, 30);
        ctx.fillText(coord, 250, 250);
    }
}//ProcessClick

canvas.onmousemove = function(tamos){
    var posxX = tamos.offsetX;
    var posyY = tamos.offsetY;
    if(tamos.offsetX == undefined || tamos.offsetY == undefined){
        posxX = tamos.layerX;
        posyY = tamos.layerY;
    }
    var coords = posxX + "," + posyY; ctx.clearRect(250, 335, 500, 30); ctx.fillText(coords, 250, 350);
    if(posxX>=100 && posxX<=200 && posyY>=100 && posyY<=200){
        canvas.style.cursor = "pointer";
    }
    else{
        canvas.style.cursor = "default";
    }
}//onmousemove
于 2013-01-19T22:46:49.143 に答える