前言 通过结合 HTML5 和 OpenLayers 可以组合成非常棒的一个电信地图网络拓扑图的应用，形成的效果可以用来作为电信资源管理系统，美食定位分享软件，片区找房，绘制铁轨线路等等，各个领域都能够涉及的一款应用...);// 获取拓扑组件的 div ol.control.Control.call(this, { element: view,// 控件的容器元素 target: options.target// 将控件渲染到地图的视口之外...，主要是将节点的像素坐标转为 OpenLayers 的 ol.Cordinate 地图视图投影中的坐标并存储到节点的业务属性（HT 的一个可以存储任意值的对象）中，这样我们只需要通过获取或设置节点的业务属性...值得注意的一点是，我们在上面对节点在电信 GIS 地图视图投影中的坐标进行了数据存储，但是这个方法对于 Shape 类型的节点来说不太合适，因为地图上一般都是用点围成区域面，勾勒出某个国家或者某个城市的轮廓...= '100%'; map.getViewport().insertBefore(view, map.getViewport().firstChild);// getViewPort 获取用作地图视口的元素
如下所示： 红色区域是编辑器的最大区域，称之为 视口尺寸 (viewSize) ； 蓝色区域是编辑器的实际的操作区，称之为 展示尺寸 (playSize) ； 可以休息一下 playSize 内的是现实世界的真实物体...展示尺寸在 开始时 希望以适合大大小填充视口；网格长边留下 fixPadding 的边距；这样依赖视口尺寸，就可以算出网格适应边的大小；再根据网格尺寸，就可以算出每个网格的尺寸 pixSide 比如网格宽度大于长度时...，左右两侧留下 fixPadding ，使其填充相机视口： 尺寸的计算逻辑如下所示，相机设置视口尺寸时，先检验和旧尺寸是否一致。...视图层处理 视图层处理最重要的一点是，在绘制时使用相机中的 transformer 矩阵来对编辑区域的内容进行矩阵变换。...下面画个移动时的示意图： 右图在移动之后，触点在点击第第二排第二个点时，触点的坐标还是以视口左上角为起点，我们需要将其原点视为 网格区域的左上角才能计算出正确的网格点位校验。
ViewportDownloadForm.js 源码还是得一行一行阅读，好多自定义的函数，得找到相应的用法 import React, { useRef, useCallback, useEffect...返回的 ref 对象在组件的整个生命周期内保持不变。...: validSize(scaledHeight), //校验是否为有效尺寸 width: validSize(scaledWidth),//校验是否为有效尺寸 }; setViewportElementDimensions...,//最大尺寸 viewportElementDimensions,//视口元素尺寸 ]); /** * 通过使用这个 Hook，你可以告诉 React 组件需要在渲染后执行某些操作...(viewportElement);//禁用视口 useEffect 可以在组件渲染后实现各种不同的副作用。
2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...2.2.1 视图视口（visual viewport） 视图视口是手持设备物理屏幕的可视区域。...，可以单独设置它的宽高（主要是宽），这个视口就是HTML页面布局的区域，并且可以通过viewport meta标签控制。...user-scalable 如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。...该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。
2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。...2.2.1 视图视口（visual viewport） 视图视口是手持设备物理屏幕的可视区域。 ?...，可以单独设置它的宽高（主要是宽），这个视口就是HTML页面布局的区域，并且可以通过viewport meta标签控制。...user-scalable 如果你不想页面被放大或者缩小，通过定义user-scalable来约束用户是否可以通过手势对页面进行缩放即可。...该属性的默认值为yes，即可被缩放（如果使用默认值，该属性可以不定义）；当然，如果你的应用不打算让用户拥有缩放权限，可以将该值设置为no。
在Opera中，这两个属性的值表示页面视图容器的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）。...在Chrome中， outerWidth 、 outerHeight 与 innerWidth 、 innerHeight 返回的值相同，即视口（viewport）大小而非浏览器窗口大小。...中保存了页面视口的信息。...而对于混杂模式下的Chrome，则无论通过 document.documentElement 还是 document.body 中的 clientWidth和clientHeight 属性，都可以取得视口的大小...虽然最终无法确定浏览器窗口本身的大小，但可以取得页面视口的大小，代码如下： var pageWidth = window.innerWidth, pageHeight = window.innerHeight
说说移动端浏览器中的视口 视口(Viewport)是移动Web开发中一个非常重要的概念，最早是由苹果公司在推出iPhone手机时发明的，其目的是为了让iPhone的小屏幕尽可能完整显示整个网页。...iOS, Android 基本都将这个视口分辨率设置为 980px，所以 PC 上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...# 视觉视口(visual viewport) 视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...，单位为像素 height 正整数或device-height 定义视口的高度，单位为像素，一般不用 initial-scale [0.0-10.0] 定义初始缩放值，即当页面第一次 load 的时候缩放比例...它必须大于或等于minimum-scale设置 user-scalable yes / no 定义是否允许用户手动缩放页面，默认值 yes 注意 viewport 标签仅对移动端浏览器有效，对 PC
下面开始记录一下整个流程 IntersectionObserver监听元素视图 IntersectionObserver 是一个浏览器 API，主要用于 监听 DOM 元素是否进入视口（或某个容器），适用于...const options = { root: document.querySelector('.container'), // 观察区域 (默认是视口) rootMargin: '0px 0px...回调函数callback(entries, observer)接收两个参数： entries：表示当前所有被观察到的元素的信息（比如，在一次滑动页面的时候，有多个图片同时进入视口，这个时候，entries...vue3中directive自定义指令 是什么？ 在 Vue 3 中，自定义指令允许你直接操作 DOM 元素，类似于原生的 v-if 或 v-for，但你可以为它们创建自定义行为。...并且定义了一个回调函数loadImage，并且在IntersectionObserver进行监控触发回调，当图片即将进入视口的时候，触发回调，把图片url替换回图片原本的地址（一开始默认是loading
视口 有些时候，你只想渲染屏幕的一部分，比如最小地图。使用视口你可以控制你在屏幕上的渲染位置。...有3个区域我们要绘制全屏图像: ? 首先我们要渲染左上方。这很简单，只要创建一个宽度/高度为屏幕一半的矩形，然后将这个区域传递给 SDL_RenderSetViewport[1]。...在该调用之后进行的任何渲染都将在给定的视口所定义的区域内进行渲染。...它还将使用它所创建的窗口的坐标系，所以我们创建的视图的底部仍然是y = 480，即使它离顶部只有240像素。...同样，视口将使用与它所在的窗口相同的坐标系，所以图像会显得压扁，因为视口只有一半的高度。 在 这里[2]下载本教程的媒体和源代码。
我们可以通过调用 document.documentElement.clientWidth / clientHeight来获取布局视口大小。1.2 视觉视口图片视觉视口，用户通过屏幕真实看到的区域。...1.3 理想视口图片视觉视口，用户通过屏幕真实看到的区域我们可以通过调用 window.screen.width / height 来获取视觉视口大小1.4 页面适配方法综上所述，为了在移动端让页面获得更好的显示效果...图片1.4.1 通过设置initial-scal来适配通过上文了解到，viewport有个initial-scale属性，用来定义页面初始缩放比率，我们是否可以通过动态的改变这个缩放值来进行适配呢，答案是可以的...下图中，左边为contain，右边为cover图片Safe Area是iphoneX之后引入的新概念，指的是一个可视窗口范围，下图可以看到相关区域的定义图片constant(safe-area-inset-top...这个函数最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值用于确保内容即使在非矩形的视区中也可以完全显示。
在 PC 端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致。...它和物理像素之间的比例取决于屏幕的特性（是否为高密度）以及用户进行的缩放，由浏览器自行换算。...在 Apple 的视网膜屏（Retina）中，每 4 个像素为一组，渲染出普通屏幕中一个像素显示区域内的图像，从而实现更为精细的显示效果。此时， 250px 的元素跨越了 500 个物理像素的宽度。...视觉视口（visual viewport） 视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口。 ?...yes 有几点值得注意： viewport 标签只对移动端浏览器有效，对 PC 端浏览器是无效的 当缩放比例为 100% 时，dip 宽度 = CSS 像素宽度 = 理想视口的宽度 = 布局视口的宽度
视口 广义的视口，是指浏览器显示内容的屏幕区域，狭义的视口包括了布局视口、视觉视口和理想视口 (1) 布局视口（layout viewport） 布局视口定义了pc网页在移动端的默认布局行为，因为通常pc...也就是说在不设置网页的viewport的情况下，pc端的网页默认会以布局视口为基准，在移动端进行展示。因此我们可以明显看出来，默认为布局视口时，根植于pc端的网页在移动端展示很模糊。...(2) 视觉视口（visual viewport） 视觉视口表示浏览器内看到的网站的显示区域，用户可以通过缩放来查看网页的显示内容，从而改变视觉视口。...： 属性名取值描述width正整数定义布局视口的宽度，单位为像素height正整数定义布局视口的高度，单位为像素，很少使用initial-scale[0,10]初始缩放比例，1表示不缩放minimum-scale...3. px与自适应 上述我们了解到了当通过viewport元标签，设置布局视口为理想视口时，1个css像素可以表示成： 1 CSS像素 = 物理像素／分辨率 我们直到，在pc端的布局视口通常情况下为980px
我们会结合api定义，知名开源库中的应用场景来逐层分析这些api。...判断当前元素是否存在滚动条 出现滚动条便意味着元素空间将大于其内容显示区域，根据这个现象便可以得到判断是否出现滚动条的规则。...除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。 width和height是计算元素的大小，其他属性都是相对于视口左上角来说的。...当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top 和 left 属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的） 。...计算元素是否出现在视口内 利用的还是元素距离视口的位置小于视口的大小。 注意即便变成了负值，那么也表示元素曾经出现过在屏幕中只是现在不显示了而已。
那么我们可以很轻松地推断出我们文档最终要渲染的结构，首先是占位区域placeholder，这部分内容是不在视口的区域，所以会以占位的方式存在；紧接着是buffer，这部分是提前渲染的内容，即虽然此区域不在视口区域...，但是为了用户在滚动时尽量避免出现短暂白屏的现象，由此提前加载部分视图内容，通常这部分值可以取得视口高度的一半大小；接下来是viewport部分，这部分是真实在视口区域要渲染的内容；而在视口区域下我们同样需要...，根据视口的高度、滚动容器的滚动距离、行的高度等信息计算出当前视口内需要渲染的行，然后在视图层根据计算的状态来决定是否要渲染。...首先我们来看Scroll Event，这是最常见的滚动监听方式，通过监听滚动事件我们可以获取到滚动容器的滚动距离，然后通过计算视口的高度与滚动距离来计算出当前视口内需要渲染的行，然后在视图层根据计算的状态来决定是否要渲染...提前渲染的范围与渲染调度的时间间隔同样需要进行调度，例如在两次调度快速渲染的不能超过100ms，快速渲染持续的时间可以设定为500ms，最大渲染范围定义为2000px或者取N倍视口长度等等，这个可以视业务需求而定
接下来的任务就是对每个步骤详细理解，加深记忆！！ 提示:视图变换必须在模型变换之前，但是投影变换和窗口变换可以在绘图之前。...在使用的时候注意的一些步骤: 在指定视图变换之前，需要使用glLoadIdentity() 将当前矩阵设置为单位矩阵，这个步骤是非常必要的，因为大多数矩阵变换把当前矩阵与指定矩阵进行乘法运算，然后将结果指定为当前矩阵...默认值: 默认情况下，摄像头位于原点，方向为z轴的负方向。 任务3 理解模型变换 模型变换的目标是设置模型的位置和方向，可以进行的操作有旋转，移动和缩放，可以是这几种操作的任意组合。...glLoadIdentity() 3.设置投影变换的类型和参数 如果是透视投影:使用 glFrustum() 如果是正投影使用 glortho() 任务5 视口转换 投影变换和视口变换共同决定了场景是如何映射到计算机屏幕中去的...投影变换指定了映射发生机制，视口变化决定了场景所映射的有效屏幕区域的形状。可以把视口看做是照片的大小和位置，照片可以进行缩放吧！
认识视口与相机 相机是我们日常生活中非常常见的概念，在 Flame 中，相机的概念如何理解呢？现实生活中，当你使用相机拍出一张照片，其囊括的区域是有限的，这个区域也就是视口 Viewport。...此时游戏视口尺寸和 窗口尺寸 就不是一个概念了。无论应用窗口有多大，对游戏而言视口尺寸是恒定的。如下白色背景构件添加到游戏场景中，布满视口，视口会根据大小来适应窗口 ，不在视口区域内的部分会显示底色。...【29/02】 比如上图中默认相机的视口尺寸是 900*600 ，并不是指白色区域的是 900*600 逻辑像素。另外，可以看到角色的尺寸没有改动，但在这个视口尺寸下，就会显得较小。...为相机指定视口直接用 camera.viewport 指定即可。...i++) { add(Rock(Vector2(Ground.genCoord(), Ground.genCoord()))); } } 复制代码 ---- 该案例，当角色和岩石碰撞时，可以看出角色在视口区域的
setViewportMargins(int left, int top, int right, int bottom) 设置视口的边缘，以保留用于显示视图的场景区域之外的空间。...setBackgroundBrush(const QBrush &brush) 设置视图的背景刷。 viewport() const 获取视口窗口部件，即视图的直接子部件。...setViewportMargins(int left, int top, int right, int bottom) 设置视口的边缘，以保留用于显示视图的场景区域之外的空间。...viewport() const 获取视口窗口部件，即视图的直接子部件。 这些方法提供了对QGraphicsView的各种设置和操作，用于管理视图的外观和行为。...绘制柱状图 与饼状图的绘制方法一致，在绘制柱状图时只需要根据QBarSeries类的定义对特有元素进行填充即可，当数据集被填充后既可以直接调用绘图方法将数据刷新到组件上。
懒加载实现 首先不设置 src 属性，将图片真正的 url 放在另外一个属性 data-src 中，在图片即将进入浏览器可视区域之前，将 url 取出放到 src 中。...，以及元素什么时候进入或者离开浏览器视口。...getBoundingClientRect 的结果 rootBounds: 对根视图执行 getBoundingClientRect 的结果 intersectionRect: 目标元素与视口（或根元素...占 boundingClientRect 的比例，完全可见时为1，完全不可见时小于等于0 isIntersecting: 目标元素是否处于视口中 (2) option 假如我们需要特殊的触发条件，比如元素可见性为一半的时候触发...通过设置 option 的 threshold 改变回调函数的触发条件，threshold 是一个范围为0到1数组，默认值是[0]，也就是在元素可见高度变为0时就会触发。
（Viewport） 视口（Viewport）是指当前可见的计算机图形区域，在浏览器中，是指能用来显示网页的区域。...视口当前可见的部分叫做可视视口（visual viewport）。整个网页所占据的区域（包括可视也包括不可视的区域）叫做布局视口（layout viewport）。...当可视视口比布局视口小时，浏览器网页就会出现横向滚动条，以支持用户浏览整个网页的内容。...=no"> Viewport 属性： 属性 含义 取值 width 定义视口的宽度，单位为像素 正整数或 device-width（设备的宽度） height 定义视口的高度，单位为像素 正整数或 device-height...整数或小数 user-scalable 定义是否允许用户缩放 yes或no 适配方案 对于移动端适配的方案，市面上有很多种。
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。...iOS, Android基本都将这个视口分辨率设置为 980px，所以pc上的网页基本能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...2、visual viewport（视觉视口）和物理像素 visual viewport（视觉视口）物理屏幕的可视区域，屏幕显示器的物理像素，同样尺寸的屏幕，像素密度大的设备，硬件像素会更多。...： 属性名 取值 描述 width 正整数 或 device-width 定义视口的宽度，单位为像素 height 正整数 或 device-height 定义视口的高度，单位为像素，一般不用 initial-scale...（6）user-scalable user-scalable来控制用户是否可以通过手势对页面进行缩放。该属性的默认值为yes，可被缩放，你也可以将该值设置为no，表示不允许用户缩放网页。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
