大家好,前段时间呢,我把我的这个主页给他更新了一下,以前的那个代码案例啊,全部都放在这里面了。这一次呢想给大家分享的一个是我写了一个 cameras 项目,我管他叫灵动 cameras, 放在这里了,大家如果想看的话也可以进我的主页点这里进, 效果呢是长这样子的,是一个 canvas 的一个曲线图,然后里面有填充的渐变色,然后右边呢也可以对他进行调整,比如说我们把这个速度调快,速度调慢,然后线宽, 然后密度都是可以动态调整的。那这个项目用来入门是一个非常好的一个项目,你可以了解 carries 它最基础的应用,以及我们市面上做可视化的基础原理大致都是什么,你总会知道。好了,我们现在开始,我们首先拆解一下 这个里面它包含那些元素,左边是 cameras 区域,右边是控制区域,左边的 cameras 里面又包含哪些呢?线条,然后下面的填充还有动画。首先我们拆解线条呢,它就变成了这样,这样的一个线条它是怎么做的呢?首先我们知道 cameras 里面 如果要画这种图的话,有几种方法呢?最常见的 lie to 对不对?然后还有 arc, 然后还有呢就是它的贝塞尔曲线,贝塞尔曲线分三次贝塞尔曲线和二次贝塞尔曲线, 那我们这里呢,用的就是三次 best 曲线。首先我们说一下他们之间的优缺点啊, like to, 如果你用 like to 的话,我们都知道 like to 是在 cameras 上面画一个指定一个点,然后再指定另外一个点, 相当于你画一条直线一样,但我们刚才那是曲线,画出来会有什么结果呢?我们知道如果是这样画的话没有什么问题,但是就算你画的很细致, 他也会有锯齿的感觉,那么第一条就不能用,那么第二条我们用 arx 方式, arx 方式倒是非常简洁,但是网上出现了一种 ax 方式,是指定他的点位,就是他是由很多很多个点组成的,就是有很多很多个点,从这得得得 这样,那这样画出来结果就会导致如果你的线宽画的很小很小的话,你就能清晰的看出他是由很多很多个小点组成的。这种情况在某一些特殊场景下,可能不太符合我们的要求,我们就选用了贝塞尔取件,那么这里二次贝塞尔取件和三次贝塞尔取件他其实都是可以用的。这里我为了方便, 我就用了一个三次贝斯二曲线。三次贝斯二曲线和二次的区别在于二次啊,他只能指定一个点,就是我们可以看到这个图上面 p 零是开始的位置,我们需要指定,比如说我们现在先说这个二次,二次的话,我们需要指定两个点,首先是需要指定一个 p 一点,再指定一个 p 二点,那这样他画出来的就是这么样一个曲线,如果你的 p 一拉的越高,越往上拉,那这个曲线是不是就越往上升, 就形成了所谓的波高,就是有这里的高度。二次是用了一个点,那三次他是用两个点,你可以指定两个点的位置。那么举个例子, 比如说这里是三个点, p 一、 p 二、 p 三,那 p 一已经在这了,它这里已经是曲线,那如果我把 p 二拉到这个下面, 这个曲线是不是也跟着下来?然后如果我把 p 三往上拉,他就又会回去,就能够形成像我们这样的一个曲线。好了,这个曲线画好了,那怎么画一整副的曲线呢?这里我们就需要把这个里面的注视解开 给大家看一下,这里就画成了一整副的曲线,对不对?那这里是怎么画的呢?这里原理啊,是这里啊有个 drum map 专卖部,他做了一个循环地规,那地规干嘛呢?地规一直从这生成这一条线,如果这条线呢,超过了这个 w 位置,这个 w w 就是这个整副 canvas 的宽度,如果超过了这个呢?那就把这幅 canvas 先保存下来,那这样循环生成呢?就能够生成这样一个曲线了。