视口 | 易学教程

OSG 两个相机

阅读更多关于 OSG 两个相机

在场景中创建两个视口。其中一个用于从坦克驾驶员的视角观察场景。该视口将被渲染于屏幕的上半部分。第二个视口由缺省的osgViewer::Viewer类接口（轨迹球，飞行等控制器）控制。它将被渲染于屏幕的中下部分。概述： OSG向开发人员提供了各种的抽象层次接口。前面的教程讨论的主要是一些较高层级的接口应用：例如使用Viewer类来控制视点，场景，交互设备和窗口系统。OSG的优势之一，就是可以允许开发者在使用高层次的接口的同时，访问较低层次的抽象接口。本章将使用一些低抽象层级的功能，对视点进行控制，并使用相应的类渲染场景。代码：为了创建两个视口，我们需要提供两个独立可控的摄像机。与OSG 1.2版本中所述不同的是，本例中将不再使用Prodecer::CameraConfig类，而是将多个不同的视口添加到组合视口 CompositeViewer类当中。下面的函数即用于实现添加视口并设置其中的摄像机位置。 void createView (osgViewer::CompositeViewer *viewer,//查看器，一个相框 osg::ref_ptr<osg::Group> scene,//场景 osg::ref_ptr<osg::GraphicsContext> gc,//显示设置定义相框的大小，View和Viewr在屏幕上的大小，位置 osgGA:

BootStrap

阅读更多关于 BootStrap

索引响应式布局响应式布局必须保证几件事编写响应式网页 @media 媒体查询 BootStrap 使用按钮相关样式图片文字相关样式响应式的文本对齐 Boot向上兼容列表相关样式栅格布局响应式布局 Responsive web page 响应式/自适应网页(css3 2010提出) 可以根据浏览设备(不要说浏览器大小)不同(pc,pad,phone) 而自动改变布局,图片,文本效果,不影响用户体验响应式布局必须保证几件事 1.布局的时候,不能使用固定值宽度,(缩小会溢出) 必须是流式布局(默认文档流+浮动)+弹性 2.文字和图片大小随着容器大小改变(相对单位% rem) 3.使用css3提供的媒体查询技术注意:代码复杂的页面,不适合使用响应式布局(eg: jd) 编写响应式网页移动端适配 (移动端运行,一定要写) <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> width=device-width 视口宽度为设备宽度 initial-scale=1.0, 设置视口初始缩放为1倍,不放大不缩小 maximum-scale=1.0 , 允许视口最大放大到1倍 user-scalable=0

CSS：7个你可能不认识的单位

阅读更多关于 CSS：7个你可能不认识的单位

https://webdesign.tutsplus.com/articles/7-css-units-you-might-not-know-about--cms-22573 众所周知，当使用CSS技术的时候，很容被一些奇异问题给困住。而当我们面对新的问题时，这会让我们处于非常不利的位置。但是，伴随着Web的发展，新的解决方案也在慢慢成熟。因此，作为一个Web设计和前端开发人员，除了对我们使用的工具或属性非常了解并能熟练运用，已经别无选择了。这也意味着，对于那些特别的工具或属性，即使平常很少使用，但是当需要的时候，我们也能很好的把它运用到工作中。今天，我就介绍一些你之前可能不知道的CSS 属性，是一些例如px和ems测量方面的单位，但是很有可能你之前都没听过这些。一起来看看吧。 rem 从与我们已经熟悉的但很相似的单位开始介绍。em被定义为相对于当前对象内文本的字体大小。如果你给body元素设置了一个字体大小，那么body的任何子元素的em值都等于body设置的font-size。 <body> <div class="test">Test</div> </body> body { font-size: 14px; } div { font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px } div中的字体大小是1

移动端布局方案—vw+rem

阅读更多关于移动端布局方案—vw+rem

　　前言　　　　首先你要知道 vw 和 rem 是什么？怎么使用？　　　　①：简单来说 vw 是视口单位，相当于把视口等分成了 100 ， 1vw = 1 ; 　　　　 ②：rem 是相对单位，设置根元素 html 的 font-size ，比如给 html 设置字体大小为 100px ， 1rem = 100px ; 　　　　注：我之前针对 vw 和 rem 分别写过一篇博客，详见如下　　　　　　 vw： https://www.cnblogs.com/tu-0718/p/9906692.html 　　　　　　 rem： https://www.cnblogs.com/tu-0718/p/9146631.html 　　　　正文　　　还记得第一次知道 rem 时，我的心情如沐春风，感觉找到了新大陆　　　那时常为移动端写自适应页面而苦恼，传统的百分比布局和媒体查询早已让我心力交瘁　　　百分比布局的缺点：宽度虽然能随屏幕自适应，但高度固定不变，当设备屏幕越来越大，会有一种被强行拉伸的既视感，用户体验差　　　媒体查询的缺点：CSS 代码量增多，体积增大，要为每一个不同分辨率的设备单独写一套样式来自适应，这样的话我宁愿狗带　　　　在这种情况下， rem 的出现无异于黑暗中的一道曙光，不过它也有一个缺点　　　 rem的缺点：需要引入一段 JS

[3D基础]Pick原理

阅读更多关于 [3D基础]Pick原理

在游戏及编辑器中经常用到pick拾取世界坐标系中的几何物体，今天周末有空整理下推导公式。第一步：获取Picking Ray 给出窗口坐标W(x,y)、width、Height、Camera设置，返回射线原点及方向。推导过程：窗口坐标－>屏幕（视口）坐标－>视平面坐标－>世界坐标系中的射线原点及方向 1. 窗口坐标系到屏幕坐标系的转换公式： sx = wx / width sy = 1 – wy / height 2. 因为视口不一定是整个窗口区域，所以视口坐标： px = (sx – port.left) / (port.right – port.left) py = (sy – port.bottom) / (port.top – port.bottom ) 3. 视口坐标系到视平面坐标系的转换公式： fx = frustum.left + px * (frustum.right – frustum.left ) fy = frustum.bottom + py * (frustum.top – frustum.bottom ) frustum可以根据水平垂直fov视野及视平面d获得。可以知道 frustum.left <=fx <= frustum.right; frustum.bottom <=fy <= frustum.top。 4.

2.4、Bootstrap V4自学之路------布局---响应式工具

阅读更多关于 2.4、Bootstrap V4自学之路------布局---响应式工具

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 可用的类当视口宽度等于或宽于给定的分隔点时， .hidden-*-up 类将隐藏该元素。比如说， .hidden-md-up 将在中屏、大屏、特大屏视口中隐藏元素。当视口宽度等于或窄于给定的分隔点时， .hidden-*-down 将隐藏该元素，比如说， .hidden-md-down 将在特小屏、小屏、中屏视口中隐藏元素。你可以组合使用 .hidden-*-up 类以及 .hidden-*-down 类，以使元素只在一个给定的屏幕尺寸区间内显示。比如说， .hidden-sm-down.hidden-xl-up 能使元素只在中屏和大屏视口中显示。使用多个 .hidden-*-up 类或多个 .hidden-*-down 类是多余而且无意义的。当一个元素的可见性不能被表达为一个单独连续的视口尺寸范围时，这些类并不会支持这些比较少见的情况。在这种情况下，你必须改用自定义类。特小屏设备手机竖屏(<34em) 小屏设备手机横屏 (≥34em) 中屏设备平板电脑 (≥48em) 大屏设备桌面 (≥62em) 特大屏设备桌面 (≥75em) .hidden-xs-down 隐藏可见可见可见可见 .hidden-sm-down 隐藏隐藏可见可见可见 .hidden-md-down 隐藏

如何判断DOM元素在当前视口中是否可见？

阅读更多关于如何判断DOM元素在当前视口中是否可见？

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 有没有一种有效的方法来判断DOM元素（在HTML文档中）当前是否可见（显示在视口中）？（问题是指Firefox） #1楼请参阅使用 getBoundingClientRect 的边缘源。就像是： function inViewport (el) { var r, html; if ( !el || 1 !== el.nodeType ) { return false; } html = document.documentElement; r = el.getBoundingClientRect(); return ( !!r && r.bottom >= 0 && r.right >= 0 && r.top <= html.clientHeight && r.left <= html.clientWidth ); } 如果元素的任何部分在视口中，则返回 true 。 #2楼更新：时间在前进，我们的浏览器也在前进。不再推荐使用此技术，如果不需要支持IE <7，则应使用下面的 @Dan 解决方案（ https://stackoverflow.com/a/7557433/5628 ）。原始解决方案（现已过时）：这将检查该元素在当前视口中是否完全可见： function

移动端入门

阅读更多关于移动端入门

移动设备：手机（Mobile phone）平板（ipad）移动设备系统：Android(安卓)、ios（苹果）内置浏览器：安卓内置chrome（谷歌）浏览器，苹果内置safari浏览器，但他们两个的内核都是 webkit，因此无需考虑浏览器兼容性，但需要考虑安卓(Android)和ios的区别 Android(安卓)、ios（苹果）在页面布局上需要考虑的因素：　　1.设备宽度（设备的实际大小或者说是设备的分辨率）　　2.页面大小开发者设计的大小　　3.浏览器的视口浏览器窗口大小，可以用document.documentElement.clientWidth查看，在移动设备初始视口一般默认为980 　　例如：假若使用的是苹果5，分辨率为320*568，而设计的页面是1200px，浏览器的视口默认为980，浏览器的视口会自动缩小，以 100%完整展示页面，就会变的不清楚，特别挤。我们需要把这三个变的统一　　方式：　　　　1.使移动设备(320)和浏览器视口(980)宽一致　　　　　　在head之间加一个meta标签name="viewport" 　　　　　　 < meta name = "viewport" content = "width=device-width,initial-scale=1,minimum-scale=1,maximum

前端知识之 bootstrap

阅读更多关于前端知识之 bootstrap

前端知识之 bootstrap 01. bootstrap的介绍和下载 01.1 介绍 Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。使用Bootstrap的好处： Bootstrap简单灵活，可用于架构流行的用户界面，具有友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。 01.2 下载 bootstap英文官方: https://getbootstrap.com/ bootstrap中文官网： http://www.bootcss.com/ 下载地址: http://v3.bootcss.com/getting-started/#download 注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码和 sass项目，只需要下载生产环境的Bootstrap即可。下载完成以后的目录如下： bootstrap/dist/ ├── css/ │ ├── bootstrap.css #

响应式布局和移动端开发

阅读更多关于响应式布局和移动端开发

响应式布局 l 响应式布局是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 l 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，越来越多的设计师采用这个技术。 l 一个典型的响应式布局网站： http://www.16ketang.com/ l 试着逐渐缩小该页面的窗口，看看网页有什么变化 l 由于响应式布局要针对不同的视口尺寸，对样式作出更多的修改，因此并不像流式布局那样让宽度自动适应那么简单。 l 实现响应式布局最核心的技术就是使用媒体查询（ media selector ）。 l 媒体查询是 CSS3 引入的概念，是指针对不同的设备、不同的视口尺寸，使用不同的样式代码。 l 响应式布局的原理，正是大量的使用媒体查询，让页面中一些元素在不同的视口中具有不同的样式表现。 l 常见的视口尺寸 l 虽然你现在知道了如何使用媒体查询，但我们真正关心的，是页面在手机、平板、上网本或小型笔记本、 PC 端中具有更好的表现力。 l 但问题是手机型号众多，其他设备也是如此，它们的尺寸不尽相同，我们如何来判定当前的视口尺寸属于什么设备呢？ l 好在经过大量的实践应用

订阅视口