伸出你的左手,看看掌心之中是否有着这样一个印记

487 阅读2分钟

我正在参加 码上掘金体验活动,详情:show出你的创意代码块

今天,一觉醒来,睁开左眼,看了一眼我的左手。 我大吃一惊,我的侠岚印不见了!!!!

于是,我决定把它找回来。

结果

分析图形

首先,侠岚印很明显可以分成五个小块。 我们来仔细观察每个小块。 形似太极双鱼,但是其中一条鱼的尾巴特长。

先看看,正常的太极图

image.png image.png


  <path d="m50 0 
                a 50 50 0 1 0 0 100  
                a 25 25 0 0 1 0 -50
                a 25 25 0 1 0 0 -50
                m 20 1 
                a 50 50 0 1 1 0 100
                a 25 25 0 1 1 0 -50
                a 25 25 0 1 0 0 -50
        "
             fill="none" stroke="#f0f"  />

画弧

a 是画椭圆,参数依次为 r1 r2 angle 是否长弧 是否顺时针画圆 x y 。

r1 r2 是长短半轴的长度,我们画圆弧,所以两个相等。 angle表示整体旋转的角度,我们不用旋转,直接0。 最后的 xy是终点。

从起点到终点画弧,半径确定了,但是即便如此还是有可能画出两个圆,四段弧线。

所以还需要确定,弧长是否过半圆,顺时针还是逆时针画圆。

改造

大概就是这样,直接用两个大半圆,加上四个小半圆即可。 但是这里不行, 侠岚印中,长尾的那个的外圆需要放大,然后再接一个略大的圆回去,再转弯。

后来发现,这样好难计算啊,降级为贝塞尔曲线算了。 用两个二次贝塞尔曲线冒充一个半圆,这样会圆润一些。

这个就是偷懒,用一个二次贝塞尔就画半圆的效果。

   <path id="jin" d="
               m50 30 
                a 50 50 0 0 0 -50 50
                q 0 60  110 60  
                q -20 -1  -60 -10 

                q -40 -25  0 -50 
                q 40 -25  0 -50 

                m 10 0  
                q 40 25  0 50 
                q -40 25  0 50
                a 50 50 0  0 0 0 -100

         "

image.png

圆润后

 <path id="jin2" d="
               m50 30 
                a 50 50 0 0 0 -50 50
                q 0 60  110 60  
                q -20 -1  -60 -10 

                q -20 -5   -20 -25 
                q -0  -15   20 -25 

                q 20 -5   23 -25 
                q 0 -20  -23 -25 

                m 10 0  
                q 20 5  20 25 
                q 0 20  -20 25 

                q -20 5  -23  25 
                q -0  20   23 25 

                a 50 50 0  0 0 0 -100

         "
        

image.png

image.png

最后

至于,hover的变色效果和旋转,我就不啰嗦了。

你的侠岚印应是什么颜色呢?