Firefox中的event.offsetX [英] event.offsetX in Firefox
问题描述
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script language="javascript">
function main(){
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousemove", function(e){
if (!e) e = window.event;
var ctx = canvas.getContext("2d");
var x = e.offsetX;
var y = e.offsetY;
ctx.fillRect(x, y, 1, 1);
});
}
</script>
</head>
<body onload="main();">
<div style="width: 800px; height: 600px; -webkit-transform: scale(0.75,0.75); -moz-transform: scale(0.75,0.75)">
<canvas id="canvas" width="400px" height="400px" style="background-color: #cccccc;"></canvas>
</div>
</body>
</html>
请考虑以上快速而肮脏的示例。
请注意，我的画布包含在具有缩放变换的div中。
上面的代码完美地适用于任何基于Webkit的浏览器。移动鼠标时，它会在画布上绘制点。
不幸的是，它不在Firefox中，因为它的事件模型不支持offsetX / Y属性。
如何将鼠标坐标从（也许）的event.clientX（在firefox中也支持）转换成画布相对坐标，考虑到画布位置，变换等？
谢谢Luca。
Please consider the above quick and dirty example. Please notice that my canvas in contained by a div having a scale transform applied. The above code works perfectly on any webkit based browser. While moving the mouse it draws points on the canvas. Unfortunately it doesn't in Firefox as its event model does not support the offsetX / Y properties. How can I transform mouse coordinates from (perhaps) event.clientX (which is supported in firefox too) into canvas relative coordinates taking into account canvas position, transform etc? Thanks, Luca.
推荐答案
尝试layerX，layerY
Try layerX, layerY
var x = e.offsetX==undefined?e.layerX:e.offsetX;
var y = e.offsetY==undefined?e.layerY:e.offsetY;
这篇关于Firefox中的event.offsetX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
