区分什么是“客户区坐标”、“页面坐标”、“屏幕坐标”

最新推荐文章于 2024-01-04 14:33:32 发布
原创 最新推荐文章于 2024-01-04 14:33:32 发布 · 270 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #前端 #css

本文详细介绍了在网页中获取鼠标坐标以及DOM元素位置的方法，包括clientX/Y、pageX/Y、screenX/Y属性，以及offsetLeft和offsetTop属性的使用。同时，通过讲解getBoundingClientRect()方法，帮助理解元素的绝对定位。
  • 客户区坐标：鼠标指针在可视区中的水平坐标(clientX)和垂直坐标(clientY)
  • 页面坐标：鼠标指针在页面布局中的水平坐标(pageX)和垂直坐标(pageY)
  • 屏幕坐标：设备物理屏幕的水平坐标(screenX)和垂直坐标(screenY)

如何获得一个DOM元素的绝对位置？

  • elem.offsetLeft：返回元素相对于其定位父级左侧的距离
  • elem.offsetTop：返回元素相对于其定位父级顶部的距离
  • elem.getBoundingClientRect()：返回一个DOMRect对象，包含一组描述边框的只读属性，单位像素
JavaScript鼠标事件对象中的坐标位置（客户区、页面、屏幕）详解及区别
TalonZhang的博客
11-20 1076
坐标位置包括客户区坐标位置、页面坐标位置、屏幕坐标位置。 客户区坐标位置 鼠标事件都是在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的 clientX 和 clientY 属性中，分别表示事件发生时鼠标指针在视口中的水平和垂直坐标。 所有的浏览器都支持这两个属性。 用法： var div = document.getElementById('myDiv'); EventUtil.ad...
MFC实战篇——客户区坐标与屏幕坐标转换，获取对话框中控件的坐标，获取鼠标点击处的像素值
WaitFoF
04-01 8251
文章目录一、客户区坐标与屏幕坐标转换1. GetWindowRect2. GetClientRect3. ClientToScreen4. ScreenToClient5. 对话框中控件的坐标二、实例1. 获取图像控件的坐标信息2. Mat图片显示在MFC图片控件中3. 获取鼠标点击处的像素值 一、客户区坐标与屏幕坐标转换 ????????????坐标包含两种： 屏幕坐标 屏幕坐标是指你的显示器的左上角（0，...
屏幕坐标和客户区坐标的相互转换
06-19
此VC程序实现了获得控件的相对坐标，包括控件左上角相对于屏幕的坐标和相对于客户区的坐标，以及两者之间的转换，还可以实时显示鼠标坐标。对于理解客户区相对坐标有很大用处。
屏幕坐标、客户区域（可视窗口）坐标、页面坐标的区分
weixin_34006965的博客
02-18 632
区分三类坐标 屏幕坐标、可视窗口坐标、页面坐标有时不能迅速的对应起来，为了更好的区分三者，特意画了一张图如下： 屏幕坐标 顾名思义，即整个电脑屏幕上任意一点的位置坐标，对应的属性分别为screenX，screenY,范围如上图最外层红色边框范围，坐标为蓝色虚线对应的坐标。可以使用类似下面的代码取得鼠标事件的屏幕坐标: var div ...
屏幕坐标获取工具
06-07
3. 多屏幕支持：如果用户的计算机连接了多个显示器，工具应能区分不同屏幕的坐标，并提供切换查看不同屏幕坐标的功能。 4. 可自定义设置：可能允许用户选择坐标系的原点，例如选择右下角为原点，或者设置坐标单位...
plotyyy.rar_matlab plotyyy_matlab三纵坐标_matlab坐标轴_ploty_三个纵坐标
07-14
在MATLAB中，创建具有多个纵坐标轴的图形可以极大地增强数据可视化的能力，尤其是在比较不同尺度或不同种类的数据时。本篇文章将详细讲解如何利用MATLAB的`plotyyy`函数来实现这一功能，并结合`ploty`进行深入讨论。...
将3D坐标转成2D坐标的方法2
08-08
在Unity 3D游戏开发中，经常需要将3D场景中的坐标转换为2D屏幕坐标，以便进行交互和渲染GUI元素。本教程将详细介绍如何实现这个转换过程，并提供了一个简单的应用示例，即在一个塔防游戏中点击3D物体后显示对应的...
KUKA机器人通过3点法设置工作台基坐标系的具体方法.docx
09-27
2. 在基坐标编辑界面，你需要为新的基坐标系赋予一个编号，例如3，同时为其命名，比如“table1”，这有助于区分不同的工作区域。点击“继续”以进行下一步操作。 3. 在选择参考工具阶段，根据实际需求选择合适的...
屏幕坐标和客户区坐标
minbin1987的专栏
02-04 678
屏幕坐标：相对于屏幕左上角(0,0)的坐标，这里的屏幕就是我们的输出设备。 客户区坐标：相对于窗口客户区左上角(0,0)的坐标。 涉及的几个函数： ClientToScreen( ): 把客户区坐标转换为屏幕坐标； ScreenToClient( ):把屏幕坐标转换为窗口坐标； GetWindowRect( ):获取屏幕坐标系下的整个窗口（包含客户区和非客户区）矩形； GetC
客户区坐标与屏幕坐标/逻辑坐标
学而不思则罔
11-19 1024
客户区坐标与屏幕坐标原点都在左上角,不同的是,屏幕坐标的原点在屏幕左上角,客户区坐标的原点在本客户区(比如控件)的左上角.
逻辑坐标与设备坐标——全窗口坐标、屏幕坐标、客户区坐标的总结
Sin_Geek成长の迹
03-26 6598
Windows应用程序绘制图形时使用的是一种逻辑单位，每个逻辑单位的大小由映射模式决定，这个逻辑单位既可以与设备单位（屏幕或打印机上的一个像素点）相同，也可以是一种物理单位（如毫米），还可以是用户自定义的一种单位。在Windows应用程序中，只要与输出有关系，都要使用映射模式。   首先谈谈映射模式基本知识，当Windows应用程序在其客户区绘制图形时，必须给出在客户区的位置，其位置用x和y
屏幕坐标，窗口坐标，客户区坐标，逻辑坐标的区别
weixin_30314631的博客
01-09 199
下面三种都是显示设备的物理坐标,它们在屏幕上用真实的物理像素表示 。 屏幕坐标 Screen coordinates: 原点(0,0)位于屏幕的左上角窗口坐标 Window coordinates: 原点(0,0)位于窗口的左上角(包括非客户区,如标题条) 客户区坐标Client-window coordinates: 原点(0,0)位于客...
网页中的坐标
最新发布
m0_71873158的博客
01-04 1834
event.screenX:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的水平距离（与浏览器窗口大小无关） event.screenY:相对电脑屏幕的坐标，以屏幕左上角为坐标原点到鼠标所在点的垂直距离（与浏览器窗口大小无关）:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的水平距离（常用）（不包括滚顶条内的距离）:相对浏览器可视区域的坐标，以浏览器可视区域左上角为坐标原点到鼠标所在点的垂直距离（常用）（不包括滚顶条内的距离）：向下滑动滚动块时元素隐藏内容的高度。
相对客户区、屏幕坐标
YL_WH的专栏
09-02 2816
ClientToScreen( )是把窗口坐标转换为屏幕坐标 ScreenToClient( )是把屏幕坐标转换为窗口坐标 屏幕坐标是相对于屏幕左上角的，而窗口坐标是相对于窗口用户区左上角的 VC下，有些函数使用窗口坐标，有些使用屏幕坐标，使用时要分清。 一个窗体分为两部分：系统区和客户区 象标题和菜单之类的是系统区，由系统来控制，客户区就是你的地盘喽！！！ Width, Heig
WINDOWS 逻辑坐标 设备坐标 屏幕坐标 客户区坐标 .
C++ for Windows 之路
09-07 1313
设置坐标映射    （1）Windows坐标系统 Windows坐标系分为逻辑坐标系和设备坐标系两种，GDI支持这两种坐标系。一般而言， GDI的文本和图形输出函数使用逻辑坐标，而在客户区移动或按下鼠标的鼠标位置是采用设备坐标。 逻辑坐标系是面向DC的坐标系，这种坐
设备坐标(DP)、客户坐标(Client)、逻辑坐标(LP)在用法和含义上都有哪些区别呢？
willpower_lsc的专栏
04-18 3004
1.逻辑坐标               逻辑坐标是独立于设备的，它与设备点的大小无关。使用逻辑单位，是实现"所见即所得"的基础。当程序员在调用一个画线的GDI函数LineTo，画出25.4mm(1英寸)     长的线时，他并不需要考虑输出的是何种设备。若设备是VGA显示器，Windows自动将其转化为96个像素点；若设备是一个300dpi的激光打印机，Windows自动将其转化为300个像素点
什么是屏幕坐标，什么是工作区坐标
阿达King哥的博客
03-05 5286
屏幕坐标一种坐标，其 X 和 Y 屏幕位置是相对于屏幕的左上角（将该左上角当作原点 (0,0)）指定的。Client Coordinates - 工作区坐标一种坐标，其 X 和 Y 屏幕位置是相对于应用程序的左上角（将该左上角当作原点 (0,0)）指定的。在从右向左 (RTL) 的应用程序中，右上角为原点。 
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小码哥・Martin

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值