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

【问题标题】：How to calculate the screen position using Javascript?如何使用Javascript计算屏幕位置？
【发布时间】：2017-02-06 08:36:46
【问题描述】：

我已经为图像添加了标签，我需要确定每个标签的屏幕位置。有没有可能得到每个标签的屏幕位置？我也上传了代码也许它可能会提供见解。

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';
};

【问题讨论】：

标签： javascript css three.js

【解决方案1】：

你可以使用；

Element.getBoundingClientRect();

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

返回值为一个DOMRect对象，其中包含只读left， top、right、bottom、x、y、width、height 属性描述以像素为单位的边框。宽度和高度以外的属性是相对于视口的左上角。

【讨论】：