3D金字塔效果图:
之前写过一个伪3D的金字塔,就想着写一个真的3D金字塔。设想可以通过绘制底部顶部是正方形,侧面是等腰梯形组装成一个3D的金字塔。
之前伪3D金字塔的层间隔是通过向数据之间加入一个值,并设置其背景颜色为透明色,不打算使用这种方式,打算自己去修改金字塔图层的样式,需要重新计算每个数值对应的高度:
Load函数的this.series[0].data是从金字塔底部往上走的,data内的graphic.pathArray包含金字塔绘制信息,data[0]的两个底部点位置、金字塔的夹角和对应高度,可以得到底层金字塔的顶部两个的位置,根据data[0]的两个顶点位置、夹角和层间隔高度,可以得到下一层底部的两个点,其他的点以此类推,绘制新的金字塔:
发现label的牵引线位置错了,调整一下:
接下来绘制底部的图形,设置底部两条线从正面看去的夹角,由此得到另两个点的位置:
从效果图上,感觉底部是绘制在正面的上面的,调整一下加入位置:
根据同样的逻辑得到顶部的另外两个顶点,将剩余的四个面绘制出来,并注意绘制的顺序:
看不大出来效果,调整一下角度:
从效果图上看,即使颜色设计的是透明色,平面拼接起来毫无立体的效果,调整一下颜色:
这样看起来,感觉不太美观,调整一下金字塔角度:
鼠标在左边移动的时候有tooltip展示,右边则没有。一开始打算左边的tooltip就不处理,默认使用highcharts的操作,左侧监听移入,展示自定义的tooltip。不过这样的话,tooltip的样式发生更改就要改两次。就不展示highcharts的tooltip,展示自定义的tooltip。
先在正面和右侧面,添加tooltip需要用到的信息:
为容器添加鼠标移动的移出事件:
3D金子就大体完成了,调整浏览器页面大小,金字塔的绘制成这样了:
先将金字塔的角度调整回来,移出之前load添加平面绘制后,再走一遍load的操作。对于tooltip的操作不用再在redraw中在执行一遍:
多次调整页面大小,发现没有问题了。