我正在参加 码上掘金体验活动,详情:show出你的创意代码块
今天,一觉醒来,睁开左眼,看了一眼我的左手。 我大吃一惊,我的侠岚印不见了!!!!
于是,我决定把它找回来。
结果
分析图形
首先,侠岚印很明显可以分成五个小块。 我们来仔细观察每个小块。 形似太极双鱼,但是其中一条鱼的尾巴特长。
先看看,正常的太极图
<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
"
圆润后
<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
"
最后
至于,hover的变色效果和旋转,我就不啰嗦了。
你的侠岚印应是什么颜色呢?