龙年了,一起用Compose来画龙头吧

随着龙年春节一步步地临近,我也终于能够写下这个标题,从去年画兔子开始,脑海里已经有了画龙的想法了,不过那会只是想想,毕竟比起兔子来讲,龙还是比较复杂的,所以也没再管它,直到去年在ArkTs画兔子的那篇文章里面,有位老哥又提了一句画龙的事情

回复完以后,不知道怎的,熄灭的小火苗又重新燃烧起来了,这才正式开始准备为了迎接龙年春节来画龙,那么第一步就是找素材,毕竟再怎么样,就算给我一只笔我也不可能凭空画条龙出来,只能找张图片照着样子画,网上找了一圈之后,最终选中了一张龙头的图片

本来是为了偷懒,就想画个脑袋,身体跟爪子就不画了,但是大家可以看到,这个龙头的笔画还是蛮多的,而且笔画之间没啥规律可循,只能一笔一笔老老实实画,为了方便起见,这里把画布分成若干个小点,并且获取横纵方向每一个点之间的距离,代码如下

xUnit就是横坐标方向每个点之间的距离,yUnit就是纵坐标方向上每一个点之间的距离,centerXcenterY分别是中心点的xy坐标,有了这几个变量后,就可以获得画布上任意一个点,由于整个龙头主要以贝塞尔曲线为主,所以如何获取绘制贝塞尔曲线的点变成了关键,当然,也并不是所有部位都要用贝塞尔曲线画,比如龙的两个眼睛和眼球

眼睛和眼球

我们先画龙的左眼,基本由两个圆形与一个椭圆组成,椭圆是左眼框,两个圆形分别是眼睛与眼球,代码如下

defaultStyledefaultColor是两个顶层属性,由于后面每一笔用到的颜色与样式基本一致,所以将这部分公共的代码提取出来,而我们看到,在绘制的时候,选取的x坐标都是以centerX * n+(-)xUnit * m这样的形式,n与m是任意数值,y坐标用的方式也一样,在后面绘制其他部位的时候,也是主要以这种方式获取坐标,可想而知整个龙头画下来是有多费眼睛,左眼现在画好了,接下来是右眼,同样的找到坐标之后,只需要调用两个drawCircle函数就可以了,代码如下

两只龙眼睛都好了,有个成语叫画龙点睛,可以看出来一条龙看起来威武不威武,有神不有神,眼睛占很大的比重,我们来看看咱眼睛画的咋样

ummm....这眼神没看出来很威武,但是,有智慧~好了,眼睛画好了,然后画离眼睛最近的部位,也就是眉毛

眉毛

眉毛部分我们就要开始绘制贝塞尔了,可以用一条贝塞尔画完,也可以分几条贝塞尔,我这里决定分几条,主要是每画完一条可以看下位置样式如何,可以多调调,首先是左眉毛用到的Path

接着是右眉毛用到的Path

然后将创建出来的这些Path绘制在Canvas

这样两条眉毛就绘制完毕了,效果如下

鼻子

接着就是鼻子部分,鼻子其实既可以用贝塞尔,也可以使用圆弧来完成,这里选择的是圆弧,我们先来试一下鼻子的第一个褶子,比较靠近眼睛位置,所以圆弧的topLeft的点可以相对眼睛的坐标来找,第一个褶子的代码如下

然后第一个褶子就出来了

在用同样的方式将剩下的鼻子褶子画出来,代码如下

褶子画完了,接着就是两个大鼻孔了,鼻孔部分同样也是由五个圆弧组成,代码如下

鼻子部分就画完了,我们看下效果

胡子

和鼻子靠的最近的就是胡子,所以接下来我们来画龙的胡子,胡子咱就不能用圆弧这样的几何图形了,所以只能像眉毛一样正儿八经的找坐标画贝塞尔曲线,我们先绘制几根看看效果

那么多代码,其实画出来就几根胡子,我们看看长啥样

看吧,仅仅只画了一小部分胡子,我们在现有基础上继续找出其余胡子的坐标,并将剩余胡子绘制出来,代码与效果如下

龙角

龙角的位置离开眉毛比较近,所以龙角的第一笔的初始坐标肯定是以坐标眉毛为基准,我们找出眉毛的坐标之后,稍作调整,第一个龙角的Path都创建出来了

然后调用drawPath将这六条Path绘制出来,第一根龙角就完成了

其余龙角的坐标也用同样的方式计算出来,再创建出不同阶数的贝塞尔曲线的Path,代码如下

又创建出了七条贝塞尔曲线的Path,同样将这些Path绘制出来

上颚

已经有点样子出来了是不,接下来再选个部位画,这个部位就是嘴巴上颚部分,上颚那边有点锯齿形状的样子,所以这里的贝塞尔稍微画起来会轻松一点,因为前面一根贝塞尔的结束点就可以当成后面那根的起点,我们先来画几根看看

将这六根曲线绘制在Canvas中,上颚部分的锯齿就画出来了

再将剩余的上颚部分绘制出来,代码如下

上颚部分就完成了,效果如下

牙齿

接下来就是牙齿部分了,可以从原图中可以看到,牙齿分上排与下排,上排是一颗大尖牙和一排小牙,下排基本都是小牙,下排的小牙最终将龙的嘴给构建出来,在画牙齿之前,先将牙龈画上去,没牙龈牙齿也没地方长,上排的牙龈长这样

就是一根根直线,这些直线有啥用呢,每根直线的startend两点到时候就可以拿来画每一颗牙齿的起始点与终点,下排的牙龈也一样

现在龙嘴巴大致的一个轮廓就已经出来了

然后开始画牙齿了,先创建出上排的大牙齿与小牙齿的Path

再是下排的牙齿的Path

两排牙齿的Path都创建好之后,剩下的就简单了,调用drawPath将这些Path都绘制出来就好了

这牙口虽然没有原图霸气,但看起来也没啥违和感,现在就嘴巴部分而言就差大舌头了,接下去就画大舌头

舌头

这龙的舌头画起来就不像前面那样笔画那么多了,总共就那么几根线,算好坐标点就行,舌头的Path创建如下

将这五根Path绘制出来,舌头就有了

耳朵与下巴

嘴巴部分完成了,接下来是下巴与耳朵部分,先画简单的耳朵,耳朵比较靠近龙角和右眉毛,所以以这两个部分的坐标作为参照物,我们耳朵的Path如下所示

调用drawPath将耳朵的Path绘制出来后得到的效果如下

耳朵好了以后就是与耳朵连在一起的下巴,下巴从耳朵开始先是一根曲线,然后再是几根毛一直延伸至下排牙齿的下方,从耳朵开始的曲线我们用一根贝塞尔曲线来绘制,Path里面的路径会长一些,看代码

得到的效果如下

这部分感觉有点画崩了,这个不太像下巴,反倒有点像椰子鞋的鞋底,先不管这些细节了吧,接着画下巴上的毛,我们从下排牙齿的下方开始画,老规矩先画几根看看效果

先创建了八根曲线的Path,在Canvas中绘制后得到的效果如下

多多少少有那么点意思在里头了是不,接着将剩下的下巴毛画完

又创建了九根曲线的Path,连着刚才的八根曲线,所有下巴毛总共花了十七根曲线画完,当然比起后面要画的脸颊上以及后脑勺上面的毛来讲,这十七根算是小场面了,在Canvas中将后面九根Path绘制出来后得到的效果如下

侧边毛

到了这里整个龙头的脸型基本已经完成,就剩下侧边的一些龙须了,准备画这些龙须的时候,我是考虑了好久,有什么取巧的方式来画这些龙须,但是水平有限怎么想都想不到一些合适的办法,所以只能一根根的画,从底下慢慢的画到龙角那边,总共花了47根贝塞尔曲线才画完,这部分就不一一贴代码了,有兴趣的可以看源码,大致的一个代码与效果图如下所示

两根长胡须

接近完成啊,剩下最后一部分那就是两根长长的胡须,这两根胡须除了路径比其余的贝塞尔曲线要来的长一点之外,其他的也没啥区别,直接上代码

这里所有代码就都写完了,来个最终效果图

demo地址

总结

终于可以喘口气了,从画这个龙头的第一笔开始,到写完这篇文章,前前后后总共花了将近两个月的时间,算是我周期最长的一篇文章了,当然中间一部分原因是这段时间工作实在是忙,熟悉我的朋友应该也发现了,这段时间文章产出比之前少了好多,没办法精力有限,就这个龙头我也只是每天晚上花个一两个小时的时间来画,所以时间跨度才会那么大,中间有想过放弃,也担心过能不能在过年前完成这篇文章,不过好在最终还是完成了这个龙头的绘制,也延续了我每年都要用代码画一次生肖的习惯,好了不啰嗦了,最后一句,新年第一篇,Compose版本的龙头献给各位,祝各位在新的一年里家庭美满,事业顺利,龙年行大运,day day up~

相关推荐
冰镇屎壳郎3 分钟前
前端安全 常见的攻击类型及防御措施
前端·安全·前端安全
2401_857617628 分钟前
“无缝购物体验”:跨平台网上购物商城的设计与实现
java·开发语言·前端·安全·架构·php
2401_8574396917 分钟前
智慧社区电商系统:提升用户体验的界面设计
前端·javascript·php·ux
我是高手高手高高手27 分钟前
ThinkPHP8多应用配置及不同域名访问不同应用的配置
linux·服务器·前端·php
小李小李不讲道理29 分钟前
行动+思考 | 2024年度总结
前端·程序员·年终总结
csdnLN1 小时前
$.ajax() 对应事件done() 、fail()、always() 的用法
前端·javascript·ajax
甜味橘阳1 小时前
echarts地图可视化展示
前端·javascript·echarts
bloxed2 小时前
前端文件下载多方式集合
前端·filedownload
余生H2 小时前
前端Python应用指南(三)Django vs Flask:哪种框架适合构建你的下一个Web应用?
前端·python·django
LUwantAC2 小时前
CSS(四)display和float
前端·css