获取鼠标在 canvas 中的位置
一般情况
一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove
(如果只需单击时的坐标,可以用 click
)事件。 当事件被触发时,我们可以获取鼠标相对于 viewport 的坐标(event.clientX
, event.clientY
)。 同时,我们可以通过 canvas.getBoundingClientRect() 来获取 canvas 相对于 viewport 的坐标,这样我们就可以计算出鼠标在 canvas 中的坐标。
canvas.addEventListener("click", function __handler__(evt) {
var x = evt.clientX;
var y = evt.clientY;
var rect = canvas.getBoundingClientRect();
x -= rect.left;
y -= rect.top;
console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标
});
** DEMO-1 **
设置了 border/padding
一般情况下,我们根据上面的方法获取出来的坐标是准确的,但当我们在 canvas 上添加了 border 或 padding 后,坐标就出现了偏移。
** DEMO-2-0 **
这是因为在 canvas 中,坐标区域是 canvas 元素的 content 区域,不包括 border 和 padding,而通过上面得到的坐标原点在 canvas 的 border 开始的。因此,这里还需要减去 border 和 padding。
var style = window.getComputedStyle(canvas, null);
var borderLeft = parseFloat(style["border-left-width"]);
var borderTop = parseFloat(style["border-top-width"]);
var paddingLeft = parseFloat(style["padding-left"]);
var paddingTop = parseFloat(style["padding-top"]);
canvas.addEventListener("click", function __handler__(evt) {
var x = evt.clientX;
var y = evt.clientY;
var rect = canvas.getBoundingClientRect();
x -= rect.left - borderLeft - paddingLeft; // 去除 borderLeft paddingLeft 后的坐标
y -= rect.top - borderTop - paddingTop; // 去除 borderLeft paddingLeft 后的坐标
console.log(x, y); // (x, y) 就是鼠标在 canvas 单击时的坐标
});
** DEMO-2-1 **
设置了 css width/height
当在 canvas 上设置了 css 的 width、height,并且与 canvas 的 width、height 属性不同时(可以非常简单对 canvas 进行放大或缩小,在移动页面上常常会使用)。从上面计算出来的坐标在 canvas 里使用又会出现偏移。
** DEMO-3-0 **
这里就需要对坐标进行修正:
var style = window.getComputedStyle(canvas, null);
var cssWidth = parseFloat(style["width"]);
var cssHeight = parseFloat(style["height"]);
var scaleX = canvas.width / cssWidth; // 水平方向的缩放因子
var scaleY = canvas.height / cssHeight; // 垂直方向的缩放因子
canvas.addEventListener("click", function __handler__(evt) {
var x = evt.clientX;
var y = evt.clientY;
var rect = canvas.getBoundingClientRect();
x -= rect.left;
y -= rect.top;
x *= scaleX; // 修正水平方向的坐标
y *= scaleY; // 修正垂直方向的坐标
console.log(x, y); // (x, y) canvas 里的坐标
});
** DEMO-3-1 **
设置了 transform
如果我们在 canvas 的 style 上添加了 transform,又有可能会导致上面计算出来的坐标出现偏移。
** DEMO-4-0 **
而且经过 transform 后很难通过已经的 API 来计算出准确的坐标?w3c 为了解决这个问题,在 CSSOM-View 中添加了一个名为 GeometryUtils 的接口,该接口提供了一系列的 api 帮助我们对页面上的点、矩形、四边形等的坐标进行转换(目前只有 Firefox 支持)。 这里我们使用其中的 convertPointFromNode
方法,直接把在 viewport 的坐标 (evt.clientX, evt.clientY)
转换成相对于 canvas 元素的坐标。 如果 canvas 同时设置了样式 width、height、box-sizing
,我们可以使用 getBoxQuads
方法来获取 canvas 经过 transform 之前的元素的 width
和 height
(虽然可以使用通过获取 style 的相关属性来计算,但这种方式太麻烦了)来计算出经过 css 缩放的因子。
var quads = canvas.getBoxQuads({
box: "content",
relativeTo: canvas
});
var bounds = quads[0];
var scaleX = canvas.width / bounds.width;
var scaleY = canvas.height / bounds.height;
canvas.addEventListener("click", function __handler__(evt) {
var {x, y} = canvas.convertPointFromNode({
x: evt.clientX,
y: evt.clientY
}, document, {
toBox: "content"
});
x *= scaleX;
y *= scaleY;
console.log(x, y);
});
** DEMO-4-1 **
在文章的最后,贴上另一种方法的解决方案:
** DEMO-4-2 **
获取鼠标在 canvas 中的位置的更多相关文章
- WPF中获取鼠标相对于屏幕的位置
原文:WPF中获取鼠标相对于屏幕的位置 WPF中获取鼠标相对于屏幕的位置 周银辉WPF编程时,我们经常使用Mouse.GetPosi ...
- Android 获取View在屏幕中的位置【转】
Android 获取View在屏幕中的位置 https://blog.csdn.net/lonely_fireworks/article/details/7849643
- 关于js获取元素在屏幕中的位置的方法
针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...
- C# 获取鼠标在屏幕上的位置
获取鼠标位置及鼠标单击了哪个按键.private void GetMousePoint() { Point ms = Control.MousePosition; this.label ...
- javascript 获取鼠标在盒子中的坐标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C# 如何获取鼠标在屏幕上的位置,不论程序是否为活动状态
一开始我认为应该使用HOOK来写,而且必须使用全局HOOK,结果在一次偶然的机会得到,原来其实根本没有那个必要. 直接上代码吧,一看就明白 Point ms = Control.MousePositi ...
- android 获取view在屏幕中的位置
使用view中的getLocationOnScreen方法,即可: final int[] locations = new int[2]; Button btn = (Button) findView ...
- javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)
界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...
- C# 图像处理:获取鼠标位置信息(全局)
Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...
随机推荐
- P6097-[模板]子集卷积
正题 题目链接:https://www.luogu.com.cn/problem/P6097 题目大意 长度为\(2^n\)的序列\(a,b\)求一个\(c\)满足 \[c_k=\sum_{i|j=k ...
- P6134-[JSOI2015]最小表示【bitset,拓扑排序】
正题 题目链接:https://www.luogu.com.cn/problem/P6134 题目大意 给出一张\(n\)个点\(m\)条边的\(DAG\).求联通情况不变的情况下最多删除几条边. \ ...
- python基础知识三——try与except处理异常语句
try/except介绍 与其他语言相同,在python中,try/except语句主要是用于处理程序正常执行过程中出现的一些异常情况,如语法错(python作为脚本语言没有编译的环节,在执行过程中对 ...
- 为什么'\x1B'.length===1?\x与\u知识延伸
背景 先讲一下背景,再说原因 大多数库都会在日志中使用chalk库为console的内容进行上色 被chalk处理后,其原本的内容会被'\x1B...'所包裹 console.log(chalk.bl ...
- JavaScript有同步任务和异步任务,浏览器是怎么处理的?
1.在讨论浏览器与JavaScript之前,我们先来简单了解一下进程与线程 进程(process):资源分配的最小单位 进程是应用程序的执行实例,是操作系统进行资源分配和调度的一个独立单位. 线程(t ...
- Idea进行java应用的远程调试Remote debugging
本文可以解决如下两个问题: 1.如何处理和调试那些只发生在生产环境(或其他远程环境)而本地开发环境可能没办法重现的"问题". 2.只有一个可以部署的war/jar包,只有class ...
- 洛谷4360[CEOI2004]锯木厂选址 (斜率优化+dp)
qwq 我感觉这都已经不算是斜率优化\(dp\)了,感觉更像是qwq一个\(下凸壳优化\)转移递推式子. qwq 首先我们先定义几个数组 \(sw[i]\)表示\(w[i]\)的前缀和 \(val[i ...
- Redis大集群扩容性能优化实践
一.背景 在现网环境,一些使用Redis集群的业务随着业务量的上涨,往往需要进行节点扩容操作. 之前有了解到运维同学对一些节点数比较大的Redis集群进行扩容操作后,业务侧反映集群性能下降,具体表现在 ...
- change or reset WSL password
change or reset WSL password To change or reset your password, open the Linux distribution and enter ...
- 在hive中使用COALESCE进行空值处理
COALESCE (expression_1, expression_2, ...,expression_n)依次参考各参数表达式,遇到非null值即停止并返回该值.如果所有的表达式都是空值,最终将返 ...