0
点赞
收藏
分享

微信扫一扫

【android】绘制圆环的三种方式

吴陆奇 2023-03-28 阅读 58


在android中要绘制圆环,暂时知道有三种方式。分别是:


一、设置画笔的style为stoke,绘制圆

这里是先绘制内圆,然后绘制圆环(圆环的宽度就是paint设置的paint.setStrokeWidth的宽度),最后绘制外圆。

请看核心源码:



[java] 
   view plain
   copy 
   
 
   
 
   
 
 
1. <span xmlns="http://www.w3.org/1999/xhtml" style="">package yan.guoqi.rectphoto;  
2.   
3. import android.content.Context;  
4. import android.graphics.Canvas;  
5. import android.graphics.Color;  
6. import android.graphics.Paint;  
7. import android.graphics.Paint.Style;  
8. import android.graphics.RectF;  
9. import android.util.AttributeSet;  
10. import android.widget.ImageView;  
11.   
12. public class DrawImageView extends ImageView {  
13.   
14. private final Paint paint;  
15. private final Context context;   
16. public DrawImageView(Context context, AttributeSet attrs) {  
17. super(context, attrs);  
18. // TODO Auto-generated constructor stub  
19. this.context = context;  
20. this.paint = new Paint();  
21. this.paint.setAntiAlias(true); //消除锯齿   
22. this.paint.setStyle(Style.STROKE);  //绘制空心圆或 空心矩形   
23.               }   
24. @Override  
25. protected void onDraw(Canvas canvas) {  
26. // TODO Auto-generated method stub  
27. int center = getWidth()/2;  
28. int innerCircle = dip2px(context, 83); //内圆半径  
29. int ringWidth = dip2px(context, 10);   //圆环宽度  
30.           
31. // 第一种方法绘制圆环  
32. //绘制内圆   
33. this.paint.setARGB(255, 138, 43, 226);  
34. this.paint.setStrokeWidth(2);  
35. this.paint);          
36.           
37. //绘制圆环   
38. this.paint.setARGB(255, 138, 43, 226);  
39. this.paint.setStrokeWidth(ringWidth);  
40. 1 +ringWidth/2, this.paint);         
41.           
42. //绘制外圆   
43. this.paint.setARGB(255, 138, 43, 226);  
44. this.paint.setStrokeWidth(2);  
45. this.paint);         
46.           
47. super.onDraw(canvas);  
48.           
49.   
50.   
51.     }  
52.   
53.   
54. /* 根据手机的分辨率从 dp 的单位 转成为 px(像素) */    
55. public static int dip2px(Context context, float dpValue) {    
56. final float scale = context.getResources().getDisplayMetrics().density;    
57. return (int) (dpValue * scale + 0.5f);    
58.     }    
59. }  
60. </span>


总结:

1,这种分三次来绘制的方法,可以将圆环的内圆 圆环 和外圆的颜色设成不一样的,对paint进行三次设置。还可以将绘制圆环的paint透明度设成10左右就会有圆环透明的效果。

2,三次绘制时的canvas.drawCircle圆心都是(center,center),但三次半径确实不一样的。尤其是第二次绘制圆环的时候,半径是innerCircle + 1 +ringWidth/2。这里的加1是第一次外圆paint.setStrokeWidth(2);宽度设成2,也就是说单条线的宽度1。后面的ringWidth/2也是同理。

示例如下(底色是预览摄像头的视频):

【android】绘制圆环的三种方式_java


二、利用canvas.drawArc实现

上文已经绘制了圆环,但仔细分析就知,如果只需要圆环的话,那么只绘制圆环就可以,不用画内圆和外圆了。事实证明也是如此。

 但是要做成和下面的圆环透明度不一的效果上面的方法还是达不中:


【android】绘制圆环的三种方式_java_02

canvas.drawArc(new RectF(0, 0, 128, 128), 0, 360, true, new Paint( Paint.ANTI_ALIAS_FLAG)); 参数1:圆的范围大小 参数2:起始角度 参数3:圆心角角度,360为圆,180为半圆 参数4:中心 参数5:画笔Paint,可以设置画线or填充,设置颜色,设置线的粗细等等第四个参数


最关键的是第一个参数RectF,在什么地方绘制圆弧就是由这个矩形的位置确定的。根据上文,这个RectF应该是内切圆弧的外圆(尽管没画,但还是有)。所以其左上点及右下点坐标为:

RectF rect2 = new RectF(center-(innerCircle + 1 +ringWidth/2),center-(innerCircle + 1 +ringWidth/2), center+(innerCircle + 1 +ringWidth/2), center+(innerCircle + 1 +ringWidth/2));

     为了绘制出透明度不同的圆环分两部来绘制:

this.paint.setARGB(200, 127, 255, 212);
         this.paint.setStrokeWidth(ringWidth);
         //绘制不透明部分
         canvas.drawArc(rect2, 180+startAngle, 90, false, paint);
         canvas.drawArc(rect2, 0+startAngle, 90, false, paint);
         //绘制透明部分
         this.paint.setARGB(30, 127, 255, 212);
         canvas.drawArc(rect2, 90+startAngle, 90, false, paint);
         canvas.drawArc(rect2, 270+startAngle, 90, false, paint);

上面的代码当startAngle = 0时,绘制的是一个静态的透明度交替的圆弧。接着要让它转起来。增加代码:       

startAngle+=10;
         if(startAngle == 180)
             startAngle = 0;

事实上后两句也可以不增加,仿照前文SurfaceView绘制旋转动画的例子用这种求余的思想,(rotate += 48) % 360,把上面角度也弄个%360,也是可以的。

剩下的事就是让这个东西循环执行了。在super.onDraw(canvas);这句代码后面加 invalidate();就可以了!透明圆环就转起来了。




三、先绘制外圆,再把外圆中内圆所占的区域擦除



[java] 
    view plain
     copy 
    
 
    
 
     
  
1. canvas.drawCircle(mCirX, mCirY, mRadius, paint);  
2. paint.setAlpha(0);  
3. paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));                
4. canvas.drawCircle(mCirX, mCirY, mRadius-mRingWidth, paint);



举报

相关推荐

0 条评论