如何使用Javascript计算屏幕位置?
我已将标签添加到图像中,我需要确定每个标签的屏幕位置。有可能得到吗 每个标签的屏幕位置?我也上传了代码 这可能会给我们一个启示如何使用Javascript计算屏幕位置?,javascript,css,three.js,Javascript,Css,Three.js,我已将标签添加到图像中,我需要确定每个标签的屏幕位置。有可能得到吗 每个标签的屏幕位置?我也上传了代码 这可能会给我们一个启示 function labelBox(Ncardinal, radius, domElement) { this.screenVector = new THREE.Vector3(0, 0, 0); this.labelID = 'MovingLabel'+ Ncardinal.name; this.position = convertlatlonToVec3
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';
};
你可以使用
Element.getBoundingClientRect();
如中所述
返回的值是一个DOMRect对象,其中包含只读left,
顶部、右侧、底部、x、y、宽度和高度属性描述
以像素为单位的边框框。除宽度和高度以外的其他属性是
相对于视口的左上角