展示如何使用SVG路径,动态绘制曲线,形成精致的追踪特效。
上效果图:
效果图一共绘制了两条路径,一个SVG本身路径,一个是高亮的追逐效果。
动态绘制曲线是用 DashPathEffect(float intervals[], float phase)
完成。
这个API,很多人不熟悉,举个例子:
Paint p = new Paint(Paint.ANTI_ALIAS_FLAG);
p.setStyle(Style.STROKE);
p.setColor(Color.WHITE);
p.setStrokeWidth(1);
PathEffect effects = new DashPathEffect(new float[] { 1, 2, 4, 8}, 1);
p.setPathEffect(effects);
canvas.drawLine(0, 40, mWidth, 40, p);
代码中的float数组,必须是偶数长度,且>=2,指定了多少长度的实线之后再画多少长度的空白。
如本代码中,绘制长度1的实线,再绘制长度2的空白,再绘制长度4的实线,再绘制长度8的空白,依次
重复。phase是起始位置的偏移量,代码中偏移量为1。
详见我的CSDN博客:使用SVG路径图制作线追踪特效