小言_互联网的博客

Android 自定义View Canvas

317人阅读  评论(0)

上一篇在android 自定义view Paint 里面 说了几种常见的Point 属性

绘制图形的时候下面总有一个canvas ,Canvas 是是画布 上面可以绘制点,线,正方形,圆,等等,需要和Paint 结合一起

使用,比如画画 需要画笔和纸。

Canvas 常用的方法如下

(1) drawColor(@ColorInt int color) 绘制背景色

(2)drawRGB(int r, int g, int b)  设置rgb 绘制颜色

(3)drawARGB(int a, int r, int g, int b) 设置argb 绘制颜色

(4)drawPoint(float x, float y, @NonNull Paint paint) 绘制点

(5)drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint)  绘制点

(6)drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) 绘制线

(7) drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint) 绘制多条线

(8) drawRect 绘制方形(可以根据需求绘制长方形,正方形,方法很多参数就不贴出来了)

(9) drawRoundRect 绘制圆角的方形

(10)drawCircle(float cx, float cy, float radius, @NonNull Paint paint) 绘制圆

(11)drawOval 绘制椭圆

(12)drawArc 设置圆弧 

(13)drawText 绘制文字

(14)translate(float dx, float dy) 绘制平移的方法

(15)scale(float sx, float sy) 绘制缩放的方法

(16)rotate(float degrees) 绘制旋转的方法

(17)drawPath 绘制多种复合路径 (内容相对比较多一些后期会说道)

 (18)drawBitmap 加载图片(后面会重新写一遍bitmap的文章)

1 drawColor  绘制背景色 说起来这个刚开始接触android 学view 的时候就感觉好奇,别的都是需要带Paint 为啥drawColor 就不用带了呢,总是好奇呢,也不知道到是什么原因,最后自己把他理解为drawColor 只是绘制背景色就是换了一个带颜色的画布不需要画笔的也算是解决了自己的迷惑,最主要的源码里面里面有画笔

drawColor  代码如下:


  
  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3. super.onDraw(canvas);
  4. // 绘制背景色,个人理解为了直接选了一张带颜色的纸就不用画笔了
  5. canvas.drawColor(Color.RED);
  6. }

效果图

2  drawRGB 

   canvas.drawRGB(255,0,225);

效果图 

3 drawARGB

canvas.drawARGB(255, 0, 255, 0);

效果图

4 drawPoint(float x, float y, @NonNull Paint paint) 绘制点 (这个点方法里面有画笔注意呢)


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint .setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint .setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint .setColor(Color.RED);
  7. //设置描边宽度
  8. paint .setStrokeWidth( 10);
  9. // 绘制点
  10. canvas .drawPoint( 150, 150, paint);

效果图

5 drawPoints(@Size(multiple = 2) @NonNull float[] pts, @NonNull Paint paint)


  
  1. // 设置抗锯齿效果 true 是去边缘会将锯齿模糊化
  2. paint.setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint.setColor(Color.RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth(30);
  9. // 绘制点
  10. float[] points = { 150, 150, 200, 200, 300, 300} ;
  11. canvas.drawPoints(points, paint);

效果图

6  drawLine(float startX, float startY, float stopX, float stopY, @NonNull Paint paint) 绘制线


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint .setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint .setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint .setColor(Color.RED);
  7. //设置描边宽度
  8. paint .setStrokeWidth( 30);
  9. // 绘制实线
  10. canvas .drawLine( 80, 80, 800, 80, paint);

效果图

7  drawLines(@Size(multiple = 4) @NonNull float[] pts, @NonNull Paint paint) 绘制多条线


  
  1. // 设置抗锯齿效果 true 是去边缘会将锯齿模糊化
  2. paint.setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint.setColor(Color.RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth(30);
  9. // 绘制多条实线
  10. float[] lines = { 80, 80, 800, 80, 150, 150, 800, 150, 300, 300, 800, 300} ;
  11. canvas.drawLines(lines, paint);

效果图

8 绘制方形:

写法1:


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint .setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint .setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint .setColor(Color.RED);
  7. //设置描边宽度
  8. paint .setStrokeWidth( 10);
  9. // 绘制正方形
  10. canvas .drawRect( 500, 500, 800, 800,paint);
  11. // 绘制长方形
  12. canvas .drawRect( 100, 100, 800, 400,paint);

写法2:


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint.setAntiAlias( true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle( Paint. Style. FILL);
  5. // 设置画笔的颜色
  6. paint.setColor( Color. RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth( 10);
  9. // 绘制正方形
  10. RectF rect = new RectF(500f, 500f, 800f, 800f);
  11. canvas.drawRect(rect, paint);
  12. // 绘制长方形
  13. rect. left = 100f;
  14. rect.top = 100f;
  15. rect. right = 800f;
  16. rect.bottom = 400f;
  17. canvas.drawRect(rect, paint);

效果图

我们也可以把setStyle 属性修改STROKE 显示边框效果


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint.setAntiAlias( true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle( Paint. Style. STROKE);
  5. // 设置画笔的颜色
  6. paint.setColor( Color. RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth( 10);
  9. // 绘制正方形
  10. RectF rect = new RectF(500f, 500f, 800f, 800f);
  11. canvas.drawRect(rect, paint);
  12. // 绘制长方形
  13. rect. left = 100f;
  14. rect.top = 100f;
  15. rect. right = 800f;
  16. rect.bottom = 400f;
  17. canvas.drawRect(rect, paint);

效果图

9  drawRoundRect 绘制圆角的方形:


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint.setAntiAlias( true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle( Paint. Style. FILL);
  5. // 设置画笔的颜色
  6. paint.setColor( Color. RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth( 10);
  9. // 绘制正方形
  10. RectF rect = new RectF(500f, 500f, 800f, 800f);
  11. canvas.drawRoundRect(rect, 100, 200,paint);
  12. // 绘制长方形
  13. rect. left = 100f;
  14. rect.top = 100f;
  15. rect. right = 800f;
  16. rect.bottom = 400f;
  17. canvas.drawRoundRect(rect, 100, 200, paint);

效果图

把setStyle 属性修改STROKE 显示边框效果


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint.setAntiAlias( true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle( Paint. Style. STROKE);
  5. // 设置画笔的颜色
  6. paint.setColor( Color. RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth( 10);
  9. // 绘制正方形
  10. RectF rect = new RectF(500f, 500f, 800f, 800f);
  11. canvas.drawRoundRect(rect, 100, 200,paint);
  12. // 绘制长方形
  13. rect. left = 100f;
  14. rect.top = 100f;
  15. rect. right = 800f;
  16. rect.bottom = 400f;
  17. canvas.drawRoundRect(rect, 100, 200, paint);

效果图

10 drawCircle(float cx, float cy, float radius, @NonNull Paint paint) 绘制圆


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint .setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint .setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint .setColor(Color.RED);
  7. //设置描边宽度
  8. paint .setStrokeWidth( 10);
  9. // 绘制圆
  10. canvas .drawCircle( 200, 200, 150,paint);

效果图

把setStyle 属性修改STROKE 显示边框效果


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint .setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint .setStyle(Paint.Style.STROKE);
  5. // 设置画笔的颜色
  6. paint .setColor(Color.RED);
  7. //设置描边宽度
  8. paint .setStrokeWidth( 10);
  9. // 绘制圆
  10. canvas .drawCircle( 200, 200, 150,paint);

效果图

11 drawOval 绘制椭圆 


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint.setAntiAlias( true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle( Paint. Style. FILL);
  5. // 设置画笔的颜色
  6. paint.setColor( Color. RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth( 10);
  9. // 绘制椭圆方法一
  10. canvas.drawOval(500f, 500f, 300f, 800f, paint);
  11. // 绘制椭圆方法二
  12. RectF rect = new RectF();
  13. rect. left = 100f;
  14. rect.top = 100f;
  15. rect. right = 800f;
  16. rect.bottom = 400f;
  17. canvas.drawOval(rect, paint);

效果图

把setStyle 属性修改STROKE 显示边框效果


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint.setAntiAlias( true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle( Paint. Style. STROKE);
  5. // 设置画笔的颜色
  6. paint.setColor( Color. RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth( 10);
  9. // 绘制椭圆方法一
  10. canvas.drawOval(500f, 500f, 300f, 800f, paint);
  11. // 绘制椭圆方法二
  12. RectF rect = new RectF();
  13. rect. left = 100f;
  14. rect.top = 100f;
  15. rect. right = 800f;
  16. rect.bottom = 400f;
  17. canvas.drawOval(rect, paint);

效果图

 

12 drawArc 设置圆弧


  
  1. // 设置抗锯齿效果 true 是去边缘会将锯齿模糊化
  2. paint.setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle(Paint.Style.FILL);
  5. // 设置画笔的颜色
  6. paint.setColor(Color.RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth(10);
  9. RectF rect0 = new RectF();
  10. rect0.left = 100f;
  11. rect0.top = 200f;
  12. rect0.right = 300f;
  13. rect0.bottom = 400f;
  14. canvas.drawArc(rect0, 0 , 90 , true , paint);
  15. RectF rect = new RectF();
  16. rect.left = 200f;
  17. rect.top = 400f;
  18. rect.right = 600f;
  19. rect.bottom = 800f;
  20. canvas.drawArc(rect, 0 , 180 , true , paint);
  21. RectF rect1 = new RectF();
  22. rect1.left = 400f;
  23. rect1.top = 800f;
  24. rect1.right = 800f;
  25. rect1.bottom = 1000f;
  26. canvas.drawArc(rect1, 0 , 270 , true , paint);

效果图

把setStyle 属性修改STROKE 显示边框效果


  
  1. // 设置抗锯齿效果 true 是去边缘会将锯齿模糊化
  2. paint.setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle(Paint.Style.STROKE);
  5. // 设置画笔的颜色
  6. paint.setColor(Color.RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth(10);
  9. RectF rect0 = new RectF();
  10. rect0.left = 100f;
  11. rect0.top = 200f;
  12. rect0.right = 300f;
  13. rect0.bottom = 400f;
  14. canvas.drawArc(rect0, 0 , 90 , true , paint);
  15. RectF rect = new RectF();
  16. rect.left = 200f;
  17. rect.top = 400f;
  18. rect.right = 600f;
  19. rect.bottom = 800f;
  20. canvas.drawArc(rect, 0 , 180 , true , paint);
  21. RectF rect1 = new RectF();
  22. rect1.left = 400f;
  23. rect1.top = 800f;
  24. rect1.right = 800f;
  25. rect1.bottom = 1000f;
  26. canvas.drawArc(rect1, 0 , 270 , true , paint);

效果图:

 

里面的第三个参数 设置false的时候是不使用中间部分,为了更好的里面可以看下面图


  
  1. // 设置抗锯齿效果 true 是去边缘会将锯齿模糊化
  2. paint.setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint.setStyle(Paint.Style.STROKE);
  5. // 设置画笔的颜色
  6. paint.setColor(Color.RED);
  7. //设置描边宽度
  8. paint.setStrokeWidth(10);
  9. RectF rect0 = new RectF();
  10. rect0.left = 100f;
  11. rect0.top = 200f;
  12. rect0.right = 300f;
  13. rect0.bottom = 400f;
  14. canvas.drawArc(rect0, 0 , 90 , false , paint);
  15. RectF rect = new RectF();
  16. rect.left = 200f;
  17. rect.top = 400f;
  18. rect.right = 600f;
  19. rect.bottom = 800f;
  20. canvas.drawArc(rect, 0 , 180 , false , paint);
  21. RectF rect1 = new RectF();
  22. rect1.left = 400f;
  23. rect1.top = 800f;
  24. rect1.right = 800f;
  25. rect1.bottom = 1000f;
  26. canvas.drawArc(rect1, 0 , 270 , false , paint);

设置false 的 效果图

13 drawText 绘制文字


  
  1. // 设置抗锯齿效果 true是去边缘会将锯齿模糊化
  2. paint .setAntiAlias(true);
  3. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  4. paint .setStyle(Paint.Style.STROKE);
  5. // 设置画笔的颜色
  6. paint .setColor(Color.RED);
  7. // 设置字体的大小
  8. paint .setTextSize( 100f);
  9. //设置描边宽度
  10. paint .setStrokeWidth( 10f);
  11. canvas .drawText( "绘制问题", 100, 100,paint);

 

效果图

14 translate(float dx, float dy) 绘制平移的方法


  
  1. paint .setAntiAlias(true);
  2. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  3. paint .setStyle(Paint.Style.FILL);
  4. // 设置画笔的颜色
  5. paint .setColor(Color.RED);
  6. paint .setStrokeWidth( 10f);
  7. // 画一条线
  8. canvas .drawLine( 100, 300, 500, 300, paint);
  9. // 平移
  10. canvas .translate( 100, 200);
  11. // 平移之后的线
  12. canvas .drawLine( 100, 300, 500, 300, paint);

15 scale(float sx, float sy) 绘制缩放的方法


  
  1. paint .setAntiAlias(true);
  2. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  3. paint .setStyle(Paint.Style.FILL);
  4. // 设置画笔的颜色
  5. paint .setColor(Color.RED);
  6. paint .setStrokeWidth( 10f);
  7. // 画一条线
  8. canvas .drawLine( 100, 300, 500, 300, paint);
  9. // 缩放
  10. canvas .scale( 2.0f, 2.0f);
  11. // 缩放之后的线
  12. canvas .drawLine( 100, 300, 500, 300, paint);

效果图

16rotate(float degrees) 绘制旋转的方法


  
  1. paint .setAntiAlias(true);
  2. // 设置画笔的style (Paint.Style.FILL填充,Paint.Style.STROKE描边,Paint.Style.FILL_AND_STROKE填充加描边 )
  3. paint .setStyle(Paint.Style.FILL);
  4. // 设置画笔的颜色
  5. paint .setColor(Color.RED);
  6. paint .setStrokeWidth( 10f);
  7. // 画一条线
  8. canvas .drawLine( 100, 300, 500, 300, paint);
  9. // 缩放
  10. canvas .rotate( 30);
  11. // 旋转之后的线
  12. canvas .drawLine( 100, 300, 500, 300, paint);

效果图


转载:https://blog.csdn.net/qq_33210042/article/details/108536234
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场