admin管理员组文章数量:1355555
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:
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;
}
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./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;
}
- Anything of help here: stackoverflow./questions/55677/… – Matthew Gilliard Commented Jun 14, 2013 at 10:50
- Thanks, but it didn't helped. – Abhishek Verma Commented Jun 14, 2013 at 14:24
1 Answer
Reset to default 6See 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;
}
}
本文标签： javascriptThe mouseEventoffsetX I am getting is much larger than actual canvas sizeStack Overflow
版权声明：本文标题：javascript - The mouseEvent.offsetX I am getting is much larger than actual canvas size - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744039426a2580388.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论