先说下自己绘制虚线的背景:UI设计很新奇,找相关第三方没有完全匹配的(即使有,也不会用,一般不会因一个功能去嵌入一个第三方,只会借鉴第三方来实现,自己实现的更好维护和扩展,且代码量更小) 。
这次需求的实现是借鉴fl_chart第三方来实现的,fl_chart提供了很多样式的图表绘制,代码复杂度高,不易阅读,感兴趣的可以深入了解这个框架,此次虚线的实现是从fl_chart中提炼出来的,其实核心逻辑很简单,就那么十几行代码,后面依次从里面提取一些核心实现,方便日后能更容易实现自定义图表需求。
虚线绘制,首先我们了解实线的绘制,然后把实线转化成虚线,所以必须先了解如何绘制实线。
实线的绘制代码如图:(效果就是一根蓝色竖线)
实线绘制的代码很简单,虚线可以看作是很多很短的实线绘制的,就是很多个子Path构成的,然后执行drawPath。
重点来了,将实线的Path转化成虚线的Path(可以理解为把实线Path转换成有间隔的多个子实线Path),然后进行绘制,代码里每个子Path长度是4,间隔是2,代码如图:
虚线Path转换的核心,需要理解下面两个代码:
1、path.computeMetrics(),获取Path的轮廓。
2、metric.extractPath(distance, distance +dottedLength),从轮廓中获取裁剪出子Path。
裁剪出的子Path通过targetPath.addPath进行添加,然后进行canvas.drawPath就OK了,了解到这个核心逻辑,虚线的实现就很简单了。
注意:任何形状的虚线绘制,你都可以先实现相对应的实线Path,然后通过_convertDotterPath方法来进行转换
⚠️ 有些资料用ListView来实现虚线,能实现一些简单的虚线定制,但不推荐。