一则通过Android Canvas动态绘制图形的实例介绍

--  by Yongquan

近期开发工作中，需要实现对双摄光圈的细微调节效果，大概效果如下图，当动画比较精细时，如果使用帧动画，需要的图片资源会比较多，且调试比较麻烦。本文介绍如何通过Android Canvas的路径，把几何图形转化为程序进行动态绘制。



首先，对图片进行分析，可以看出图形是由8块一样的扇形拼接而成，每一块图扇形是由一条垂直于y轴的直线，一个45度夹角的直线，以及一段45度的圆弧组成，如下图。



接着我们需要计算圆弧的起止弧度，从下图可以看出，动画的起始弧度为2度，终止弧度接近被x轴平分，取x轴上方23度，x轴下方20度，于是可以算出动画的移动弧度范围是2~67度。



接下来需要把该图形对应到手机坐标系上，并算出扇形的顶点a、b、c的坐标值，如下图。



坐标（0,0）对应view的左上角，右下角的坐标是（w，h），圆心的坐标是（w/2，h/2），圆的半径r = w / 2。于是，当起始圆弧角度为alpha时，结束圆弧的角度beta = alpha + 43（360 /8 = 45，留出2度作为空白区域），此时a、c点的坐标是：
Xa = w / 2 + cos（alpha）* r
Ya = h / 2 + sin（alpha） * r
 
Xc = w / 2 + cos（beta）* r
Yc = h / 2 + sin（beta） * r
 
然后，我们需要根据2条直线的交叉点算出b点的坐标，根据上图，我们可以算出直线ab和bc的方程：
ab的方程是x = Xa，
bc的方程是x – Xc = -(y –Yc)
 
把x = Xa代入bc的方程，可以得到
Xb = Xa；
Yb = Xc – Xa + Yc；
 
算出了a、b、c的坐标，就可以用程序来绘制封闭路径，大概算法如下，
Path path = new Path();
Path.reset();
Path.arcTo(0, 0, w, h, alpha – 90, 43)
Path.lineTo(Xb，Yb)
Path.close();
 
最后，把得到的路径相对圆心作8次45度旋转，完成绘制。
For(i=0; i<8; i++) {
Canvas.drawPath(path, mPaint);
Canvas.rotate(45, w / 2, y / 2);
}