我得到的mouseEvent.offsetX比实际的画布大小大得多 [英] The mouseEvent.offsetX I am getting is much larger than actual canvas size
问题描述
当我使用时，使用以下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 ;;
}
$ b b b b pre> < body>
< div id =mainScreen>
< div id =topScreen>
< h1 id =canvasWidth>得分：< / h1>
< h1 id =mouseX> 0< / h1>
< / div>
< div id =gameScreen>
< canvas id =gameCanvasonclick =init（）>
< / canvas>
< / div>
< / div>
< / body>
画布宽度显示为300，而保持在画布上的mouseX大大超过300.我已为其链接了屏幕截图。它在Chrome中正常工作，但它不会
在Internet Explorer和Windows应用商店应用程序中工作。
屏幕截图： http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae
指针位于靠近右边缘的地方，但它没有出现在屏幕截图中，这就是为什么我标记它。顶部的第一个数字是画布宽度，第二个数字表示指针offsetX。
为什么会发生这种情况，如何纠正？
更新（添加CSS代码）
Css代码
#mainScreen {
display：
-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;
}
$ b offsetX，
layerX，
pageX，
clientX，
screenX属性
这可能是有用的
MouseEventsProperties ....
不同的浏览器支持不同的属性
学习他们后，你会知道如何使用这些属性，所以你的应用程序适用于所有平台
好的，这里是一个代码（一个非常简化的版本），我在chrome，safari，firefox和甚至触摸设备，如iPad。
该代码将事件对象作为参数，它将返回具有相对于画布的X和Y的协调对象。
希望这将有助于...
containerX = document.getElementById（'container'）。offsetLeft;
containerY = document.getElementById（'container'）。offsetTop;
//这里容器是我的画布的id基本上以上两行是全局
//在我的代码
函数getX_Y（evt）{
var coord = {
X：null，
Y：null
}
var isTouchSupported ='ontouchstart'in window;
if（isTouchSupported）{//触摸设备
coord.X = evt.clientX-containerX;
coord.Y = evt.clientY-containerY;
return coord;
}
else if（evt.offsetX || evt.offsetX == 0）{//对于webkit浏览器，如safari和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;
}
}
When I use use the following Javascript code
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;;
}
with this 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>
The canvas width is showing up 300 while the mouseX which remains in the canvas goes much beyond 300. I have linked a screenshot for it. It works fine in Chrome but it doesn't work in Internet Explorer and in Windows store apps.
Screenshot: http://dc365.4shared.com/download/ajE0f2XQ?tsid=20130615-014658-676a63ae
The pointer was somewhere near the right edge but it didn't came in screenshot, that's why i marked it. The first number on the top is the canvas width and the second one shows pointer offsetX.
Why is this happening, how to correct it?
Update(Added CSS code)
Css code
#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;
}
See the difference between offsetX, layerX, pageX, clientX, screenX Properties This might be useful MouseEventsProperties.... Different browsers support different properties After learning about them you will get to know how to use these property so your application Works on all platforms
Okay so here is a code( a very simplified version) which I wrote and tested on the chrome,safari,firefox and even touch devices like iPad. The Code takes the event object as the argument and it will return you the coord object having the X and Y with respect to the canvas. Hope this will help...
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;
}
}
这篇关于我得到的mouseEvent.offsetX比实际的画布大小大得多的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
