鼠标在窗口中的坐标转换到 canvas 中的坐标

由于需要用到isPointInPath函数,所以必须得将鼠标在窗口中的坐标位置转换到canvas画布中的坐标,今天发现网上这种非常常见的写法其实是错误的!

代码如下:

1.function windowTocanvas(canvas, x, y) {
2. var bbox = canvas.getBoundingClientRect();
3. return {
4. x: x - bbox.left * (canvas.width / bbox.width),
5. y: y - bbox.top * (canvas.height / bbox.height)
6. };
7.}

什么时候会发生错误呢?
看下面的LiveScript代码

1.canvas = document.querySelector \canvas
2.ctx = canvas.getContext \2d
3.dpr = window.devicePixelRatio || 1
4.width = parseInt canvas.style.width
5.height = parseInt canvas.style.height
6.canvas.width = width * dpr
7.canvas.height = height * dpr
8.ctx.scale dpr, dpr

当用到window.devicePixelRatio的时候,会出现鼠标命明明击中了path,却出现isPointInPath却报false的情况。

真正的window2canvas写法应该如下:

1.window2canvas = (e) ->
2. rect = canvas.getBoundingClientRect!
3. x = (e.clientX - rect.left) * canvas.width / rect.width
4. y = (e.clientY - rect.top ) * canvas.height / rect.height
5. {x, y}
 
 

鼠标在窗口中的坐标转换到 canvas 中的坐标的更多相关文章

  1. Canvas中鼠标获取元素并拖动技术

    Silverlight拖动,需要Canvas. Canvas管网定义: 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素. XAML <Canvas ...> oneOrM ...

  2. 我在tmux中最不可少的配置: 用鼠标切换窗口/调节分屏大小

    前两天在给另外一个团队帮忙时,看他们在Rails日志.代码文件.git文件系统里面来回穿梭,觉得他们太累了,于是就介绍了 tmux 给他们用.但只讲了一点基本的开窗口.分屏,没给讲太多技巧,因为一下子 ...

  3. Duilib 实现右下角弹出像QQ新闻窗口,3秒后窗口透明度渐变最后关闭,若在渐变过程中鼠标放到窗口上,窗口恢复最初状态(二)

    效果: 1.定义两个个定时器ID #define ID_TIMER_DISPLAY_DELAY 30 #define ID_TIMER_DISPLAY_CLOSE 40 2.添加一个成员函数和成员变量 ...

  4. 获取鼠标在 canvas 中的位置

    一般情况 一般情况下,如果需要在 canvas 中获取鼠标指针坐标,可以通过监听鼠标的 mousemove(如果只需单击时的坐标,可以用 click)事件. 当事件被触发时,我们可以获取鼠标相对于 v ...

  5. (转)ARCGIS中坐标转换及地理坐标、投影坐标的定义

    原文地址:http://blog.sina.com.cn/s/blog_663d9a1f01017cyz.html 1.动态投影(ArcMap) 所谓动态投影指,ArcMap中的Data 的空间参考或 ...

  6. WPF在Canvas中绘图实现折线统计图

    最近在WPF中做一个需要实现统计的功能,其中需要用到统计图,之前也没有接触过,度娘上大多都是各种收费或者免费的第三方控件,不想用第三方控件那就自己画一个吧. 在园子还找到一篇文章,思路来自这篇文章,文 ...

  7. C# 调用windows api 操作鼠标、键盘、窗体合集...更新中

    鼠标操作window窗体合集...更新中 1.根据句柄查找窗体 引自http://www.2cto.com/kf/201410/343342.html 使用SPY++工具获取窗体   首先打开spy+ ...

  8. Canvas中图片翻转的应用

    很多时候拿到的素材都是单方向的,需要将其手动翻转来达到需求,比如下面这张图片: 它是朝右边方向的,但还需要一张朝左边方向的,于是不得不打开PS将其翻转然后做成雪碧图.如果只是一张图片还好说,但通常情况 ...

  9. WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里?

    原文:WPF 程序鼠标在窗口之外的时候,控件拿到的鼠标位置在哪里? 在 WPF 程序中,我们有 Mouse.GetPosition(IInputElement relativeTo) 方法可以拿到鼠标 ...

随机推荐

  1. MapReduce的编程思想(1)

    MapReduce的编程思想(1) MapReduce的过程(2) 1. MapReduce采用分而治之的思想,将数据处理拆分为主要的Map(映射)与Reduce(化简)两步,MapReduce操作数 ...

  2. winform ListView创建columnHeader的方法

    using System; using System.Windows.Forms; using System.Drawing; using System.Collections; namespace ...

  3. hiho一下 第四十四周 博弈游戏·Nim游戏(直接公式解)

    证明看这http://hihocoder.com/contest/hiho44/problem/1 思路: 设 sg=a[1]^a[2]^...a[n],若sg=0,则先手Alice必败,否则必赢. ...

  4. python爬虫之路——正则表达式初识

    正则表达式:是一个特殊的符号系列,检查字符串是否与指定模式匹配. python中的re模块拥有全部的正则表达式功能. 判断字符: 类型: 数目:有无:   个数:单值     区间      离散 判 ...

  5. windows10下安装TensorFlow Object Detection API

    由于官方的文件都是在乌班图和mac系统下的,就上网搜了以下. 按照下边这个博客安装成功了 https://blog.csdn.net/qq_28019591/article/details/82023 ...

  6. C#链接mysql 新手容易出错的问题

    1.Access denied for user 'root'@'DESKTOP-AN72KEI' (using password: YES) 出现这个问题的原因是因为mysql的自带用户root理论 ...

  7. UVA 1451 Average平均值 (数形结合,斜率优化)

    摘要:数形结合,斜率优化,单调队列. 题意:求一个长度为n的01串的子串,子串长度至少为L,平均值应该尽量大,多个满足条件取长度最短,还有多个的话,取起点最靠左. 求出前缀和S[i],令点Pi表示(i ...

  8. Java 集合框架_中

    Set接口 特点: [1]Set接口表示一个唯一.无序的容器(和添加顺序无关) Set接口常用实现类有 HashSet [1]HashSet是Set接口的实现类,底层数据结构是哈希表. [2]Hash ...

  9. datatable css not work

    样式不显示问题 无论是放内联样式文件还是直接放HTML文件都不显示 后来发现是因为datatable是放在后面初始化,它自带的样式覆盖了我们自定义的样式 所以要注意写code时,很多时候不是code不 ...

  10. 禁止按键F5和禁止鼠标右键菜单 js代码

    <script language="javascript"> //禁止按键F5 document.onkeydown = function(e){ e = window ...