看到的一个很不错的效果,对于理解svg形变和三次贝塞尔曲线都有很好的帮助,先来看看效果:

svg点赞小星心 gif svg点赞小星心

主要思路

首先我们要分别画出五角星和心形,我们先来看如何绘制出五角星的关键点:

background Layer 1 r a r1 a/2 r1 r2 其中a为360度的5等分角度:2*Math.PI/5 a/2为360度的10等分角度:2*Math.PI/10 r为五角星的外界圆半径 r1为内部五边形的内接圆半径:r1=r*Math.cos(a) r2为内部五边形的外接圆半径:r2=r1/Math.cos(a/2) A B C D E F G H J K

我们可以看到,五角星的关键点有10个,平均的把360度平分,单位角度为2*Math.PI/10,还有一个比较关键的点就是上面一共出现了3个半径的概念:第一个是五角星的外接圆半径r,这个一般由我们控制大小;第二个是五角星内部五边形的内接圆,它的半径为r1,由三角关系可以知道r1=r*Math.cos(a);最后一个就是内部五边形的外接圆为r2,由三角关系可以知道r1=r2*Math.cos(a/2)。

其中我们需要关注的是r和r2,因为B,D,F,H,K这五个点的半径为r2,因为r是由我们控制,而r2和r又有固定的关系,因此我们能够轻易的得到这10个点。

我们注意到上面的K-A-B这一段弧线其实只用二次贝塞尔曲线去绘制即可,但是这里我们采用三次贝塞尔曲线去绘制,具体原因后面再说,我们先看看如何将这样一段圆弧用三次贝塞尔曲线去绘制:

background Layer 1 二次贝塞尔曲线:1个控制点 起始点 控制点1 终止点 三次贝塞尔曲线:2个控制点 起始点 终止点 控制点1 控制点2

看了上面的图我们可以知道,我们只要让控制点1和控制点2重合,那我们就可以利用三次贝塞尔曲线绘制出二次贝塞尔曲线的效果。

现在来看看心形:

background Layer 1 r d d T D0 A0 E0 B0 C B1 E1 A1 D1 r是圆的半径,d为r/Math.sqrt(2,1/2)

心形相对而言简单点,但是要注意圆弧的问题,注意看上图中的T-A0-B0圆弧,很明显,这是一个半圆,但是我们要分割成两个三次贝塞尔曲线,原因待会解释,现在有一个比较麻烦的问题,就是如何用三次贝塞尔曲线是描绘一个1/4圆?

background Layer 1 起始点 终止点 控制点1 控制点2 控制点1和控制点2占比该线段为.551915

这个就需要利用数学来计算了,最后的结果是控制点1和控制点2均占比所在线段的.551915。

B0-C-B1这一段和之前处理五角星一样,用三次贝塞尔曲线去绘制而不是二次。

最后就是形变了,核心思想如下图

background Layer 1 T A0 B0 B1 A1 F H K B D

什么意思呢?我们将两个图形中的五个核心点一一对应,然后每个图形都是利用三次贝塞尔曲线绘制的,我们只要控制这五个点,慢慢的从五角星的位置变成心形的位置,中间的过程仍然使用三次贝塞尔去绘制曲线。

这是一个非常巧妙的过程,要完成这个操作需要满足几个操作:首先就是两个图形的绘制规则要保持统一,就是要采用一个简单通用的绘制方法,这也就是为什么之前一直强调要是用三次贝塞尔曲线去绘制的原因,为的就是保持绘制规则统一;其次就是要保证两边绘制的点数是统一的;最后就是两个图形的绘制方向要保持统一,例如上图中的D会变成A1,H会变成A0,如果D变成A0,H变成A1,那么过度的时候图像就会翻转。

DEMO下载

点击下载 [0积分]一共下载0

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字