object.getBoundingClientRect()获取对象的位置

本文介绍了一种高效获取网页元素位置的方法,使用getBoundingClientRect()方法可以直接获取元素相对于浏览器视口的左、上、右、下四个方向的位置坐标。

Retrieves an object that specifies the bounds of a collection of TextRectangle objects.

Syntax

oRect = object.getBoundingClientRect()

Return Value

Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.

Remarks

This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. In Microsoft® Internet Explorer 5, the window's upper-left is at 2,2 (pixels) with respect to the true client.

该方法获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。也不好理解,下面用图说明下。

该方法已经不再是IE Only了,FF3.0+和Opera9.5+已经支持了该方法,可以说在获得页面元素位置上效率能有很大的提高,在以前版本的Opera和Firefox中必须通过循环来获得元素在页面中的绝对位置。

onMouseDown(e) { if (!this.validateMouseDown(e)) { return; } // 检查是否正在进行旋转操作 if (this.viewer.rotationDragging) { return; // 如果正在旋转,直接返回 } let rect = this.domElement.getBoundingClientRect(); let x = e.clientX - rect.left; let y = e.clientY - rect.top; this.startPosition.x = x; this.startPosition.y = y; if (e.shiftKey) { this.selectMode = true; } if (this.logMessages) { console.log(this.constructor.name + ": onMouseDown"); } e.preventDefault(); this.viewer.setArrowPos(); this.startDragging(null); let target = this.hoveredElements.find( (el) => el.object._listeners && el.object._listeners["drag"] && el.object._listeners["drag"].length > 0, ); if (e.altKey && e.button === 0 && !store.state.canEditAnnotate) { if (this.viewer.annotateTool.startMoveAnnotate(e, { x, y })) return; } if (this.viewer.annotateTool.getSplitlineMode() && e.button === 0) { this.viewer.annotateTool.splitLine(this.startPosition); this.viewer.dragFlag = false; this.startDragging(null); return; } if (target) { // 检查是否点击了旋转控制器 if (target.object.name === "rotationHandle") { // 委托给 polygonSign 的 RotationController 处理 if ( this.viewer.annotateTool.annotateObj ?.handleRotationMouseDown ) { this.viewer.annotateTool.annotateObj.handleRotationMouseDown( this.mouse.x, ); this.startDragging(target.object); // 开始拖拽 } return; // 直接返回,不执行后续逻辑 } if (e.ctrlKey) { const category = store.state.urlParam.category; const type = target.object.parent?.combType; // * ---------------------------------------------- 禁用限制 const isRect = isRectangleGroup(target.object.parent); const typeForDisabled = isRect ? "square" : type; const isDisabled = isTypeDisabled(typeForDisabled); if (isDisabled) { message.warning(TYPE_DISABLE_TIP); return; } // * ---------------------------------------------- 井盖限制 // 井盖场景,非矩形,不能进行新建、编辑和删除 if (category === "ManholeCover") { const isRect = isRectangleGroup(target.object.parent); if (!isRect) { message.warning(MANHOLE_COVER_SCENE_DISABLE_TIP); return; } } // * ---------------------------------------------- 交通标志限制 // 交通标志场景,非 box 类型元素不可编辑 if (category === "TrafficSign" && type !== "box") { message.warning(TRAFFIC_SIGN_SCENE_DISABLE_TIP); return; } this.viewer.dragFlag = true; // 鼠标按下 有drag事件 允许拖拽点 if (target.object?.geometry.type === "SphereGeometry") { let selectType = target.object.parent?.combType; //鼠标按下时如果时线段的点,就要先设置下选择类型,选择obj,mouseup鼠标松开时拿不到selectType obj是因为move是在click之前的,click会先清除选择在选中类型obj都mouseup鼠标松开完了晚了 鼠标松开吸附会用到类型 this.viewer.annotateTool.selectType = selectType; this.viewer.annotateTool.setAnnotateObj(selectType); // this.viewer.annotateTool.annotateObj.curSelect = this.drag.object; { OperationRecord.instance().setCurrentOperation( "type", "MovePoint", ); OperationRecord.instance().setCurrentOperation( "order", 2, ); OperationRecord.instance().setCurrentOperation( "position", target.object.position.clone(), ); OperationRecord.instance().setCurrentOperation( "objectId", Number(target.object.name), ); OperationRecord.instance().setCurrentOperation( "shapeId", Number(target.object.parent.name), ); OperationRecord.instance().setCurrentOperation( "selectType", selectType, ); } } } if (!store.state.canEditAnnotate) { this.startDragging(target.object, { location: target.point }); } } else { this.viewer.dragFlag = false; // 鼠标按下 没有drag事件 不允许拖拽点 if (!this.drag) { //鼠标按下时,如果没有drag表示,没有点击标注操作,这个时候要生成一个默认的drag,Control 移动场景时要用到 this.startDragging(null); } } }
最新发布
08-14
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值