金字塔ps素材-Echarts模拟实现3D金字塔

画画工具:ps+手绘板+ipad+procreate+pencil。

简单小场景画法分享~

step1

线搞: 确定基本的构图,用铅笔绘制出线搞,注意透视关系。

step2

铺色: 铺上底色,区分好图层。

step3

明暗: 画出金字塔大致的明暗,用重色压出金字塔的前后遮挡关系,加深轮廓。

step4

细化:画出金字塔的纹理,把粗糙的色块过渡好。

step5

画出一些亮面,细化画面,适量加一些纹理,这样可以让金字塔层次更明显。

1、首先,准备纸张和图片,选择合适的纸张,使用200克以上的卡纸或艺术纸,以保证名片的质感,同时准备好需要用到的图片、文字和图案等素材,首先绘制一个金字塔的模板,可以使用软件或手绘,模板的大小和比例应该与名片一致。

2、其次,将设计好的金字塔图案印刷到准备好的纸张上,然后按照模板的形状裁剪出金字塔形状的名片,对于裁剪出来的名片边缘,可以使用剪刀或者打磨机器等工具进行处理,使得边缘更加光滑。

3、最后,在金字塔的各个面上设计需要展示的内容,例如名字、、公司信息等即可制作完成。

在我们公司全链路

产品设计

中,

UI设计师

以2.5D的形式设计了金字塔形状的分布图。如下图:

我们目前可视化图表有使用Echarts、antv\G2,之相近的是漏斗图,3D效果也未支持金字塔。在搜索后发现highChart的金字塔符合度达90%,奈何需要授权。

只能自己折腾了,实现的具体要求有:

1、保持角度不变(30deg/150deg);

2、支持颜色设置;

3、图例支持交互;

4、支持最小显示;

5、支持tooltips。

有了解Echarts都知道Echarts支持

自定义

图形,我决定采用这中方式实现设计效果。根据上面的要求,决定分几个步骤实现:

1、定义颜色:支持3D效果分别需要配置两面渐变颜色,图例颜色使用每个数组的第一个颜色;

2、预设数据:为了控制大小的同时避免

数量级

相差太大,需要把数值转换成百分比(最大100,最小5)用以坐标计算,同时保留原数值用于tooltips展示;ps:处理后包括(原数值:num、原始百分比:percent,支持最小值用于坐标计算的百分比:value),pyramid3dData为实际数据[{name,value}];

3、计算坐标:

a、从金字塔顶点的图形是个

三角形

,其余都是等边梯形,考虑到3D效果顶部三角形的底边中间点必然向下延伸一段距离?,具体距离应为(顶部y-底右y+(底右x-居中x)*tan(60度)),当梯形时保持平行顶部也需要向下凹陷同样一段距离;

b、从三角形的顶点开始计算,坐标点的顺序从顶点开始计算,

顺时针

开始,梯形的起点(left-top)是上一个图形的终点(bottom-left);

c、计算出转换后坐标点的位置:

4、定义渲染金字塔各层的函数

5、设置并执行

大功告成!

效果基本已经实现,后续有时间再做优化封装。发现有什么需要改进的欢迎

斧正

。