首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取鼠标当前位置坐标

2017-03-01 10:08:42 在页面获取鼠标坐标通常有三种方式,这三种方式各有不同,所的的值也是不一样的。  首先是相对于页面的pageX和pageY。...这是一个IE特有的属性,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值 相对于坐标系的layerX/layerY。...FF特有,鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点也就是当触发元素设置了相对或者绝对定位后...完全支持所有属性.其中(offsetX和layerX都是以border为参考点) 下面这个是获取相对于屏幕的坐标 document.onmousemove = function(e) { e =

14.5K20
您找到你想要的搜索结果了吗?
是的
没有找到

『Three.js』辅助坐标

本文简介 点赞 + 关注 + 收藏 = 学会了 在日常开发和学习坐标轴能粗略的帮我们定位元素位置和关系。所以我使用 Three.js 学习和开发时基本都会打开坐标轴。...本文使用 Three.js 的版本:137 编码 在使用坐标轴之前,我们先创建一个元素,可以让我们更容易理解坐标轴。.../js/Three/Three.js' // 省略部分代码... // 创建坐标轴 const axes = new AxesHelper() // 将坐标轴添加到场景 scene.add...const axes = new AxesHelper(2) 此时的坐标轴看上去就比之前长很多了。 设置坐标轴颜色 从上面的案例可以发现,坐标轴默认的颜色是:红、绿、蓝。...这两种情况建议你自己手动测试,我在这里就不贴代码了~ 代码仓库 ⭐Three.js 坐标

2.2K20

2D坐标绘制旋转的椭圆-坐标变换

另外,矩阵乘法一般有硬件支持,比如3D 图形加速卡,处理3D变换的大量矩阵运算,比普通CPU 要快上1000倍。 下面是3类基本的2D图形变换。...平移: 设某点向x方向移动 dx, y方向移动 dy ,[x,y]为变换前坐标, [X,Y]为变换后坐标。...dx dy 1 旋转: 旋转相比平移稍稍复杂: 设某点与原点连线和X轴夹角为b度,以原点为圆心,逆时针转过a度 , 原点与该点连线长度为R, [x,y]为变换前坐标, [X,Y]为变换后坐标...0 0 1 缩放 设某点坐标,在x轴方向扩大 sx倍,y轴方向扩大 sy倍,[x,y]为变换前坐标, [X,Y]为变换后坐标。...《(计算)流体力学》的几个小程序,可在微信中点击体验: Blasius偏微分方程求解速度边界层 (理论这里) 理想流体在管道的有势流动 (源码戳这) 涡量-流函数法求解顶驱方腔流动

1K10

球心坐标与本地坐标

1球心坐标(ECEF)与本地坐标(NEU) 假如你来到一个陌生城市,你很可能需要问路、通常会告诉你向北走100米,右转,向东走100米,理解起来很直观。...比如前者是局部的平面坐标,而后者是球面坐标。因此,同一个点相对不同的原点,具有不同的相对位置:既是地球上的一个经纬度,又是“出门右转富士康”的这类的位置。...如图,蓝色坐标系就是球心坐标,而绿色坐标系是以球面一点为原点的本地坐标系。准确讲,就是该点对应球的切面和法线组成的空间。 ?...这自然引出了这个问题:如何从以球心为原点的球面坐标到以球面上任意一点为原点的局部坐标坐标系之间的转换,答案就是矩阵。 ? 坐标系的换算,其实就是坐标原点之间的转换。...Col Picture 矩阵之所以能够解决坐标转换问题,正是因为其Col Picture所体现的向量意义。现在,我们再体会一下之前的矩阵,是否有一点亲切。 ?

2.1K60

GPS坐标 转 火星坐标

无聊写了个应用叫做Find my car,但是获取到的坐标一个是标准的gps坐标,另外一个就是上面的图吧的坐标。...但是这个坐标直接在高德地图上标记却是错误的,于是就想办法看怎么转换下,不错这里直接有份源代码可以参考:猛击此处下载 这个项目引入了很多自定义的sqlite3的文件,其实没什么必要,改写一下就ok了。...#import #define DBNAME @"gps.db" //转换gps坐标为火星坐标 -(CLLocationCoordinate2D)zzTransGPS:(CLLocationCoordinate2D...return yGps; } 需要从上面的项目中下载gps.db ☆文章版权声明☆ * 网站名称:obaby@mars * 网址:https://h4ck.org.cn/ * 本文标题: 《GPS坐标...转 火星坐标》 * 本文链接:https://h4ck.org.cn/2014/09/gps%e5%9d%90%e6%a0%87-%e8%bd%ac-%e7%81%ab%e6%98%9f%e5%9d

1K20

【Android 应用开发】Android 组件 位置坐标 属性 ( 组件位置属性 | 父容器坐标坐标 | 窗口坐标坐标 | 屏幕坐标坐标 | 触摸坐标 )

View 组件 窗口坐标 属性 V . View 组件 屏幕坐标 属性 VI . View 组件的触摸位置 属性 VII . View 坐标获取 0 的解决方案 I ....: getLocationInWindow ; 屏幕坐标获取 : getLocationOnScreen ; 触摸坐标 : x , y 触摸坐标是相对于组件的坐标 , rawX , rawY 是相对于屏幕的坐标...该坐标是父容器坐标坐标 , 原点是父容器左上角位置 ; ② y : 表示组件左上角当前的实际位置的 y 坐标 , 该坐标是父容器坐标坐标 , 原点是父容器左上角位置 ; 3 ....View 组件的触摸位置 属性 ---- View 组件的触摸事件的位置属性 : ① x , y 相对于组件坐标 : 当触摸组件时 , 从 MotionEvent 事件获取的 x , y 坐标是 相对于本组件的坐标..., 即坐标系的原点 ( 0, 0 ) 是该组件的左上角位置 ; ② rawX , rawY 相对于屏幕坐标 : 从 MotionEvent 事件获取的 rawX , rawY 坐标 , 是当前触摸点相对于屏幕的坐标

3.9K10

SETTLE约束算法坐标变换问题

技术背景 在之前的两篇文章,我们分别讲解了SETTLE算法的原理和基本实现和SETTLE约束算法的批量化处理。...本文我们需要探讨的是该约束算法的一个细节,问题是这样定义的,给定坐标系XYZ下的两个已知三角形 和三角形 ,以三角形 构造一个平面 ,将 平移到三角形 的质心位置,作为新坐标系的...这样一来通过上一个章节的旋转矩阵的构造方法,我们就可以计算出所有的向量在两个坐标系下的旋转变换。...比如我们上述python代码的24、25、26都是对红色三角形的三个顶点关于质心的相对位置的坐标变换,在坐标变换前后,顶点坐标都需要减去质心的坐标。...如果是常规思路,可以先根据两个三角形之间的相对位置去计算一下在新坐标系下两个三角形的新的顶点坐标,从而可以取三个点来构造一个坐标变换矩阵,进而推广到所有向量在这两个坐标系之间的变换关系。

2.2K20

数字孪生园区场景坐标知识

② 在场景需要什么信息才能确定某个对象的位置?本期我们重点讲解一下园区场景坐标知识。...对比看看 3DsMax 里的坐标系:可以看出如果要把 Max 里的坐标 [x1,y1,z1] 转换到 ThingJS 需要 y 与z 互换后再取反,如下图:轴心点园区里摆放的物体可能是规则的,也可能是不规则的...使用场景:物体是独立的,它的运动不受场景其他物体的影响,只和整个场景有关系。...2、父物体坐标系当在场景创建了园区,在园区下放置一个飞机,飞机是园区的子物体,想在园区的坐标系下,设置飞机的位置,这时使用的园区的坐标系,就是飞机的父物体坐标系。...PS:当场景只有一个园区时,以园区为参考建立的坐标系 = 世界坐标系,也就是说:飞机在世界坐标系的坐标和父物体下的坐标值是一致的。

54420

眼动追踪坐标+追踪原理

主动显示坐标系 (ADCS) 大多数描述 3D 空间坐标的数据,来自 Tobii 的基于屏幕的眼动仪,都在所谓的用户坐标系或简称 UCS 给出。...在 SDK ,有一些方法可以找出轨道盒体积的大小和位置,以及眼睛在其中的位置。用于描述眼睛在轨迹框内的位置的坐标系称为轨迹框坐标系(TBCS)。...三个浮点值分别用于描述 x、y 和 z 坐标。对于基于屏幕的眼动仪,位置总是在用户坐标描述,有时在跟踪框坐标。...注视点的坐标在用户坐标作为 3D 点给出,在活动显示坐标作为归一化的 2D 点给出。 凝视矢量 对于基于 HMD 的眼动仪,没有活动显示区域,因此无法计算注视点(如上所述)。...结合上面的一些坐标空间的概念就可以看到这个东西的意思啦 我之前写过一个pupill的眼动仪,这个是单眼追踪的方案 (A)当以球形坐标表示地面真实注视方向dgt时,可以将其可视化为球体上的一个点(参见上下面板的蓝色圆盘

1.4K50

Threejs入门之二十二:Threejs的屏幕坐标转标准设备坐标

在上一节,我们在监听鼠标移动事件时,将其坐标范围处理为了[-1,1]的范围,使用如下代码document.addEventListener('mousemove',function( event )...标准坐标系我们之所以要进行上面的转换,这是因为在Three.jsCanvas画布具有一个标准设备坐标系,该坐标系的坐标原点在canvas画布的中间位置,x轴水平向右,y轴竖直向上。...HTML坐标系有前端基础的人都知道HTML中有四个坐标系,分别是screen,page,client和offset,他们用于描述DOM元素的Box尺寸和MouseEvent的位置 1 screen...4 offset 坐标原点:父级中最近的一个带有CSS定位(position为absolute/relative)的父元素,如果当前元素的父级元素没有进行CSS定位,那么就是body。...event.offsetX const oy = event.offsetY const cx = event.clientX const cy = event.clientY})屏幕坐标转换标准设备坐标在项目开发

1.9K10

D3.js库-7-坐标轴的使用

D3.js库-7-添加坐标坐标坐标轴是可视化图表中经常出现的一种图形,由一些刻度和线列段组成。D3是没有现成的坐标轴,SVG因而没有现成的图形元素,需要通过D3提供的其他组件来手动添加。...坐标轴构成 在SVG画布的预定义元素,有6种基本的图形: 矩形 圆形 椭圆 线段 折线 多边形 还有一种特殊的元素就是:路径path 几乎画布的所有图形都是由以上7种元素构成的。...上述元素没有坐标轴,采用类似的定义方式:将axis看做是一个标签,x1、x2等看做是它的一个个属性 ......D3提供了一个组件能够自动添加:d3.svg.axis() 每个分组g看做是一个刻度值和线段组成的group。 定义一个坐标轴 定义一个坐标轴需要使用上一篇文章中使用的比例尺。...text/javascript" src="http://d3js.org/d3.v5.min.js"> <svg width="960

3.1K10

laya2d 与 cad 之间的坐标转换 坐标系基本概念在 Laya 显示 cad 坐标对象

坐标系基本概念 直角坐标系可分为左手坐标系与右手坐标系,cad 中用到的是右手坐标系, Laya2D 中用到的是左手坐标系, Laya3D 中使用右手坐标系。...在 Laya 显示 cad 坐标对象 基本原则:不改变数据坐标,改变Laya 容器坐标。...保持根容器不变,变换子容器坐标原点位置 缩放子容器坐标比例 // 例如,我们 Laya 容器坐标系位置变换为屏幕左下角开始的右手坐标系 let drawingSp = new Laya.Sprite()...轴反向 drawingSp.scale(1, -1); // 将 drawingSp 加入根容器 Laya.stage.addChild(rootSp); 通过上面的变换处理,将 drawingSp 坐标系改为原点为平面左下方的右手坐标系...同理,我们也可以通过对容器的坐标平移、缩放等变换处理, 在当前屏幕,显示传入的全部数据, 代码如下: let drawingSp = new Laya.sprite(); // 不对 drawing

1.6K30

教程 | OpenCV4的极坐标变换

以下文章来源于小白学视觉,作者小白 来源:公众号 小白学视觉 授权转 极坐标变换就是将图像在直角坐标系与极坐标互相变换,形式如图3-26所示,它可以将一圆形图像变换成一个矩形图像,常用于处理钟表、...图3-26 极坐标变换示意图 OpenCV 4提供了warpPolar()函数用于实现图像的极坐标变换,该函数的函数原型在代码清单3-38给出。...flags: 插值方法与极坐标映射方法标志,插值方法在表3-3给出,极坐标映射方法在表3-7给出,两个方法之间通过“+”或者“|”号进行连接。 该函数实现了图像极坐标变换和半对数极坐标变换。...第四个参数是极坐标变换时极坐标原点在原图像的位置,该参数同样适用于逆变换。第五个参数是变换时边界圆的半径,它也决定了逆变换时的比例参数。...Point2f center = Point2f(img.cols / 2, img.rows/2); //极坐标在图像的原点 18. //正极坐标变换 19.

3.8K20

屏幕坐标与客户坐标的区别

屏幕坐标是相对于屏幕左上角(0,0)位置的坐标,客户坐标是相对于某个窗口客户区左上角的坐标,当谈到客户坐标时需要说明是相对哪个窗口的客户坐标。 ?...如上图,点A(屏幕左上角),点B(应用主窗口客户区左上角),控件1的C点的屏幕坐标和客户坐标是不同的,屏幕坐标是相对于A点坐标(50,100),客户坐标(相对于父窗口)是相对于B点坐标(20,50)。...Windows有五个API跟屏幕坐标、客户坐标有关,要注意区分。...第三,ScreenToClient(HWND, LPPOINT) 将屏幕坐标转换为相对于指定窗口的客户坐标。...笔者开发过程误以为GetWindowRect()返回的坐标跟窗口类型有关,如果窗口是子窗口(控件)时是客户坐标,缺少调用ScreenToClient()接口,导致位置不对。

2K30
领券