如何使用Javascript计算屏幕位置？

Question

我已将标签添加到图像，我需要确定每个标签的屏幕位置。是否有可能获得每个标签的屏幕位置 ？我也上传了代码，也许 它可能会提供一个洞察。

function labelBox(Ncardinal, radius, domElement) 
{ 
    this.screenVector = new THREE.Vector3(0, 0, 0); 
    this.labelID = 'MovingLabel'+ Ncardinal.name; 
    this.position = convertlatlonToVec3(Ncardinal.lat,Ncardinal.lon).multiplyScalar(radius); 
    this.box = document.createElement('div'); 
    this.box.setAttribute("id", this.labelID); 
    a = document.createElement('a'); 
    a.innerHTML = Ncardinal.name; 
    a.href ='http://www.google.de'; 
    this.box.className = "spritelabel"; 
    this.box.appendChild(a); 
    this.domElement = domElement; 
    this.domElement.appendChild(this.box); 
} 

labelBox.prototype.update = function() 
{ 
    this.screenVector.copy(this.position); 
    this.screenVector.project(camera); 
    var posx = Math.round((this.screenVector.x + 1)* this.domElement.offsetWidth/2); 
    var posy = Math.round((1 - this.screenVector.y)* this.domElement.offsetHeight/2); 
    var boundingRect = this.box.getBoundingClientRect(); 
    //update the box overlays position 
    this.box.style.left = (posx - boundingRect.width) + 'px'; 
    this.box.style.top = posy + 'px'; 
}; 

Answer 1

您可以使用;

Element.getBoundingClientRect(); 

如上所述; https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

返回值是一个DOMRect对象，其中包含只读左， 上，右，下，X，Y，宽度，描述在像素 边界框的高度特性。除宽度和高度之外的属性相对于视口的左上角为 。