视口和窗口

本文介绍了在图形绘制中逻辑坐标系与设备坐标系之间的映射方式,详细解释了如何通过设置视口原点和窗口原点来改变坐标轴的位置,并给出了具体的示例。
映射方式指定了逻辑坐标系的逻辑单位和坐标轴正方向, 坐标原点没有涉及。而且, 在“自作主张的”两种映射方式下, 逻辑单位、坐标轴正方向和坐标原点都有待确定。

“视口”是基于设备坐标的, 通常, 视口与客户区相同。点( 0,0)是客户区域的左上角。x 的值向右增加, y 的值向下增加。“窗口”是基于逻辑坐标的, 逻辑坐标可以是像素、毫米、英寸等, 我们在GDI 绘图函数中指定逻辑窗口坐标。映射方式实际上是用于定义从“窗口”( 逻辑坐标) 到“视口”( 设备坐标) 的映射。在所有的映射方式下,Windows 用下面两个公式将窗口( 逻辑) 坐标转为视口( 设备) 坐标:


(xWindow,yWindow)是待转换的逻辑点, ( xViewport,yViewport)是转换后的设备坐标。视口原点(xViewOrg,yViewOrg)和窗口原点(xWinOrg,yWinOrg) 默认情况下均为( 0,0) , 可以改变; (xWinExt,yWinExt)是逻辑坐标的窗口范围; ( xViewExt,yViewExt) 是设备坐标的视口范围, 只有在MM_ISOTROPIC 和MM_ANISOTROPIC 映射方式下范围可以改变。


窗口原点和视口原点
Windows 提供了函数SetViewportOrgEx 和SetWindowOrgEx,用来改变视口和窗口的原点, 这些函数都具有改变轴的效果, 使(0,0)不再是左上角。
如果将视口原点改变为(xViewOrg,yViewOrg), 则逻辑点(0.0)就会映射为设备点(xViewOrg- xWinOrg,yViewOrg- yWinOrg)。如果将窗口原点改变为(xWinOrg,yWinOrg), 则逻辑点(xWinOrg- xViewOrg,yWinOrg- yViewOrg)将会映射为设备点(0,0)
例如, 假设客户区为cxClient 个像素宽和cyClient 个像素高。在MM_TEXT 映射方式下, 客户区的逻辑坐标系如图1(1),如果想将逻辑点(0, 0)定义为客户区中心, 代码如下:
SetViewportOrgEx (hdc, cxClient / 2, cyClient / 2, NULL) ;SetViewportOrgEx 的参数总是使用设备单位。默认的窗口原点(xWinOrg,yWinOrg)为( 0,0) , 逻辑点(0,0)将映射为设备点(cxClient/2,cyClient/2), 客户区的逻辑坐标系如图1(2)。


用下面的SetWindowOrgEx 语句同样可以获得如图1(2)所示的效果:
SetWindowOrgEx (hdc, - cxClient / 2, - cyClient / 2, NULL) ;
SetWindowOrgEx 的参数总是使用逻辑单位。逻辑点(- cxClient / 2,- cyClient / 2)映射为设备点(0,0), 相应的逻辑点(0,0)位于设备点(cxClient/2,cyClient/2)。

### 浏览器与浏览器窗口的区别 #### 定义差异 - **浏览器窗口**是指整个浏览器应用程序的界面,包括地址栏、工具栏、标签页以及其他用户交互组件。它是操作系统层面的一个窗口对象[^1]。 - **(Viewport)**则是指网页内容的实际可区域,即不包含滚动条之外的部分。简单地说,这是用户能够看到网页的那一部分内容的空间范围[^2]。 #### 技术实现上的区别 在前端开发中,可以通过不同的方法分别获取这两个概念的具体数值: - 获取**浏览器窗口**的整体尺寸通常涉及更复杂的逻辑,因为这不仅限于文档可见区还包括其他UI元素如书签栏等。但一般情况下讨论更多的是大小而不是完整的浏览器窗口尺寸。 - 对于****而言,有两种常用的方法来测量它的宽高:一是利用 `window.innerWidth` `window.innerHeight`;二是借助 DOM 元素属性 `documentElement.clientWidth/clientHeight` 来取得不含边框在内的精确内部尺寸[^3]。 ```javascript // 方法一:使用 window API const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; console.log(`宽度:${viewportWidth}px,高度:${viewportHeight}px`); // 方法二:通过 document.documentElement 访问 const docClientWidth = document.documentElement.clientWidth; const docClientHeight = document.documentElement.clientHeight; console.log(`Document Element Client Width: ${docClientWidth} px`); console.log(`Document Element Client Height: ${docClientHeight} px`); ``` #### 应用场景对比 - 当需要关注整体用户体验环境时,比如检测是否有足够的空间放置弹出菜单或者判断当前是否处于全屏状态等情况需要用到关于整个**浏览器窗口**的信息。 - 而涉及到响应式设计、适配多种设备屏幕等方面的工作则主要围绕着如何合理运用好****的概念展开工作。例如设置 meta 标签中的 scale 参数可以帮助开发者更好地掌控移动设备上的呈现效果[^2]。 另外值得注意的一点是在某些特定条件下(像手机横竖屏转换),虽然物理意义上的“窗口”并没有发生变化,但由于方向改变了等原因造成有效显示面积有所增减——这就是为什么我们要特别区分这两者并学会灵活应对各种情形下的需求[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值