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

js获取鼠标当前位置坐标

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

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

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

屏幕坐标是相对于屏幕左上角(0,0)位置的坐标,客户坐标是相对于某个窗口客户区左上角的坐标,当谈到客户坐标时需要说明是相对哪个窗口的客户坐标。 ?...如上图,点A(屏幕左上角),点B(应用主窗口客户区左上角),控件1的C点的屏幕坐标和客户坐标是不同的,屏幕坐标是相对于A点坐标(50,100),客户坐标(相对于父窗口)是相对于B点坐标(20,50)。...第一,GetWindowRect(HWND, LPRECT) 获取指定窗口在屏幕的位置,要特别注意该窗口不区分POPUP窗口还是子窗口(子控件)。...通过控件1的位置向右平移计算控件2的位置并创建,步骤如下: 第一,调GetWindowRect()指定控件1的句柄,获取控件1的屏幕坐标。...第二,调ScreenToClient()指定父窗口句柄,获取控件1在父窗口的客户坐标

2K30

Unity ugui屏幕适配与世界坐标到ugui屏幕坐标的转换

下面来讨论进行过缩放后的ugui中如何显示指定三维世界坐标位置的点。...我们知道,一个点要在屏幕当中显示,需要经历以下坐标系的转换,首先转化为场景空间的世界坐标,然后转化为观察空间的坐标(摄像机坐标),此时Z轴的值代表摄像机的深度值。...得到观察空间的坐标后,就可以很方便的按照屏幕分辨率的值进行转化了,从而得到屏幕空间的坐标。如果是在写Shader的话中间还包括裁剪空间。...得到屏幕坐标后,此时的坐标并不能直接就按照该值点在画布上,因为屏幕坐标值和画布所给的参考分辨率的值一般是不相同的,所以这个值还要按照一定的缩放比例点在画布正确的位置。...返回的值是以屏幕左下角为坐标原点得到的UIPos,因为默认情况下二维屏幕计算坐标轴就是以左下为原点的。

2.5K10

js获取屏幕以及元素宽高的方法

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:...window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关...scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop...:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 五.坐标轴 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX...相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 六.width/clientWidth/offsetWidth以及height之间区别 width是指可见内容的宽 height是指可见内容的高

6.7K20

ThreeJS实现屏幕坐标转3d坐标 - plus studio

ThreeJS实现屏幕坐标转3d坐标 本文使用chatGPT辅助完成 在虚拟世界中,3D坐标屏幕坐标之间的转换是一个重要的问题。使用ThreeJS开发3D场景时,经常需要将屏幕坐标转换为3D坐标。...在本文中,我们将介绍如何使用ThreeJS实现屏幕坐标转3D坐标的两种方法 根据相机的投影矩阵和射线拾取 在我的笔记摄像机模型中详细推导了相机的投影矩阵。...在ThreeJS中,相机的投影矩阵是一个4x4的矩阵,它将3D坐标转换为屏幕坐标。我们可以使用这个矩阵将屏幕坐标转换为3D坐标。...官方为我们提供了一个接口vector.unproject(camera),它可以将屏幕坐标转换为3D坐标。...但是这个接口只能将屏幕坐标转换为相机坐标系下的3D坐标,如果我们需要将屏幕坐标转换为世界坐标系下的3D坐标,我们需要使用vector.applyMatrix4(camera.matrixWorldInverse

14610

Android MotionEvent 坐标获取

Android MotionEvent中getX()与getRawX()都是获取屏幕坐标(横),但二者又有区别 getX()           :   是获取相对当前控件(View)的坐标...getRawX()   :   是获取相对显示屏幕左上角的坐标 演示示例代码 Java代码: public class MainActivity extends Activity implements...点击屏幕中间的Button,获取坐标信息: ?...结果说明: x,y  :  分别获取的相对Button控件的坐标 getX(), getY() rawX,rawY  : 分别获取的相对显示屏幕左上角的坐标 getRawX(), getRawY() 总结...:  getX() 是表示Widget相对于自身左上角的x坐标,而getRawX()是表示相对于屏幕左上角的x坐标值(注意:这个屏幕左上角是手机屏幕左上角,不管activity是否有titleBar或是否全屏幕

1.9K30

js获取屏幕大小,当前网页和浏览器窗口

browser viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 屏幕大小...对于屏幕大小你可以使用以下代码实现: screen.height; screen.width; 1.获取屏幕尺寸 获取屏幕宽度:window.screen.width;    //整个屏幕的宽度 获取屏幕高度...:window.screen.height;     //整个屏幕的高度 2.获取可用工作区尺寸 获取屏幕可用工作区域宽度:window.screen.availWidth;      //pc端与上面两个一致...,移动端除个别其他也一致(试一下即可) 获取屏幕可用工作区域高度:window.screen.availHeight; 3.获取body的宽高(不含边框) 获取网页内body的宽度:document.body.clientWidth...获取当前窗口body高宽 获取body宽度:$(document.body).width(); 获取body高度:$(document.body).height();

10.1K20

如何获取屏幕帧率

前言 在王小二图解Android【006】高帧率屏幕这期的视频中,我给大家揭秘今年所有安卓旗舰都会吹的高帧率屏幕,其实高帧率屏幕不需要应用开发人员去主动适配,只要应用能在当前的硬件配置下,规定时间(1s.../屏幕帧率)中完成一帧的绘制就可以了。...那肯定有人就要问了,能否当前获得屏幕帧率,然后对高帧率屏幕做针对性优化,在有限的时间内完成一帧的绘制。 一、标准SDK接口 很简单,只要能够拿到WindowManager就可以获取。...02-26 23:38:01.633 19234 19261 V Kobe : Screen Hz is 59//大概的推测出是60hz的屏幕 有没有发现上述代码中的两个细节 1.Choreographer.getInstance...思考 如果你们有其他想法可以获得屏幕的帧率,也可以回复留言。

2.1K30

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX...相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop...: window.screen.height 屏幕分辨率的宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度: window.screen.availWidth

8K30

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

View 组件 窗口坐标 属性 V . View 组件 屏幕坐标 属性 VI . View 组件的触摸位置 属性 VII . View 坐标获取 0 的解决方案 I ....: getLocationInWindow ; 屏幕坐标获取 : getLocationOnScreen ; 触摸坐标 : x , y 触摸坐标是相对于组件的坐标 , rawX , rawY 是相对于屏幕坐标...获取 View 组件窗口坐标 : 这里的窗口指的是 Activity 窗口 ; ① 所在坐标系 : 坐标系的原点 (0 ,0) 是 Activity 窗口的左上角位置 ; ② 区分屏幕坐标 : Activity...获取 View 组件屏幕坐标 : 这里的屏幕指的是手机屏幕 ; ① 所在坐标系 : 坐标系的原点 (0 ,0) 是 手机屏幕的左上角位置 ; ② 获取方法 : 调用 View 组件对象的 getLocationOnScreen..., 即坐标系的原点 ( 0, 0 ) 是该组件的左上角位置 ; ② rawX , rawY 相对于屏幕坐标 : 从 MotionEvent 事件中获取的 rawX , rawY 坐标 , 是当前触摸点相对于屏幕坐标

3.9K10

js 获取屏幕各种宽高的方法(浏览器兼容)

:window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标 ...event.offsetX 相对容器的水平坐标  event.offsetY 相对容器的垂直坐标  document.documentElement.scrollTop 垂直方向滚动的值  event.clientX

3.5K100

JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

:window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...  offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置  event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标...  event.offsetX 相对容器的水平坐标  event.offsetY 相对容器的垂直坐标  document.documentElement.scrollTop 垂直方向滚动的值 ...: window.screen.height 屏幕分辨率的宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度

16K10
领券