用css+html制作脑图–美化篇

上一篇介绍了如何用纯样式和html制作出简单版脑图的结构,这一篇就大概讲一讲实际运用中如何将技术落地

先看看用样式画完的脑图结构

简直low爆了,但是大家要透过现象看本质嘛,网上大多数的脑图都是用js来算位置的,这个直接就用html结构就解决了,只需要调整间距之类的就可以了,省心很多

下面呢就要来美化一下这个脑图,美化之后呢大概是这个样子滴

有没有一种野鸡变凤凰的感觉?~·

大概说一下思路,结构我们用css和html,但是他们之间的线条呢,我们用canvas来画,大概就是在每一个节点之间画一条3次贝塞尔曲线的样子,我们可以用js来获取两个节点之间的起点和终点,大家注意哦,是直接可以获取了,而不用费心去算每一个节点的位置,这就是本方案的优势

其实用svg来画也更方便一点,用canvas来画呢有一个缺点就是有点模糊,需要进行一个防止模糊的处理步骤,用svg就没有这个问题,但是由于项目中要把这个生成的脑图生成图片,所以用canvas更加方便一点

下面简单说一下画的思路

1、分别获取到一个节点的offsetLeft和offsetTop,以及他的父节点的offsetLeft和offsetTop,这样我们就有了曲线的起点和终点

2、获取到参数后然后用canvas的bezierCurveTo三次贝塞尔曲线方法来画,由于我们已经有了开始点和结束点,那么控制点1 和控制点2 也就可以根据开始点和结束点来生成

网上偷个大神的图片来看一下

 

context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

好啦思路有了,实现就很简单,大家问为什么不贴出来代码呢

首先我是这样想的,如果贴出来代码可能我的思路就会限制了你,本身这个东西我觉得原理都很简单,实现起来也不会很复杂

其次如果你有了思路都实现不了,我给了代码我觉得更完蛋

发表评论

电子邮件地址不会被公开。 必填项已用*标注