本文，我们讲讲前端怎么实现伸缩框的功能，类似下面 案例验证的浏览器为 - Google Chrome 版本 119.0.6045.123（正式版本）（arm64） 前言 在实际的工作中，我们有遇到这么一个实用的需求...JS 实现伸缩框 我们的思路是这样子的： 实现右下角的三角拖动图标 计算伸缩框距离左边和顶部的距离 监听鼠标的点击、拖动、抬起事件，记录鼠标当前相对视窗左上角点的左侧距离和顶部距离 计算鼠标距离边框左侧的距离...在开始之前，我们还得熟悉下juejin.cn/post/708512…中的 Element.getBoundingClientRect() 方法： 我们可以通过这个方法获取元素其左上角顶点相对可视窗口的坐标...(x, y)及其元素的宽度和高度。...当然，我们还需要通过 event.clienX 和 event.clientY 获取当前鼠标距离可视窗口的坐标(clientX, clientY)。
组件基础位置属性 : 组件的基础位置属性是不会改变的 ; ① left 属性 : 组件的左侧 x 轴坐标 , 值为左侧距离父容器左侧的长度 , 本组件左上角顶点 , 在父容器坐标系的 x 值 ;...② top 属性 : 组件的顶部 y 轴坐标 , 值为顶部距离父容器顶部的高度 , 本组件左上角顶点 , 在父容器坐标系的 y 值 ; ③ right 属性 : 组件的右侧 x 轴坐标 ,...值为右侧距离父容器左侧的长度 , 本组件右下角顶点 , 在父容器坐标系的 x 值 ; ④ bottom 属性 : 组件的底部 y 轴坐标 , 值为底部距离父容器顶部的长度 , 本组件右下角顶点...组件当前位置 属性 : x , y 是当前的位置 , 这个位置会随着 translationX 和 translationY 的值改变而改变 ; ① x : 表示组件左上角当前的实际位置的 x 坐标 ,..., 摆放完毕后 , 就可以获取组件的坐标和大小属性 ; 3 .
event对象位置信息获取 先总结下区别： event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。...event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。...event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。...因为滚动条不会出现在顶部或者左侧 offset 指偏移，包括这个元素在文档中占用的所有显示宽度。比client 多了border。 ...获取对象的滚动高度 scrollLeft 已滚动过去的宽度 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
，现在还需要知道生成到画布的哪个地方（x和y坐标） 松开鼠标时，需要计算鼠标在画布的坐标。...我的做法是通过 canvas 元素的 getBoundingClientRect() 方法返回的对象中获取到 top 和 left 两个数据。...这两个数据就是 canvas 元素距离页面顶部和左侧的距离。 然后通过鼠标当前坐标减去 canvas 距离页面顶部或左侧的距离，计算出鼠标点击画布的真实坐标。...canvas.on('drop', function(opt) { // 画布元素距离浏览器左侧和顶部的距离 let offset = { left: canvas.getSelectionElement...（未经过缩放和平移的坐标） let point = { x: opt.e.x - offset.left, y: opt.e.y - offset.top, } // 转换后的坐标
通过使用window对象的innerWidth和innerHeight属性，我们可以获取窗口的宽度和高度。...而要获取文档的大小，我们可以使用document对象的clientWidth和clientHeight属性。这些属性将返回以像素为单位的值，从而使我们能够准确地确定窗口和文档的尺寸。...alert('当前已从顶部滚动：' + window.pageYOffset);alert('当前已从左侧滚动：' + window.pageXOffset);这些属性是只读的。...scrollByscrollBy 方法用于将页面或元素相对当前位置滚动指定的距离。方法 scrollBy(x,y) 将页面滚动至 相对于当前位置的 (x, y) 位置。...它有一个参数alignToTop：如果 top=true（默认值），页面滚动，使 elem 出现在窗口顶部。元素的上边缘将与窗口顶部对齐。
对WebElement截图 WebDriver.Chrome自带的方法只能对当前窗口截屏，且不能指定特定元素。若是需要截取特定元素或是窗口超过了一屏，就只能另辟蹊径了。...WebDriver.PhantomJS自带的方法支持对整个网页截屏。 下面提供几种思路。 方式一 针对WebDriver.Chrome 通过WebDriver的js脚本注入功能，曲线救国。...: 将 DOM 对象绘制到 canvas 中 方式二 针对WebDriver.Chrome 截取全图，自行裁剪、拼接 获取元素位置、大小 获取窗口大小 截取包含元素的窗口 进行相应的裁剪和拼接。...所以，只能曲线救国，利用 Selenium 执行JS代码，将页面上不需要的元素一一删除，只保留我们希望留下的元素，然后再利用上面的窗口截屏功能。...Chrome和PhantomJS 的接口差异 抓知乎时的坑， Chrome用WebElement.text可以正常得到值，用PhantomJS只能用 WebElement.get_attribute(
= 140 * (i + 1) #将5个踏板的y坐标设为140的1-5倍 bricks.append(b) 踏板水平位置随机 设置踏板的x坐标，让每个踏板的水平位置随机，并且完整显示在窗口中...当踏板y坐标小于0, 让角色从窗口下方重新出现。 嘟嘟 游戏中，嘟嘟最初是站在中间的那个踏板上。...嘟嘟出现 认识top、bottom、left和right pygame中，可以使用top表示角色图片的顶部，bottom表示底部，left、right分别表示左侧和右侧。...角色.top 表示顶部的y坐标 角色.bottom 表示底部的y坐标 角色.left 表示左侧的x坐标 角色.right 表示右侧的x坐标 出现在中间的踏板上 创建并绘制角色dudu以后，设置...表示角色底端的y坐标 游戏窗口的高度为700，当嘟嘟的底端y坐标大于等于700时， 就表示嘟嘟碰到窗口下方。
标准坐标系我们之所以要进行上面的转换，这是因为在Three.js中Canvas画布具有一个标准设备坐标系，该坐标系的坐标原点在canvas画布的中间位置，x轴水平向右，y轴竖直向上。...*计算这个坐标时，由于是基于浏览器窗口中用来显示网页的可视区域，那么也就是说需要拖动滚动条才能看到的区域不算；当你将浏览器窗口缩小时，clientX/clientY 的最大值也会缩小，但始终，它们的最大值不会超过你浏览器可视区域...获取鼠标坐标事件 我们可以通过点击事件回调函数中的event来获取鼠标相关的位置信息addEventListener('click',function(event){ // event对象有很多鼠标事件相关信息...; const py = event.offsetY; //屏幕坐标px、py转标准设备坐标x、y //width、height表示canvas画布宽高度 const x = (...// 屏幕坐标转标准设备坐标addEventListener('click',function(event){ // left、top表示canvas画布布局，距离顶部和左侧的距离(px)
2.通过左边控制横向和纵向滚动条scrollTo(x, y）js = "window.scrollTo(100,400);" driver.execute_script(js) 3.第一个参数x是横向距离...，第二个参数y是纵向距离 ?...2.先用driver.name获取浏览器名称，然后用if语句做个判断 ? 七、兼容性 1.兼容谷歌和firefox/IE ?...--scrollHeight 获取对象的滚动高度。 --scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离。 ...--scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。 --scrollWidth 获取对象的滚动宽度。
5.1 浏览器窗口操作 对于浏览器窗口的尺寸进行控制与获取，如最大化、最小化、指定窗口大小等。...窗口全屏browser.fullscreen_window() 窗口最大化browser.maximize_window() 窗口最小化browser.minimize_window() 自定义窗口大小...（宽X高）browser.set_window_size(1080, 720) 自定义窗口坐标位置与大小（x坐标，y坐标，宽X高）browser.set_window_rect(100, 200, 1080..., 720) 获取窗口的大小（宽X高）browser.get_window_size() 获取窗口的坐标位置，返回一个字典对象browser.get_window_position() 获取窗口的坐标与大小...（x坐标，y坐标，宽X高）browser.get_window_rect() 获取当前窗口的句柄browser.current_window_handle 获取当前所有窗口的句柄browser.window_handles5.2
: {// 鼠标按下时的坐标 x: 0, y: 0 }, dragPos: {// 鼠标移动的偏移量 x: 0, y: 0...方便起见，把它们的位置都相对于浏览器窗口左上角来计算，那么满足下面的条件圆环和柱子区域即相交： 1.圆环的右侧距窗口左侧的距离大于柱子区域左侧距窗口左侧的距离、同时圆环左侧距窗口的距离小于柱子区域右侧距窗口左侧的距离...2.圆环的顶部距窗口顶部的距离小于柱子区域的底部距窗口顶部的距离、同时圆环的底部距窗口顶部的距离大于柱子区域顶部距窗口顶部的距离 翻译成代码如下： { // 检查某个圆环的位置是否在某个柱子区域内...$refs['ring' + order][0].getBoundingClientRect() // 遍历获取柱子区域相当于浏览器窗口的位置信息 ;[0, 1, 2]....= 0 this.startPos.x = 0 this.dragPos.x = 0 this.dragPos.y = 0 } } 到这里游戏的核心功能就完成了
在 Chrome、Firefox、Safari 中，screenX 或者 screenTop 保存的就是窗口距屏幕的位置，将工具栏也包括在里面 总结，并不是每个浏览器都支持上述方法，另外一点，对于距顶部的距离...所以在使用时最好先判断浏览器是否支持在决定取哪一个值（Left和Top或者X和Y） moveTo() 和 moveBy() 都接受两个参数 moveTo(x,y) 表示直接移动到某个坐标(x,...y) moveBy(x,y) 表示在水平 y 和垂直 x 方向上移动的像素，x 为负代表往左，反正往右；y 为负代表往上，反正往下。...resizeBy() 都接受两个参数 reszieTo(x,y) 表示直接改变窗口大小为 x,y resizeBy(x,y) 表示在水平 y 和垂直 x 方向改变多少个像素 与之前的 move 方法类似...导航和打开窗口 window.open() window对象中最为常见的方法，在JS代码里面打开网页的最常见的方法。
可以使用 chrome 的检查模式 -> Console，输入$x('XPath 表达式')即可。...关闭窗口、浏览器。获取元素属性。获取网页源代码、刷新页面。设置窗口大小。输入、点击、清除输入、点击、清除在 Selenium 中对应的方法分别是 send_keys、click、clear。...();logger.info("Width: "+p.x);logger.info("Height: "+p.y);//获取search元素的大小并分别打印Dimensionsize=search.getSize...、最大化和自定义设置窗口具体的大小。...最小化窗口driver.minimize_window()#最大化窗口driver.maximize_window()#将浏览器设置为1000*1000的大小driver.set_window_size
0 隐藏窗口 1 正常大小显示窗口 2 最小化窗口 3 最大化窗口 （6）获取窗口大小及位置 [DllImport("user32.dll")] [return: MarshalAs...int X, //水平坐标 int Y, //垂直坐标 int cx, //宽 int cy, //高 UINT uFlags //窗口定位标识 ); 其中 返回值： BOOL，如果返回值非零表示成功...如果这个窗口非顶部窗口，这个标记对该窗口并不产生影响 HWND_TOP 将窗口置于它所有窗口的顶部 HWND_TOPMOST 将窗口置于其它所有窗口的顶部，并位于任何最顶部窗口的前面。...即使这个窗口不是活动窗口，也维持最顶部状态 x： int，指定窗口新的X坐标 Y： int，指定窗口新的Y坐标 cx： int，指定窗口新的宽度 cy： int，指定窗口新的高度 wFlags： UINT...屏蔽客户区域 SWP_NOMOVE 保持当前位置（X和Y参数将被忽略） SWP_NOOWNERZORDER 不改变所有窗口的位置和排列顺序 SWP_NOREDRAW 窗口不自动重画 SWP_NOREPOSITION
嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发...背景说明： 窗口指的就是我们在电脑端经常使用的软件时候显示Logo，标题和操作最小化，最大化，关闭按钮的标题栏及标题栏下面显示内容的整个窗口，这往往在Web前端中接触的不是那么多，但要开发一款体验不错的...指定为false将不提供默认窗口 autoHideMenuBar 自动隐藏菜单栏，默认不自动隐藏 titleBarStyle 窗口标题栏样式，'default' 控制窗口位置： x...窗口距离屏幕左侧的距离 y 窗口距离屏幕顶部的距离 center 窗口是否居中显示 movable 窗口是否可移动 控制窗口尺寸： width 窗口宽度（像素），默认800...resizable 窗口是否支持缩放，默认支持 minimizable 窗口是否支持最小化，默认支持 maximizable 窗口是否支持最大化，默认支持 渲染进程是否集成Node.js环境
MouseEvent属性 说明 实例值 clientX、clientY 设置或获取鼠标指针位置相对于窗口客户区域的 X、Y 坐标（不包括滚动条） 106+3+300-5+2=406 offsetX、offsetY...设置或获取鼠标指针位置相对于触发事件的对象的X、Y坐标 2 pageX、pageY （只读）相对于整个文档的X、Y坐标以像素为单位的只读属性（包括滚动条） 74+106+3+300-5+2=480 screenX...、screenY 设置或获取获取鼠标指针位置相对于用户屏幕的X、Y坐标 1440+clientX=1846 x、y clientX、clientY的别名 与clientX相等 Element Element...这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为....该元素左上角相对于 HTMLElement.offsetParent 节点的左边界、顶部偏移的像素值 180+3=183 - offsetParent： 返回一个指向最近的(closest,指包含层级上的最近
Windows 徽标键 + 向左键 最大化屏幕左侧的应用或桌面窗口 Windows 徽标键 + 向右键 最大化屏幕右侧的应用或桌面窗口 Windows 徽标键 + Home 最小化活动桌面窗口之外的所有窗口...（在第二个笔划时还原所有窗口） Windows 徽标键 + Shift + 向上键 将桌面窗口拉伸至屏幕顶部和底部 Windows 徽标键 + Shift + 向下键 在垂直方向上还原/最小化活动桌面窗口...Windows 徽标键 + 向左键最大化屏幕左侧的应用或桌面窗口Windows 徽标键 + 向右键最大化屏幕右侧的应用或桌面窗口Windows 徽标键 + Home最小化活动桌面窗口之外的所有窗口（在第二个笔划时还原所有窗口...）Windows 徽标键 + Shift + 向上键将桌面窗口拉伸至屏幕顶部和底部Windows 徽标键 + Shift + 向下键在垂直方向上还原/最小化活动桌面窗口，而宽度保持不变Windows 徽标键...向右键 显示当前选择内容（如果已折叠），或选择第一个子文件夹 向左键 折叠当前所选内容（如果已展开），或选择该文件夹所在的文件夹 End 显示活动窗口底部 Home 显示活动窗口顶部 F11 最大化或最小化活动窗口
Windows 徽标键 + X 打开“快速链接”菜单。 Windows 徽标键 + Y 在 Windows Mixed Reality 与桌面之间切换输入。...Windows 徽标键 + 向上键 最大化窗口。 Windows 徽标键 + 向下键 删除屏幕上的当前应用并最小化桌面窗口。 Windows 徽标键 + 向左键 最大化屏幕左侧的应用或桌面窗口。...Windows 徽标键 + Home 最小化活动桌面窗口之外的所有窗口 Windows 徽标键 + Shift + 向上键 将桌面窗口拉伸至屏幕顶部和底部。...Ctrl + Home（历史记录导航） 如果命令行为空，则将视区移动到缓冲区顶部。否则，请删除命令行中光标左侧的所有字符。...向左键 折叠当前选择内容（如果已展开），或选择该文件夹所在的文件夹。 End 显示活动窗口底部。 Home 显示活动窗口顶部。 F11 最大化或最小化活动窗口。 8.
但是由于各个浏览器表现不一样，分为以下几种情况 【1】html元素没有滚动条时，IE和firefox的client和scroll属性始终相同，且返回可视区的尺寸大小；而safari和chrome表现正常...可以反映和控制页面的滚动；但是chrome和safari浏览器是通过document.body.scrollTop和scrollLeft来控制的 ...y) scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角 y) scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量 窗口或容器元素，最终让它可见。
aboutToAppear中获取应用窗口尺寸，使用窗口宽度减去悬浮窗宽度和右边距让悬浮窗初始靠右。...Cause: ' + JSON.stringify(exception)); }使用getWindowAvoidArea获取顶部状态栏高度和底部导航栏高度。...= event.touches[0].y; break; }手指移动时，获取触摸点相对于应用窗口左上角的X和Y坐标，通过计算设置悬浮窗的position坐标实现拖拽，使用默认参数的弹性跟手动画曲线...轴偏移和设备顶部状态栏高度 }) break; }手指抬起时，通过判断悬浮窗中心在水平方向位于窗口中心的左侧或右侧设置悬浮窗靠左或靠右，如果悬浮窗超出内容区上下边界，则将悬浮窗设置在边界位置...『点赞和评论』，才是我创造的动力；关注小编，同时可以期待后续文章ing，不定期分享原创知识；想要获取更多完整鸿蒙最新学习知识点，可关注B站：码牛课堂鸿蒙开发；
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
