android绘制五环图形,Android使用Canvas实现奥运五环

Canvas的drawXXX方法配合使用Paint可以实现圆点、圆、弧形和曲线等各种颜色的图形，本文将使用drawArc(@NonNull RectF oval, float startAngle, float sweepAngle, boolean useCenter,@NonNull Paint paint)方法实现奥运五环效果。

先来一张效果图，五环是由五个圆环交叉排列组成，每个圆环有自己圆心和代表颜色，半径和圆环之间的间距固定。关键部分在于确定每个圆环的圆心，解决办法是可以指定一个参考坐标，推算出所有圆环的圆心。方案:1：确定左上角蓝色圆环的圆心，根据半径和间距计算其他圆环圆心坐标；方案2：指定画布(Canvas)宽高，得到其中心坐标(cx,cy)，再根据半径和间距计算出所有圆环的圆心坐标。

我选择的是第二种方式实现。原理大致是：

(cx,cy)为画布中心点，即cx = width / 2;cy = height / 2;

因为 h1 = h3,所有 (cx,cy) 也是h2(h2 = 圆环半径 + 圆环间距/2)的中点，到这一步，已经可以确定所有圆环的圆心坐标。private float mSpace; //圆环之间的间距

private float mStroke; //圆环宽度

private float mRadius; //圆环半径

private PointF o1; //第一个圆环的圆心坐标

private PointF o2; //第二个圆环的圆心坐标

private PointF o3; //第三个圆环的圆心坐标

private PointF o4; //第四个圆环的圆心坐标

private PointF o5; //第五个圆环的圆心坐标

float xCenter = getMeasuredWidth()/2;

float yCenter = getMeasuredHeight()/2;

o1 = new PointF(xCenter-(2*mRadius+mSpace),yCenter-(mRadius+mSpace/2)/2);

o2 = new PointF(xCenter,yCenter-