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

返される値は、読み取り専用 上、右、下、X、Y、幅、ピクセル単位で 境界ボックスを記述するheightプロパティ、左が含まDOMRectオブジェクトです。幅と高さ以外のプロパティは、ビューポートの左上を基準にして です。