个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
<!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>
请考虑上面的快速和肮脏的例子。请注意，我的 Canvas 包含在应用了缩放变换的 div 中。上面的代码在任何基于 webkit 的浏览器上都能完美运行。移动鼠标时，它会在 Canvas 上绘制点。不幸的是，它不在 Firefox 中，因为它的事件模型不支持 offsetX/Y 属性。如何将鼠标坐标从(可能)event.clientX(firefox 也支持)转换为 Canvas 相对坐标，同时考虑 Canvas 位置、变换等？谢谢，卢卡。
最佳答案
来自JQuery bug tracker page - 一个不错的 polyfill 是这样的:
var offX = (e.offsetX || e.pageX - $(e.target).offset().left);
.. 其中 e 是从 jquery 事件返回的事件。显然，只有当您的项目中已经安装了 Jquery 时，否则您将不得不手动执行 offset() 操作。
关于javascript - Firefox 中的 event.offsetX，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25470703/
25
4
0
你好，我正在尝试获取触摸事件的 offsetX,Y，它应该与鼠标事件的 offsetX 相同。为此，我使用了这段代码: ev.offsetX = ev.targetTouches[0].pageX-
所以我正在尝试求解一个涉及鼠标点击/触摸 Action 和移动交互的方程式。工作起来很像 slider ，但它会使动画逐帧运行，这就是为什么我只需要数字。
我正在开发一个视频进度条，它应该具有搜索(拖动或单击以搜索)的能力，我遇到的问题相当令人困惑，并且与进度条的拖动功能有关。 拖动进度条时，进度条将从鼠标的位置移动到进度条的开头，而不是保持在靠近鼠标位
当我将鼠标移到元素上时，我需要找到 offsetX 位置。问题是，当我移动鼠标时，我得到了内部存在的子元素的值。即使我在子目标中移动鼠标，是否可以识别我的主要对象的鼠标位置？ 我无法使用 event.
Insert title here function main(){ var canvas = document.getElementById("canvas"); canv
Insert title here function main(){ var canvas = document.getElementById("canvas"); canv
我正在开发一个工具，我希望在将鼠标悬停在 div 元素上时以百分比 (%) 格式显示 offsetX 和 offsetY 坐标。默认情况下，它采用像素格式。 index.html 文件:
popupWindow.showAsDropDown(morebutton, xOffset, yOffset); 无论xOffset的值如何，弹出窗口都在屏幕显示的右侧 final PopupWin
当我在 iPad 上尝试时，e.touches[0] 中没有 offsetX。有谁知道我在哪里可以获得 offsetX 的这个值？ 最佳答案 根据建议答案中的评论得出的正确答案: e.offsetX
我正在玩 HTML5 拖放并在拖动时跟踪鼠标位置。 OffsetX 和 OffsetY 工作得很好，直到你松开鼠标，偏移量在最后一次调度的拖动事件中跳转到负数 这是 html: 这是CSS: #d
采取以下fiddle . 它包含一个带有 3 个子 div 的父 div。单击监听器附加到父 div，并且应该在鼠标相对于父 div 的位置上发出警报: const parent = document
我有一个简单的 Sprite 表动画。 var data = { images: ["public/images/coin.png"], frames: {
我需要一个弹出 div，它将出现在我单击的 anchor 的正下方。现在，我想确定 anchor 的 onClick 事件的 x 和 y 坐标。这样做的最佳实践是什么？建议使用哪些事件属性？ 最佳答案
我正在 try catch touchstart 相对于元素 (".canvas") 的位置是否有可能捕获此事件 offsetX 和 offsetY？ $(".canvas").on("mousemo
当我遇到这个问题时，我一直在尝试构建一个视频播放器。我的视频播放器的控件在一个元素内，我将它们翻译成就在我视频的底部。然后我做了一个进度条，当用户点击时，它会填充到点击，然后用户可以移动他的鼠标(同时
我正在尝试使用 Javascript 在 SVG 元素上执行拖动/移动操作。我正在使用这样的事件处理程序: function handleMouseDown(evt) { cu
当我使用下面的 Javascript 代码时 function init() { var gameCanvas = document.getElementById("gameCanvas");
JavaScript有不同的坐标系，如e.clientX、e.screenX。 我很了解这两个，但还有一些像 e.layerX 和 e.offsetX。这两个我不是很清楚。 有人可以为我解释一下这两个
我在 mousedown 上获取 offsetX 时遇到问题。下面是我的代码 Click the text! The mouseDown() f
W3C CSSOM View Module draft defines MouseEvent 接口(interface)上的 offsetX 和 offsetY 属性。 这些对我来说似乎非常有用(我有
我是一名优秀的程序员,十分优秀！