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-