一般情况

一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove(如果只需单击时的坐标,可以用 click)事件。 当事件被触发时,我们可以获取鼠标相对于 viewport 的坐标(event.clientXevent.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 中的位置的更多相关文章

  1. WPF中获取鼠标相对于屏幕的位置

    原文:WPF中获取鼠标相对于屏幕的位置 WPF中获取鼠标相对于屏幕的位置                                   周银辉WPF编程时,我们经常使用Mouse.GetPosi ...

  2. Android 获取View在屏幕中的位置【转】

    Android 获取View在屏幕中的位置 https://blog.csdn.net/lonely_fireworks/article/details/7849643

  3. 关于js获取元素在屏幕中的位置的方法

    针对我们获取元素在页面中的位置的问题,我们还是用老师一峰老师的方法来解决吧 下面上HTML代码 <div class="left_footer"> <p data ...

  4. C# 获取鼠标在屏幕上的位置

    获取鼠标位置及鼠标单击了哪个按键.private void GetMousePoint() {     Point ms = Control.MousePosition;     this.label ...

  5. javascript 获取鼠标在盒子中的坐标

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. C# 如何获取鼠标在屏幕上的位置,不论程序是否为活动状态

    一开始我认为应该使用HOOK来写,而且必须使用全局HOOK,结果在一次偶然的机会得到,原来其实根本没有那个必要. 直接上代码吧,一看就明白 Point ms = Control.MousePositi ...

  7. android 获取view在屏幕中的位置

    使用view中的getLocationOnScreen方法,即可: final int[] locations = new int[2]; Button btn = (Button) findView ...

  8. javascript--鼠标拖拽窗口案例(鼠标按下,在鼠标移动过程中,盒子跟着一起移动,鼠标松开,盒子停止移动)

    界面如图所示: 要求:在“信息注册”栏,按下鼠标,然后鼠标在页面移动,在鼠标移动过程中,该窗口跟着鼠标移动,当鼠标松开的时候,窗口停止移动.点击“关闭”,该窗口隐藏. 实现思路: 1.页面结构分析:一 ...

  9. C# 图像处理:获取鼠标位置信息(全局)

    Point ms = Control.MousePosition; //获取鼠标位置 this.label2.Text = string.Format("{0}:{1}", ms. ...

随机推荐

  1. Redis分布式锁,看完不懂你打我

    简易的redis分布式锁 加锁: set key my_random_value NX PX 30000 这个命令比setnx好,因为可以同时设置过期时间.不设置过期时间,应用挂了,解不了锁,就一直锁 ...

  2. HCNP Routing&Switching之路由引入导致的问题及解决方案

    前文我们了解了路由引入相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15359902.html:今天我们来讨论下由于路由引入所导致的问题以及怎么避免此 ...

  3. HTML选择器的四种使用方法

    选择器<style> 为了让.html代码更加简洁,这里引入选择器style 本文总共介绍选择器的四种使用方式 一.选择器的四种形式 1.ID选择器 id表示身份,在页面元素中的id不允许 ...

  4. mysql从零开始之MySQL 创建数据库

    MySQL 创建数据库 我们可以在登陆 MySQL 服务后,使用 create 命令创建数据库,语法如下: CREATE DATABASE 数据库名; 以下命令简单的演示了创建数据库的过程,数据名为 ...

  5. mybatis 配置问题查找

    mybatis配置问题记录 org.apache.ibatis.binding.BindingException: Type interface com.xx.dao.UserDao(自己项目的文件) ...

  6. 理解hashMap

    首先需要理解几个基本概念: 什么是数据结构?(摘自 java数据结构系列--什么是数据结构 (baidu.com)) 数据结构是计算机组织.存储数据的方式.简单来说就是,数据按指定的规则进行存储,从而 ...

  7. Bayou复制分布式存储系统

    本文主要参考文献[1]完成. 第1章导读 Bayou是一个复制的.弱一致性的存储系统,用于移动计算环境.为了最大化可用性,Bayou为用户提供了可以任意读写访问的副本.Bayou的设计侧重于为应用程序 ...

  8. 41 位 Contributor 参与,1574 个 PR,不容错过的版本更新!

    6 月 25 日,在商业公司 SphereEx 正式成立一月之余的今天,我们很高兴的宣布 Apache ShardingSphere 迎来了 5.0.0-beta 版本的正式发布.经过半年多的优化和打 ...

  9. 新版发布|ShardingSphere 5.0.0-beta 来了!

    Apache ShardingSphere 5.0.0-beta 版在经过长达半年的筹备后,终于将在近期正式 Release! 本文将带领大家一同预览新版本即将带来哪些重大亮点功能. 作者介绍 潘娟 ...

  10. Java基础之(十二):数组

    数组 数组概述 定义 数组是相同类型数据的有序集合. 数组描述的是相同类型的若干数据,按照一定的先后次序排列组合而成. 其中,每一个数据称作一个数组元素,每个数组元素可以通过一个下标来访问它们. 数组 ...