随着龙年春节一步步地临近,我也终于能够写下这个标题,从去年画兔子开始,脑海里已经有了画龙的想法了,不过那会只是想想,毕竟比起兔子来讲,龙还是比较复杂的,所以也没再管它,直到去年在ArkTs画兔子的那篇文章里面,有位老哥又提了一句画龙的事情
回复完以后,不知道怎的,熄灭的小火苗又重新燃烧起来了,这才正式开始准备为了迎接龙年春节来画龙,那么第一步就是找素材,毕竟再怎么样,就算给我一只笔我也不可能凭空画条龙出来,只能找张图片照着样子画,网上找了一圈之后,最终选中了一张龙头的图片
本来是为了偷懒,就想画个脑袋,身体跟爪子就不画了,但是大家可以看到,这个龙头的笔画还是蛮多的,而且笔画之间没啥规律可循,只能一笔一笔老老实实画,为了方便起见,这里把画布分成若干个小点,并且获取横纵方向每一个点之间的距离,代码如下
xUnit
就是横坐标方向每个点之间的距离,yUnit
就是纵坐标方向上每一个点之间的距离,centerX
与centerY
分别是中心点的xy坐标,有了这几个变量后,就可以获得画布上任意一个点,由于整个龙头主要以贝塞尔曲线为主,所以如何获取绘制贝塞尔曲线的点变成了关键,当然,也并不是所有部位都要用贝塞尔曲线画,比如龙的两个眼睛和眼球
眼睛和眼球
我们先画龙的左眼,基本由两个圆形与一个椭圆组成,椭圆是左眼框,两个圆形分别是眼睛与眼球,代码如下
defaultStyle
与defaultColor
是两个顶层属性,由于后面每一笔用到的颜色与样式基本一致,所以将这部分公共的代码提取出来,而我们看到,在绘制的时候,选取的x坐标都是以centerX * n+(-)xUnit * m
这样的形式,n与m是任意数值,y坐标用的方式也一样,在后面绘制其他部位的时候,也是主要以这种方式获取坐标,可想而知整个龙头画下来是有多费眼睛,左眼现在画好了,接下来是右眼,同样的找到坐标之后,只需要调用两个drawCircle
函数就可以了,代码如下
两只龙眼睛都好了,有个成语叫画龙点睛,可以看出来一条龙看起来威武不威武,有神不有神,眼睛占很大的比重,我们来看看咱眼睛画的咋样
ummm....这眼神没看出来很威武,但是,有智慧~好了,眼睛画好了,然后画离眼睛最近的部位,也就是眉毛
眉毛
眉毛部分我们就要开始绘制贝塞尔了,可以用一条贝塞尔画完,也可以分几条贝塞尔,我这里决定分几条,主要是每画完一条可以看下位置样式如何,可以多调调,首先是左眉毛用到的Path
接着是右眉毛用到的Path
然后将创建出来的这些Path
绘制在Canvas
中
这样两条眉毛就绘制完毕了,效果如下
鼻子
接着就是鼻子部分,鼻子其实既可以用贝塞尔,也可以使用圆弧来完成,这里选择的是圆弧,我们先来试一下鼻子的第一个褶子,比较靠近眼睛位置,所以圆弧的topLeft
的点可以相对眼睛的坐标来找,第一个褶子的代码如下
然后第一个褶子就出来了
在用同样的方式将剩下的鼻子褶子画出来,代码如下
褶子画完了,接着就是两个大鼻孔了,鼻孔部分同样也是由五个圆弧组成,代码如下
鼻子部分就画完了,我们看下效果
胡子
和鼻子靠的最近的就是胡子,所以接下来我们来画龙的胡子,胡子咱就不能用圆弧这样的几何图形了,所以只能像眉毛一样正儿八经的找坐标画贝塞尔曲线,我们先绘制几根看看效果
那么多代码,其实画出来就几根胡子,我们看看长啥样
看吧,仅仅只画了一小部分胡子,我们在现有基础上继续找出其余胡子的坐标,并将剩余胡子绘制出来,代码与效果如下
龙角
龙角的位置离开眉毛比较近,所以龙角的第一笔的初始坐标肯定是以坐标眉毛为基准,我们找出眉毛的坐标之后,稍作调整,第一个龙角的Path
都创建出来了
然后调用drawPath
将这六条Path
绘制出来,第一根龙角就完成了
其余龙角的坐标也用同样的方式计算出来,再创建出不同阶数的贝塞尔曲线的Path
,代码如下
又创建出了七条贝塞尔曲线的Path
,同样将这些Path
绘制出来
上颚
已经有点样子出来了是不,接下来再选个部位画,这个部位就是嘴巴上颚部分,上颚那边有点锯齿形状的样子,所以这里的贝塞尔稍微画起来会轻松一点,因为前面一根贝塞尔的结束点就可以当成后面那根的起点,我们先来画几根看看
将这六根曲线绘制在Canvas
中,上颚部分的锯齿就画出来了
再将剩余的上颚部分绘制出来,代码如下
上颚部分就完成了,效果如下
牙齿
接下来就是牙齿部分了,可以从原图中可以看到,牙齿分上排与下排,上排是一颗大尖牙和一排小牙,下排基本都是小牙,下排的小牙最终将龙的嘴给构建出来,在画牙齿之前,先将牙龈画上去,没牙龈牙齿也没地方长,上排的牙龈长这样
就是一根根直线,这些直线有啥用呢,每根直线的start
跟end
两点到时候就可以拿来画每一颗牙齿的起始点与终点,下排的牙龈也一样
现在龙嘴巴大致的一个轮廓就已经出来了
然后开始画牙齿了,先创建出上排的大牙齿与小牙齿的Path
再是下排的牙齿的Path
两排牙齿的Path
都创建好之后,剩下的就简单了,调用drawPath
将这些Path
都绘制出来就好了
这牙口虽然没有原图霸气,但看起来也没啥违和感,现在就嘴巴部分而言就差大舌头了,接下去就画大舌头
舌头
这龙的舌头画起来就不像前面那样笔画那么多了,总共就那么几根线,算好坐标点就行,舌头的Path
创建如下
将这五根Path
绘制出来,舌头就有了
耳朵与下巴
嘴巴部分完成了,接下来是下巴与耳朵部分,先画简单的耳朵,耳朵比较靠近龙角和右眉毛,所以以这两个部分的坐标作为参照物,我们耳朵的Path
如下所示
调用drawPath
将耳朵的Path
绘制出来后得到的效果如下
耳朵好了以后就是与耳朵连在一起的下巴,下巴从耳朵开始先是一根曲线,然后再是几根毛一直延伸至下排牙齿的下方,从耳朵开始的曲线我们用一根贝塞尔曲线来绘制,Path
里面的路径会长一些,看代码
得到的效果如下
这部分感觉有点画崩了,这个不太像下巴,反倒有点像椰子鞋的鞋底,先不管这些细节了吧,接着画下巴上的毛,我们从下排牙齿的下方开始画,老规矩先画几根看看效果
先创建了八根曲线的Path
,在Canvas
中绘制后得到的效果如下
多多少少有那么点意思在里头了是不,接着将剩下的下巴毛画完
又创建了九根曲线的Path
,连着刚才的八根曲线,所有下巴毛总共花了十七根曲线画完,当然比起后面要画的脸颊上以及后脑勺上面的毛来讲,这十七根算是小场面了,在Canvas
中将后面九根Path
绘制出来后得到的效果如下
侧边毛
到了这里整个龙头的脸型基本已经完成,就剩下侧边的一些龙须了,准备画这些龙须的时候,我是考虑了好久,有什么取巧的方式来画这些龙须,但是水平有限怎么想都想不到一些合适的办法,所以只能一根根的画,从底下慢慢的画到龙角那边,总共花了47根贝塞尔曲线才画完,这部分就不一一贴代码了,有兴趣的可以看源码,大致的一个代码与效果图如下所示
两根长胡须
接近完成啊,剩下最后一部分那就是两根长长的胡须,这两根胡须除了路径比其余的贝塞尔曲线要来的长一点之外,其他的也没啥区别,直接上代码
这里所有代码就都写完了,来个最终效果图
总结
终于可以喘口气了,从画这个龙头的第一笔开始,到写完这篇文章,前前后后总共花了将近两个月的时间,算是我周期最长的一篇文章了,当然中间一部分原因是这段时间工作实在是忙,熟悉我的朋友应该也发现了,这段时间文章产出比之前少了好多,没办法精力有限,就这个龙头我也只是每天晚上花个一两个小时的时间来画,所以时间跨度才会那么大,中间有想过放弃,也担心过能不能在过年前完成这篇文章,不过好在最终还是完成了这个龙头的绘制,也延续了我每年都要用代码画一次生肖的习惯,好了不啰嗦了,最后一句,新年第一篇,Compose版本的龙头献给各位,祝各位在新的一年里家庭美满,事业顺利,龙年行大运,day day up~