Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

球状标签云的螺旋曲线布局

  球状标签云的难点并不在于旋转和3D投射,这些变换都是死的,只要有3D基础就能实现。其实球状标签云最复杂的地方是每个标签的初始位置计算。这个计算方法没有固定套路,最终效果也基本是在这个步骤上决定的。现在咱就来说说使用螺旋曲线实现的标签布局。
  要把标签布局到球体表面上最容易想到的就是使用球体方程,但是球体方程的参数式需要两个参数,因此我们需要二重循环来遍历。这样不仅会造成分布不均匀,而且标签的数量也很难控制。添加一个循环次数就会多处一条经线或纬线,所以标签的数量总是一个非质数。
  其实使用螺旋曲线比使用球体方程还简单,因为螺旋曲线只有一个参数,所以只需要一个循环来遍历所有的标签即可。螺旋曲线是至少存在一个旋转面的曲线,圆柱上的螺旋曲线就是一个旋转面和一个常数函数组成的,圆锥上的螺旋曲线也是一个旋转面和一个线性函数组成的。那么球体上的螺旋曲线当然可以推出是一个旋转面和一个半圆函数组成的。自变量是y坐标,通过半圆函数可以计算出旋转的半径,然后把这个半径在旋转面上旋转即可。旋转的角度也可以通过y坐标和旋转圈数来计算。

  现在我们有n个标签,需要以螺旋曲线的方式分布到单位球面上,从北极到南极中间旋转c圈。我们可以得到这个螺旋曲线的参数方程,并把它用程序写出来。
var position=(function(n,c){
  var s=[],i,a,x,y,z;
  for(i=0;i<n;i++){ //遍历所有标签
    y=2*i/n-1; //计算出y,它平均分布在螺旋曲线上
    a=y*Math.PI*c; //a是旋转角,由于旋转c圈,所以乘以c
    r=Math.sin(Math.acos(y)); //计算旋转半径
    x=Math.sin(a)*r; //旋转x坐标
    z=Math.cos(a)*r; //旋转y坐标
    //保存计算结果
    s.push(x,y,z);
  };
  return s;
})(n,c);
  这样就可以得到每一个标签以螺旋曲线方式分布在球面上的坐标了。不过这里只是实现了简单的螺旋曲线而已,如果要做出更好的用户体验还需要做细节的调整。比如两极点上的旋转半径为0,绘制出来的球状标签云在极点的标签就不动,这效果当然不好。所以可以避开两个极点也就是遍历标签时候修改一下开始和结束位置。把这些细节处理好才能做出漂亮的球状标签云效果。
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^