如何避免标签在JavaScript中重叠? [英] How to avoid labels overlapping in JavaScript?
本文介绍了如何避免标签在JavaScript中重叠?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个3D图像(如下所示),其中一些标签重叠。如何分隔标签?
I have an image which is in 3D (shown below) where some of the labels are overlapping. How can I separate the labels?
CODE SNIPPET:
labelBox.prototype.update = function()
{
camera.updateMatrixWorld();
this.position.project(camera);
var screenvector = new THREE.Vector3();
screenvector.copy(this.position);
oldlabelpos.push(screenvector);
//this.position.normalize();
this.posx = Math.round((this.position.x + 1)* this.domElement.offsetWidth/2 + webglviewport.left);
this.posy = Math.round((1 - this.position.y)* this.domElement.offsetHeight/2);
var boundingRect = this.box.getBoundingClientRect(); //getBoundingClientRect() method returns the
//size of element (here it is box) and its position relative to viewport
//update the box overlays position
this.box.style.left = this.posx + 'px';
this.box.style.top = this.posy + 'px';
this.occludeLabel(this.box, this.marker);
};
labelBox.prototype.LabelUpdateFn = function()
{
//var labels = document.getElementById('MovingLabel1');//.getElementsByClassName('spritelabel');
//labels = $(root).find(".spritelabel");
for(var k=0; k<oldlabelpos.length; k++)
{
this.reposition = new THREE.Vector3();
this.reposition = convertlatlonToVec3(oldlabelpos[k].x, oldlabelpos[k].y).multiplyScalar(radius);
this.reposition.normalize();
camera.updateMatrixWorld();
this.reposition.unproject(camera);
this.newposx = Math.round((this.reposition.x + 1)* this.domElement.offsetWidth/2 + webglviewport.left) - this.posx;
this.newposy = Math.round((1 - this.reposition.y)* this.domElement.offsetHeight/2) - this.posy;
var boundingRect = this.box.getBoundingClientRect();
this.box.style.left = (this.newposx + boundingRect.width) + 'px';
this.box.style.top = this.newposy + 'px';
//$(this.box).css(left) =
this.occludeLabel(this.box, this.marker);
//var updatedpos = {updateposx, updateposy};
//newlabelpos.push(updatedpos);
}
}
推荐答案
你说避免标签重叠在3D你想检查剪切的视口。
例如:请参阅文章
If you say "Avoid label overlapping" in 3D you want to checkout "Clipping" for a viewport. As an example: See this article
这篇关于如何避免标签在JavaScript中重叠?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文